Dekorateure in TypeScript

Dekoratoren in TypeScript sind eine leistungsstarke Funktion, mit der Sie Metadaten hinzufügen oder das Verhalten von Klassen, Methoden, Eigenschaften oder Parametern ändern können. Sie werden häufig in Frameworks wie Angular verwendet, um Komponenten und Dienste anzureichern. Unabhängig davon, ob Sie Anfänger oder erfahrener Entwickler sind, führt Sie dieser Artikel Schritt für Schritt durch die Erstellung Ihrer eigenen Dekoratoren, um Ihre TypeScript-Anwendungen zu verbessern.

Voraussetzungen

Bevor Sie beginnen, stellen Sie sicher, dass Sie Folgendes haben:

• Ein grundlegendes Verständnis von TypeScript.
• TypeScript konfiguriert mit aktivierter Option „experimentalDecorators“ in Ihrer tsconfig.json-Datei:

{
  "compilerOptions": {
    "experimentalDecorators": true
  }
}

Was ist ein Dekorateur?

Ein Dekorator ist eine Funktion, die auf eine Klasse, Methode, Eigenschaft oder einen Parameter angewendet wird. Mit dem vorangestellten Symbol @ kann ein Dekorateur das Element, an das es angehängt ist, ändern oder bereichern. Zu seinen Hauptanwendungen gehören:

• Metadaten hinzufügen: Nützlich, um zusätzliche Informationen zu einer Klasse oder Eigenschaft bereitzustellen.
• Verhalten ändern: Ermöglicht Ihnen, die Funktionsweise einer Methode oder Klasse dynamisch zu ändern.
• Abhängigkeiten einfügen: praktisch in modularen Architekturen.

Erstellen eines Komponentendekorators

Schritt 1: Definieren Sie den Dekorateur

Wir erstellen einen Dekorator, der einer Klasse eine KomponenteName-Eigenschaft hinzufügt.

function Component(name: string) {
    return function (constructor: Function) {
        constructor.prototype.componentName = name;
    };
}

Erklärung:

Dieser Dekorateur empfängt eine Namenszeichenfolge und fügt sie als Eigenschaft zum Klassenprototyp hinzu. Alle Instanzen dieser Klasse haben Zugriff auf diese Eigenschaft.

Schritt 2: Decorator auftragen

Lassen Sie uns den Dekorator auf eine Klasse anwenden.

@Component('MonComposant')
class MonComposant {
    constructor() {
        console.log(`Le nom du composant est : ${this.componentName}`);
    }
}

Schritt 3: Testen Sie den Decorator

Lassen Sie uns eine Instanz der Klasse erstellen, um zu überprüfen, wie sie funktioniert.

const composant = new MonComposant(); 
// Affiche : Le nom du composant est : MonComposant

Erstellen eines Eingabedekorators

Schritt 1: Definieren Sie den Eingabedekorator

Dieser Dekorateur überwacht und protokolliert Änderungen an einer Eigenschaft.

function Input() {
    return function (target: any, propertyKey: string) {
        let value: any;

        const getter = () => {
            return value;
        };

        const setter = (newValue: any) => {
            console.log(`La valeur de ${propertyKey} a été mise à jour : ${newValue}`);
            value = newValue;
        };

        Object.defineProperty(target, propertyKey, {
            get: getter,
            set: setter,
            enumerable: true,
            configurable: true,
        });
    };
}

Erklärung:

Der Dekorateur verwendet Object.defineProperty, um Änderungen an der Eigenschaft abzufangen. Dadurch können Sie benutzerdefinierte Logik hinzufügen, z. B. die Änderungsprotokollierung.

Schritt 2: Wenden Sie den Input Decorator an

Lassen Sie es uns auf eine Immobilie anwenden.

{
  "compilerOptions": {
    "experimentalDecorators": true
  }
}

Schritt 3: Testen Sie den Input Decorator

Ändern Sie die Eigenschaft, um den Effekt zu beobachten.

function Component(name: string) {
    return function (constructor: Function) {
        constructor.prototype.componentName = name;
    };
}

Abschluss

TypeScript-Dekoratoren bieten eine elegante und leistungsstarke Möglichkeit, Ihren Klassen und Eigenschaften Funktionalität und Metadaten hinzuzufügen. Durch das Befolgen dieses Artikels haben Sie Folgendes gelernt:

1. Erstellen Sie einen Komponentendekorator, um eine Klasse zu bereichern.
2. Implementieren Sie einen Eingabedekorator, um Eigenschaftsänderungen zu überwachen.

Diese einfachen Beispiele zeigen, wie Dekorateure die Lesbarkeit und Wartbarkeit Ihres Codes verbessern können. Entdecken Sie weitere offizielle TypeScript-Dokumentationen, um noch erweiterte Anwendungen zu entdecken, wie z. B. die Verwendung reflektierter Metadaten mit Reflect.metadata.

Das obige ist der detaillierte Inhalt vonDekorateure in TypeScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!