0Pricing
TypeScript Academy · Lektion

Methoden- und Eigenschaften-Decorators

Dekorieren Sie einzelne Methoden und Eigenschaften.

Methoden- und Eigenschaften-Decorators ist eine kostenlose TypeScript Academy-Lektion auf CoddyKit. Dies ist Lektion 2 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des TypeScript Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der TypeScript Academy-Kurs umfasst insgesamt 4 Lektionen.

Willkommen

Diese Lektion behandelt Methoden- und Eigenschafts-Decorators in TypeScript.

Einführung

Decorators sind ein JavaScript-Vorschlag der Stufe 3 und ein experimentelles TypeScript-Feature zum Hinzufügen von Metadaten sowie zum Ändern von Klassen und deren Mitgliedern.

Grundkonzept

Ein Decorator ist eine Funktion, die mithilfe der @-Syntax auf eine Klasse, Methode, Eigenschaft oder einen Parameter angewendet wird.
@sealed
class BugReport {
  type = 'report';
  title: string;
  constructor(t: string) { this.title = t; }
}

Klassen-Decorator

Klassen-Decorators erhalten die Konstruktorfunktion und können eine geänderte Version zurückgeben.
function sealed(constructor: Function) {
  Object.seal(constructor);
  Object.seal(constructor.prototype);
}

Methoden-Decorator

Methoden-Decorators erhalten das Zielobjekt, den Eigenschaftsnamen und den Eigenschaftsdeskriptor.
function log(target: any, key: string, desc: PropertyDescriptor) {
  const orig = desc.value;
  desc.value = function(...args: any[]) {
    console.log('Calling', key);
    return orig.apply(this, args);
  };
}

Eigenschafts-Decorator

Eigenschafts-Decorators erhalten das Zielobjekt und den Eigenschaftsschlüssel. Lese- und Schreibzugriffe können sie nicht direkt abfangen.
function readonly(target: any, key: string) {
  Object.defineProperty(target, key, { writable: false });
}

Parameter-Decorator

Parameter-Decorators erhalten das Zielobjekt, den Methodennamen und den Parameterindex.
function required(target: any, key: string, index: number) {
  const meta = Reflect.getMetadata('required', target, key) || [];
  meta.push(index);
  Reflect.defineMetadata('required', meta, target, key);
}

Decorator-Factories

Eine Decorator-Fabrik ist eine Funktion, die einen Decorator zurückgibt. Sie nimmt Konfigurationsparameter entgegen.
function role(name: string) {
  return function(target: any, key: string) {
    Reflect.defineMetadata('role', name, target, key);
  };
}

class UserController {
  @role('admin')
  deleteUser() {}
}

NestJS-Decorators

NestJS verwendet Decorators umfassend für Controller, Dependency Injection und Routing.
@Controller('users')
class UsersController {
  constructor(private usersService: UsersService) {}

  @Get()
  findAll(): User[] {
    return this.usersService.findAll();
  }
}

reflect-metadata

Decorators arbeiten häufig mit dem reflect-metadata-Polyfill, um Metadaten zur Laufzeit zu speichern und abzurufen.
import 'reflect-metadata';
// Enable in tsconfig: experimentalDecorators: true, emitDecoratorMetadata: true

Reihenfolge von Decorators

Mehrere Decorators in derselben Deklaration werden von unten nach oben angewendet (der zuletzt geschriebene wird zuerst ausgewertet).
@first
@second
class Example {}
// Applied: second first, then first

Kurzer Test

Welche TypeScript-Konfiguration ist erforderlich, um Decorators zu verwenden?

Zusammenfassung

Decorators verwenden die @-Syntax, um Klassen, Methoden, Eigenschaften und Parameter zu ändern. Sie werden mit experimentalDecorators in tsconfig aktiviert und häufig von Frameworks wie NestJS und Angular verwendet.

Häufig gestellte Fragen

Ist die Lektion „Methoden- und Eigenschaften-Decorators“ kostenlos?

Ja — der vollständige Text von „Methoden- und Eigenschaften-Decorators“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des TypeScript Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der TypeScript Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Methoden- und Eigenschaften-Decorators“?

Dekorieren Sie einzelne Methoden und Eigenschaften. Du übst TypeScript Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um TypeScript Academy zu starten?

Keine Vorkenntnisse erforderlich. TypeScript Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 2 von 4.

Wie lange dauert die Lektion „Methoden- und Eigenschaften-Decorators“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser TypeScript Academy-Lektion Code schreiben und ausführen?

Ja. Jede TypeScript Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

  1. Klassen-Decorators: Verhalten kapseln
  2. Methoden- und Eigenschaften-Decorators
  3. Parameter-Decorators und Metadaten
  4. Decorators in Frameworks: Beispiel mit NestJS
← Zurück zu TypeScript Academy