Dekoratoren und Metadaten
Aktivieren Sie experimentelle Dekoratoren, schreiben Sie Klassen-, Methoden- und Eigenschaftsdekoratoren und verwenden Sie reflect-metadata für Muster zur Abhängigkeitsinjektion.
Dekoratoren und Metadaten ist eine kostenlose Frontend 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 Frontend Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.
Was sind Dekoratoren?
Dekoratoren sind Funktionen, die Klassen, Methoden, Eigenschaften oder Parameter zum Zeitpunkt ihrer Definition verändern. Sie werden intensiv in Angular, NestJS, TypeORM und klassenbasiertem MobX eingesetzt.
Dekorator-Syntax
Stellen Sie einer Klasse, Methode, Eigenschaft oder einem Parameter @DecoratorName voran. Die Dekoratorfunktion wird ausgeführt, wenn die Klasse definiert wird.
@Component({ selector: 'app-root' })
export class AppComponent {
@Input() title: string;
@HostListener('click')
onClick() {
console.log('clicked');
}
}Dekoratoren aktivieren
Aktivieren Sie das experimentelle Flag in tsconfig.json. Die neuen ECMAScript-Dekoratoren nach Stage 3 (TypeScript 5.0+) benötigen dieses Flag nicht, haben aber eine andere Semantik.
{
"compilerOptions": {
"experimentalDecorators": true,
"emitDecoratorMetadata": true
}
}Klassendekorator
Erhält den Konstruktor als Argument. Kann die Klasse ersetzen, umschließen oder erweitern.
function Singleton<T extends { new (...a: any[]): {} }>(target: T) {
let instance: T;
return class extends target {
constructor(...args: any[]) {
if (!instance) instance = new target(...args) as T;
return instance;
}
};
}
@Singleton
class Logger { /* ... */ }Methodendekorator
Erhält (target, key, descriptor). Kann die Methode umschließen – beispielsweise, um Aufrufe zu protokollieren.
function Log(target: any, key: string, descriptor: PropertyDescriptor) {
const original = descriptor.value;
descriptor.value = function (...args: any[]) {
console.log(`[${key}]`, args);
return original.apply(this, args);
};
}
class Service {
@Log
greet(name: string) { return `Hello ${name}`; }
}Eigenschaftendekorator
Erhält (target, key). Wird häufig zusammen mit reflect-metadata verwendet, um Informationen über die Eigenschaft zu registrieren.
function Required(target: any, key: string) {
const existing = Reflect.getMetadata('required', target) || [];
Reflect.defineMetadata('required', [...existing, key], target);
}
class User {
@Required name: string;
@Required email: string;
}Parametderdekorator
Erhält (target, key, parameterIndex). Wird für Dependency Injection verwendet, um festzuhalten, welche Parameter welche Services benötigen.
function Inject(token: string) {
return function (target: any, key: string, index: number) {
const existing = Reflect.getMetadata('inject', target, key) || {};
existing[index] = token;
Reflect.defineMetadata('inject', existing, target, key);
};
}
class UserService {
constructor(@Inject('Database') db: Database) {}
}reflect-metadata
reflect-metadata ist ein Polyfill, mit dem Dekoratoren Metadaten von Klassen lesen und in ihnen schreiben können. Es wird für Angular DI und viele ORMs benötigt.
npm install reflect-metadata
// main.ts (entry point):
import 'reflect-metadata';
import { Reflect } from 'reflect-metadata';
Reflect.defineMetadata('key', 'value', target);
Reflect.getMetadata('key', target); // 'value'Dekoratorfabriken
Eine Factory gibt einen Dekorator zurück – dies wird verwendet, um Argumente zu übergeben.
function Component(config: { selector: string }) {
return function (target: any) {
target.selector = config.selector;
};
}
@Component({ selector: 'app-root' })
class AppComponent {}Anwendungsfall: Validierung
Kombinieren Sie Eigenschaftendekoratoren mit einer validate()-Funktion, um eine kleine Validierungsbibliothek zu erstellen.
// Decorator records that a field is required:
function Required(target: any, key: string) {
const fields = Reflect.getMetadata('required', target) || [];
Reflect.defineMetadata('required', [...fields, key], target);
}
class User {
@Required name!: string;
@Required email!: string;
}
function validate(obj: any): string[] {
const required: string[] = Reflect.getMetadata('required', obj) || [];
return required.filter(k => obj[k] == null);
}Stage-3-Dekoratoren (TC39)
Die standardisierten Dekoratoren (TS 5.0+, in Node 22+ hinter einem Flag unterstützt) haben eine andere Signatur. Sie benötigen weder das experimentelle Flag noch reflect-metadata.
Wann Sie Dekoratoren verwenden sollten
Verwenden Sie Dekoratoren dort, wo das Framework sie bereitstellt (Angular, NestJS, TypeORM). Entwickeln Sie keine eigenen Dekoratoren für einfachen Frontend-Code – sie erhöhen die Komplexität und binden Sie an ein bestimmtes Laufzeitverhalten.
Kurzer Wissenstest
Welche tsconfig-Flags müssen Sie aktivieren, um Legacy-Dekoratoren (experimentelle Dekoratoren) mit Metadatenreflexion zu verwenden?
Zusammenfassung: Dekoratoren
Dekoratoren verändern Klassen, Methoden, Eigenschaften und Parameter zum Zeitpunkt ihrer Definition. Aktivieren Sie experimentalDecorators und emitDecoratorMetadata. Die Signaturen von Klassen-, Methoden-, Eigenschaften- und Parameterdekoratoren unterscheiden sich. reflect-metadata speichert Metadaten; Factorys übergeben Argumente. Dekoratoren werden intensiv in Angular, NestJS und TypeORM eingesetzt. Stage-3-Dekoratoren (TS 5+) sind die Zukunft und benötigen keine Flags.
Häufig gestellte Fragen
Ist die Lektion „Dekoratoren und Metadaten“ kostenlos?
Ja — der vollständige Text von „Dekoratoren und Metadaten“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Frontend Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Dekoratoren und Metadaten“?
Aktivieren Sie experimentelle Dekoratoren, schreiben Sie Klassen-, Methoden- und Eigenschaftsdekoratoren und verwenden Sie reflect-metadata für Muster zur Abhängigkeitsinjektion. Du übst Frontend 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 Frontend Academy zu starten?
Keine Vorkenntnisse erforderlich. Frontend 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 „Dekoratoren und Metadaten“?
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 Frontend Academy-Lektion Code schreiben und ausführen?
Ja. Jede Frontend 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
- Template-Literal-Typen
- Dekoratoren und Metadaten
- TypeScript mit React: FC-Generics und Hooks
- Strict Mode und any vermeiden