TypeScript-decorators begrijpen

TypeScript-decorators bieden een krachtige manier om functionaliteit toe te voegen aan klassen, methoden, eigenschappen en parameters tijdens runtime. Ze worden vaak gebruikt in frameworks zoals Angular voor dependency injection, logging, validatie en meer. Dit artikel legt de verschillende typen decorators in TypeScript uit en hoe u ze effectief kunt gebruiken.

Wat zijn TypeScript-decorators?

Decorators in TypeScript zijn functies die worden voorafgegaan door een @-symbool en die kunnen worden gekoppeld aan verschillende elementen zoals klassen, methoden of eigenschappen. Ze stellen u in staat het gedrag van de code waaraan ze zijn gekoppeld te wijzigen, zonder de code rechtstreeks te wijzigen.

Soorten decorateurs

• Class Decorators: Toegepast op een hele klasse.
• Methodedecorators: Toegepast op een methode binnen een klasse.
• Eigenschapsdecorators: Toegepast op een eigenschap in een klasse.
• Parameterdecorators: Toegepast op de parameters van een methode in een klasse.

Hoe u decorators in TypeScript kunt inschakelen

Voordat u decorators kunt gebruiken, moet u ze inschakelen in uw bestand tsconfig.json door "experimentalDecorators" in te stellen op true.

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

Klasse Decorateurs

Een class decorator wordt toegepast op een hele class. Het is handig voor het toevoegen van metadata of het wijzigen van het gedrag van een class.

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'

Methode Decorateurs

Methodedecorators worden toegepast op methoden binnen een klasse. Deze decorators kunnen worden gebruikt om het gedrag van een methode te wijzigen of te loggen.

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'

Vastgoeddecorateurs

Property decorators worden gebruikt om functionaliteit toe te voegen aan properties in een klasse. Ze kunnen nuttig zijn voor validatie of om metadata toe te voegen aan een property.

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-decoratoren

Parameterdecorators worden gebruikt om informatie over methodeparameters te wijzigen of vast te leggen.

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
  }
}

Conclusie

Decorators in TypeScript bieden een krachtige manier om de functionaliteit van uw code te verbeteren zonder de structuur ervan te wijzigen. Door te begrijpen hoe u class-, method-, property- en parameterdecorators gebruikt, kunt u geavanceerde functies implementeren zoals logging, validatie en dependency injection. Decorators zijn een belangrijke functie in TypeScript die uw ontwikkelingsworkflow aanzienlijk kunnen verbeteren, vooral in grote applicaties.