So verwenden Sie Dekoratoren in TypeScript

Dekoratoren in TypeScript sind eine leistungsstarke Funktion, mit der Entwickler Klassen, Methoden, Eigenschaften und Parametern zusätzliche Funktionen hinzufügen können. Sie bieten eine Möglichkeit, das Verhalten von vorhandenem Code zu ändern, ohne dessen eigentliche Struktur zu verändern. In dieser Anleitung wird anhand leicht verständlicher Beispiele die Verwendung von Dekoratoren in TypeScript erläutert.

Was sind Dekorateure?

Dekoratoren sind spezielle Funktionen, die auf Klassen, Methoden, Eigenschaften oder Parameter angewendet werden können. Sie werden zur Laufzeit aufgerufen und ermöglichen Entwicklern, Code deklarativ zu kommentieren und zu ändern. Um Dekoratoren in einem TypeScript-Projekt zu aktivieren, muss das Flag experimentalDecorators in der Datei tsconfig.json auf true gesetzt werden.

Dekoratoren in TypeScript aktivieren

Um Dekoratoren verwenden zu können, muss der TypeScript-Compiler so konfiguriert werden, dass er sie erkennt. Dies kann erreicht werden, indem das Flag experimentalDecorators in der Datei tsconfig.json auf true gesetzt wird.

{
  "compilerOptions": {
    "target": "ES6",
    "experimentalDecorators": true
  }
}

Sobald Dekoratoren aktiviert sind, können sie im gesamten Projekt verwendet werden.

Erstellen eines Klassendekorators

Ein Klassendekorator wird auf eine Klassendeklaration angewendet und kann zum Ändern oder Ersetzen einer Klassendefinition verwendet werden. Klassendekoratoren werden direkt über der Klasse deklariert, die sie dekorieren, mit dem Symbol @.

function LogClass(target: Function) {
  console.log(`Class ${target.name} is created.`);
}

@LogClass
class Person {
  constructor(public name: string) {}
}

const person = new Person('Alice');

In diesem Beispiel protokolliert der Dekorator LogClass eine Nachricht, wenn die Klasse Person erstellt wird. Der Dekorator ist als Funktion definiert, die ein einzelnes Argument annimmt: den Konstruktor der zu dekorierenden Klasse.

Methodendekoratoren

Methodendekoratoren werden auf Methoden innerhalb einer Klasse angewendet. Sie ermöglichen Entwicklern, Methodenaufrufe abzufangen, ihr Verhalten zu ändern oder zusätzliche Vorgänge vor oder nach der Ausführung der Methode auszuführen.

function LogMethod(target: Object, propertyKey: string, descriptor: PropertyDescriptor) {
  const originalMethod = descriptor.value;

  descriptor.value = function (...args: any[]) {
    console.log(`Method ${propertyKey} is called with arguments: ${args}`);
    return originalMethod.apply(this, args);
  };

  return descriptor;
}

class Calculator {
  @LogMethod
  add(a: number, b: number): number {
    return a + b;
  }
}

const calc = new Calculator();
calc.add(2, 3);

Hier protokolliert der Dekorator LogMethod den Methodennamen und seine Argumente, wenn die Methode add aufgerufen wird. Er kapselt die ursprüngliche Methode in eine neue Funktion ein, die die Protokollierung durchführt, bevor sie an die ursprüngliche Methode delegiert wird.

Immobiliendekorateure

Eigenschaftendekoratoren werden verwendet, um das Verhalten von Klasseneigenschaften zu beobachten oder zu ändern. Im Gegensatz zu Methodendekoratoren haben sie keinen Zugriff auf den Eigenschaftswert selbst, können Eigenschaften jedoch Metadaten hinzufügen.

function ReadOnly(target: Object, propertyKey: string) {
  Object.defineProperty(target, propertyKey, {
    writable: false
  });
}

class Book {
  @ReadOnly
  title: string = 'TypeScript Guide';
}

const myBook = new Book();
myBook.title = 'New Title'; // This will cause an error in strict mode

In diesem Beispiel wird der Dekorator ReadOnly auf die Eigenschaft title der Klasse Book angewendet, wodurch sie schreibgeschützt wird, indem writable auf false gesetzt wird.

Parameter-Dekoratoren

Parameterdekoratoren werden verwendet, um Methodenparameter zu kommentieren oder zu ändern. Sie erhalten drei Argumente: das Zielobjekt, den Methodennamen und den Parameterindex.

function LogParameter(target: Object, propertyKey: string, parameterIndex: number) {
  console.log(`Parameter in position ${parameterIndex} at ${propertyKey} method is decorated.`);
}

class UserService {
  greet(@LogParameter message: string): void {
    console.log(message);
  }
}

const userService = new UserService();
userService.greet('Hello, TypeScript!');

In diesem Beispiel wird der Dekorator LogParameter auf den Parameter message der Methode greet in der Klasse UserService angewendet. Der Dekorator protokolliert Informationen über den dekorierten Parameter.

Abschluss

Dekoratoren in TypeScript bieten eine leistungsstarke Möglichkeit, die Codefunktionalität zu verbessern, ohne dessen Struktur zu verändern. Durch die Nutzung von Klassen-, Methoden-, Eigenschafts- und Parameterdekoratoren können Entwickler ihren Projekten problemlos wiederverwendbare Funktionen hinzufügen. Mit den Beispielen in diesem Handbuch ist der Einstieg in die Verwendung von Dekoratoren in TypeScript ganz einfach.