Einführung in Dekoratoren

Dekoratoren in TypeScript sind spezielle Funktionen, mit denen Sie Metadaten hinzufügen oder das Verhalten von Klassen, Methoden und Eigenschaften ändern können.

Sie werden häufig in Frameworks wie Angular verwendet, um die Entwicklung zu vereinfachen.

Funktionsweise von Dekoratoren

Ein Dekorator ist eine Funktion, die auf eine Klasse oder deren Member (Methoden, Eigenschaften usw.) angewendet wird.

Beispielsweise ist @Component in Angular ein Dekorator, der einer Klasse Metadaten hinzufügt, um sie als Komponente zu definieren.

Verwendung integrierter Dekoratoren

TypeScript verfügt über integrierte Dekoratoren wie:

• @readonly: Macht eine Eigenschaft schreibgeschützt.
• @enumerable: Steuert, ob eine Eigenschaft aufzählbar ist.

Diese Dekoratoren helfen dabei, das Verhalten von Eigenschaften oder Methoden direkt zu ändern.

Erstellen eines einfachen Dekorators

Sie können Ihren eigenen Dekorator erstellen, um Nachrichten zu protokollieren oder Funktionalität hinzuzufügen:

Wenden Sie ihn auf eine Eigenschaft an: @Log.

function Log(target: any, propertyName: string) {
  console.log(`Property ${propertyName} was accessed`);
}

Klassendekoratoren

Klassendekoratoren werden verwendet, um das Verhalten einer gesamten Klasse zu ändern oder zu erweitern:

function SimpleDecorator(constructor: Function) {
  console.log(`${constructor.name} is decorated`);
}

Wenden Sie ihn auf eine Klasse an: @SimpleDecorator.

function SimpleDecorator(constructor: Function) {
  console.log(`${constructor.name} is decorated`);
}

Methodendekoratoren

Methodendekoratoren ändern das Verhalten einer Klassenmethode:

Verwenden Sie ihn für eine Methode: @LogMethod.

function LogMethod(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
  console.log(`Method ${propertyKey} was called`);
}

Verwendung von Dekoratoren in Angular

Angular verwendet intensiv Dekoratoren, um seinen Komponenten Metadaten hinzuzufügen:

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {}

Der @Component-Dekorator definiert die Klasse als Angular-Komponente.

Best Practices für die Verwendung von Dekoratoren

Beachten Sie bei der Verwendung von Dekoratoren:

• Halten Sie sie einfach und fokussiert.
• Verwenden Sie sie für Metadaten und nicht für komplexe Logik.
• Nutzen Sie nach Möglichkeit integrierte Dekoratoren, um Zeit zu sparen.

Glückwunsch!

Sie haben gelernt, wie Dekoratoren in TypeScript funktionieren und wie sie verwendet werden können, um Ihren Code zu ändern oder zu erweitern. Experimentieren Sie weiterhin mit Dekoratoren, um ihre Verwendung in Ihren Projekten zu meistern!