Decorators en metadata
Schakel experimentele decorators in, schrijf decorators voor klassen, methoden en properties en gebruik reflect-metadata voor patronen voor dependency injection.
Decorators en metadata is een gratis Frontend Academy-les op CoddyKit. Dit is les 2 van 4. Je kunt de volledige les hieronder gratis lezen en daarna in de browser praktisch oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject Frontend Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus Frontend Academy bevat in totaal 4 lessen.
Wat zijn decorators
Decorators zijn functies die klassen, methoden, eigenschappen of parameters wijzigen tijdens de definitie. Ze worden veel gebruikt in Angular, NestJS, TypeORM en MobX op basis van klassen.
Syntax van decorators
Voorzie een klasse, methode, eigenschap of parameter van het voorvoegsel @DecoratorName. De decoratorfunctie wordt uitgevoerd wanneer de klasse wordt gedefinieerd.
@Component({ selector: 'app-root' })
export class AppComponent {
@Input() title: string;
@HostListener('click')
onClick() {
console.log('clicked');
}
}Decorators inschakelen
Schakel de experimentele vlag in tsconfig.json in. De nieuwe ECMAScript Stage 3-decorators (TypeScript 5.0+) hebben deze vlag niet nodig, maar hebben een andere semantiek.
{
"compilerOptions": {
"experimentalDecorators": true,
"emitDecoratorMetadata": true
}
}Klassen-decorator
Ontvangt de constructor als argument. Kan de klasse vervangen, omwikkelen of uitbreiden.
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 { /* ... */ }Methode-decorator
Ontvangt (target, key, descriptor). Kan de methode omwikkelen — bijvoorbeeld om aanroepen te registreren.
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}`; }
}Eigenschapsdecorator
Ontvangt (target, key). Wordt vaak gebruikt met reflect-metadata om informatie over de eigenschap te registreren.
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;
}Parameter-decorator
Ontvangt (target, key, parameterIndex). Wordt gebruikt voor afhankelijkheidsinjectie — om vast te leggen welke parameters welke services nodig hebben.
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 is een polyfill waarmee decorators metagegevens op klassen kunnen lezen en schrijven. Het is vereist voor Angular DI en veel ORM's.
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'Decoratorfabrieken
Een fabrieksfunctie retourneert een decorator — zo kun je argumenten meegeven.
function Component(config: { selector: string }) {
return function (target: any) {
target.selector = config.selector;
};
}
@Component({ selector: 'app-root' })
class AppComponent {}Toepassing voor validatie
Combineer eigenschapsdecorators met een functie validate() om een kleine validatiebibliotheek te bouwen.
// 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-decorators (TC39)
De gestandaardiseerde decorators (TS 5.0+, ondersteund in Node 22+ wanneer een vlag is ingeschakeld) hebben een andere signatuur. Ze hebben de experimentele vlag niet nodig en ook reflect-metadata niet.
Wanneer gebruik je decorators
Gebruik decorators waar het framework ze aanbiedt (Angular, NestJS, TypeORM). Bouw ze niet zelf in gewone frontendcode — ze voegen complexiteit toe en binden je aan specifiek uitvoeringsgedrag.
Korte controle
Welke tsconfig-opties moet je inschakelen om legacy-decorators (experimenteel) met reflectie van metagegevens te gebruiken?
Samenvatting: decorators
Decorators wijzigen klassen, methoden, eigenschappen en parameters tijdens de definitie. Schakel experimentalDecorators + emitDecoratorMetadata in. De signaturen van klasse-, methode-, eigenschaps- en parameter-decorators verschillen. reflect-metadata slaat metagegevens op; fabrieksfuncties geven argumenten door. Ze worden veel gebruikt door Angular, NestJS en TypeORM. Stage 3-decorators (TS 5+) zijn de toekomst en hebben geen vlaggen nodig.
Leer HTML met een AI-tutor — gratis
Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.
- Cursussen
- 41
- Lessen
- 163
Veelgestelde vragen
Is de les “Decorators en metadata” gratis?
Ja — de volledige tekst van “Decorators en metadata” kun je hier gratis op het web lezen. Als je interactief wilt oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is, en de rest van de cursus Frontend Academy wilt ontgrendelen, kun je upgraden naar CoddyKit PRO. De cursus Frontend Academy bevat in totaal 4 lessen.
Wat leer ik in “Decorators en metadata”?
Schakel experimentele decorators in, schrijf decorators voor klassen, methoden en properties en gebruik reflect-metadata voor patronen voor dependency injection. Je oefent met Frontend Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.
Heb ik ervaring nodig om met Frontend Academy te beginnen?
Ervaring vooraf is niet nodig. Frontend Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 2 van 4.
Hoe lang duurt de les “Decorators en metadata”?
De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.
Kan ik code schrijven en uitvoeren in deze les over Frontend Academy?
Ja. Elke les over Frontend Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.
Alle lessen in deze cursus
- Template literal-types
- Decorators en metadata
- TypeScript met React: FC-generics en hooks
- Strict mode en any elimineren