TypeScript-Dekoratoren verstehen

TypeScript-Dekoratoren bieten eine leistungsstarke Möglichkeit, Klassen, Methoden, Eigenschaften und Parametern zur Laufzeit Funktionalität hinzuzufügen. Sie werden häufig in Frameworks wie Angular für Abhängigkeitseinfügung, Protokollierung, Validierung und mehr verwendet. Dieser Artikel erklärt die verschiedenen Arten von Dekoratoren in TypeScript und wie man sie effektiv einsetzt.

Was sind TypeScript-Dekoratoren?

Dekoratoren in TypeScript sind Funktionen, die mit einem @-Symbol beginnen und an verschiedene Elemente wie Klassen, Methoden oder Eigenschaften angehängt werden können. Sie ermöglichen es Ihnen, das Verhalten des Codes zu ändern, an den sie angehängt sind, ohne den Code direkt zu verändern.

Arten von Dekorateuren

• Klassendekoratoren: Auf eine ganze Klasse angewendet.
• Methodendekoratoren: Wird auf eine Methode innerhalb einer Klasse angewendet.
• Eigenschaftsdekoratoren: Wird auf eine Eigenschaft in einer Klasse angewendet.
• Parameter-Dekoratoren: Wird auf die Parameter einer Methode in einer Klasse angewendet.

So aktivieren Sie Dekoratoren in TypeScript

Bevor Sie Dekoratoren verwenden können, stellen Sie sicher, dass Sie sie in Ihrer Datei tsconfig.json aktivieren, indem Sie "experimentalDecorators" auf true setzen.

{
  "compilerOptions": {
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true
  }
}

Klassendekorateure

Ein Klassendekorator wird auf eine ganze Klasse angewendet. Er ist nützlich, um Metadaten hinzuzufügen oder das Verhalten einer Klasse zu ändern.

function Controller(route: string) {
  return function (target: Function) {
    target.prototype.route = route;
  };
}

@Controller('/api/user')
class UserController {
  // Class logic
}

console.log(new UserController().route); // Outputs: '/api/user'

Methodendekoratoren

Methodendekoratoren werden auf Methoden innerhalb einer Klasse angewendet. Diese Dekoratoren können verwendet werden, um das Verhalten einer Methode zu ändern oder zu protokollieren.

function Log(target: any, propertyName: string, descriptor: PropertyDescriptor) {
  const originalMethod = descriptor.value;
  
  descriptor.value = function (...args: any[]) {
    console.log(`Calling ${propertyName} with arguments: ${args}`);
    return originalMethod.apply(this, args);
  };
}

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

const calculator = new Calculator();
calculator.add(2, 3); // Logs: 'Calling add with arguments: 2,3'

Immobiliendekorateure

Eigenschaftendekoratoren werden verwendet, um Eigenschaften in einer Klasse Funktionalität hinzuzufügen. Sie können für die Validierung oder zum Hinzufügen von Metadaten zu einer Eigenschaft nützlich sein.

function ReadOnly(target: any, key: string) {
  const descriptor: PropertyDescriptor = {
    writable: false
  };
  return descriptor;
}

class Person {
  @ReadOnly
  name: string = 'John Doe';
}

const person = new Person();
person.name = 'Jane Doe'; // Error: Cannot assign to read only property 'name'

Parameter-Dekoratoren

Parameterdekoratoren werden verwendet, um Informationen zu Methodenparametern zu ändern oder zu protokollieren.

function LogParameter(target: any, propertyName: string, index: number) {
  const metadataKey = `log_${propertyName}_parameters`;
  
  if (Array.isArray(target[metadataKey])) {
    target[metadataKey].push(index);
  } else {
    target[metadataKey] = [index];
  }
}

class Demo {
  method(@LogParameter param1: string, @LogParameter param2: number) {
    // Method logic
  }
}

Abschluss

Dekoratoren in TypeScript bieten eine leistungsstarke Möglichkeit, die Funktionalität Ihres Codes zu verbessern, ohne dessen Struktur zu ändern. Wenn Sie verstehen, wie Sie Klassen-, Methoden-, Eigenschafts- und Parameterdekoratoren verwenden, können Sie erweiterte Funktionen wie Protokollierung, Validierung und Abhängigkeitsinjektion implementieren. Dekoratoren sind eine Schlüsselfunktion in TypeScript, die Ihren Entwicklungsworkflow erheblich verbessern kann, insbesondere bei großen Anwendungen.