Frontend Academy · Les

Decorators en metadata

Schakel experimentele decorators in, schrijf decorators voor klassen, methoden en properties en gebruik reflect-metadata voor patronen voor dependency injection.

Les 2 van 414 stappen

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.

Gratis beginnen

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

  1. Template literal-types
  2. Decorators en metadata
  3. TypeScript met React: FC-generics en hooks
  4. Strict mode en any elimineren
← Terug naar Frontend Academy