So erstellen Sie benutzerdefinierte TypeScript-Dekoratoren

Dekoratoren sind eine Funktion in TypeScript, mit der Klassen, Methoden, Eigenschaften oder Parameter zur Laufzeit geändert werden können. Es handelt sich um spezielle Funktionen, die Metaprogrammierungsfunktionen bereitstellen. In TypeScript werden Dekoratoren häufig in Frameworks wie Angular verwendet, um die Funktionalität zu verbessern. In diesem Artikel wird Schritt für Schritt erklärt, wie Sie benutzerdefinierte Dekoratoren erstellen.

Arten von Dekoratoren in TypeScript

Es gibt vier Haupttypen von Dekoratoren in TypeScript:

• Klassendekorateure
• Methodendekoratoren
• Accessoire-Dekorateure
• Immobiliendekorateure

Dekoratoren in TypeScript aktivieren

Um Dekoratoren in einem TypeScript-Projekt zu verwenden, muss die Option experimentalDecorators in der Datei tsconfig.json aktiviert sein.

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

Erstellen eines Klassendekorators

Klassendekoratoren werden auf den Konstruktor einer Klasse angewendet. Sie sind nützlich, um der Klasse Metadaten oder Funktionen hinzuzufügen. Hier ist ein Beispiel für die Erstellung eines einfachen Klassendekorators.

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

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

const person = new Person("John");
// Output: Class Person is created

Erstellen eines Methodendekorators

Methodendekoratoren werden auf Klassenmethoden angewendet. Sie können verwendet werden, um das Verhalten der Methode zu ändern oder zu beobachten. Unten sehen Sie ein Beispiel für einen Methodendekorator, der die Methodenausführung protokolliert.

function logMethod(target: any, 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) {
    return a + b;
  }
}

const calc = new Calculator();
calc.add(2, 3); 
// Output: Method add is called with arguments: [2, 3]

Erstellen eines Eigenschaftendekorators

Eigenschaftendekoratoren können verwendet werden, um Eigenschaften zu beobachten oder zu ändern. Hier ist ein Beispiel, bei dem ein Eigenschaftendekorator sicherstellt, dass eine Eigenschaft einen Standardwert hat.

function defaultValue(value: any) {
  return function (target: any, propertyKey: string) {
    let propertyValue = value;

    const getter = function () {
      return propertyValue;
    };

    const setter = function (newValue: any) {
      propertyValue = newValue || value;
    };

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

class User {
  @defaultValue('Anonymous')
  name!: string;
}

const user = new User();
console.log(user.name); // Output: Anonymous
user.name = 'Alice';
console.log(user.name); // Output: Alice

Erstellen eines Parameter-Decorators

Parameterdekoratoren werden auf die Parameter einer Methode angewendet. Sie können für Aufgaben wie die Validierung oder das Protokollieren von Argumenten nützlich sein. Hier ist ein Beispiel für einen Parameterdekorator.

function logParameter(target: any, propertyKey: string, parameterIndex: number) {
  console.log(`Parameter at index ${parameterIndex} in method ${propertyKey} is being decorated`);
}

class Vehicle {
  drive(@logParameter speed: number) {
    console.log(`Driving at speed ${speed}`);
  }
}

const vehicle = new Vehicle();
vehicle.drive(50);
// Output: Parameter at index 0 in method drive is being decorated

Abschluss

Dekoratoren in TypeScript bieten leistungsstarke Metaprogrammierungsfunktionen, mit denen die Funktionalität von Klassen, Methoden und Eigenschaften verbessert und erweitert werden kann. Durch die Verwendung benutzerdefinierter Dekoratoren können wiederverwendbare, effiziente und organisierte Codestrukturen erstellt werden. In diesem Handbuch wird die Erstellung verschiedener Arten von Dekoratoren demonstriert: Klasse, Methode, Eigenschaft und Parameter.