Hoe decorators in TypeScript te gebruiken

Decorators in TypeScript zijn een krachtige functie waarmee ontwikkelaars extra functionaliteit kunnen toevoegen aan klassen, methoden, eigenschappen en parameters. Ze bieden een manier om het gedrag van bestaande code te wijzigen zonder de werkelijke structuur te veranderen. Deze gids legt uit hoe u decorators in TypeScript kunt gebruiken met eenvoudig te volgen voorbeelden.

Wat zijn decorateurs?

Decorators zijn speciale functies die kunnen worden toegepast op klassen, methoden, eigenschappen of parameters. Ze worden aangeroepen tijdens runtime en stellen ontwikkelaars in staat om code op een declaratieve manier te annoteren en te wijzigen. Om decorators in een TypeScript-project in te schakelen, moet de vlag experimentalDecorators worden ingesteld op true in het bestand tsconfig.json.

Decorators inschakelen in TypeScript

Om decorators te gebruiken, moet de TypeScript-compiler geconfigureerd zijn om ze te herkennen. Dit kan gedaan worden door de experimentalDecorators vlag in te stellen op true in het tsconfig.json bestand.

{
  "compilerOptions": {
    "target": "ES6",
    "experimentalDecorators": true
  }
}

Zodra decorators zijn ingeschakeld, kunnen ze in het hele project worden gebruikt.

Een klassedecorator maken

Een class decorator wordt toegepast op een class declaration en kan worden gebruikt om een ​​class definition te wijzigen of te vervangen. Class decorators worden gedeclareerd net boven de class die ze decoreren, met behulp van het @ symbool.

function LogClass(target: Function) {
  console.log(`Class ${target.name} is created.`);
}

@LogClass
class Person {
  constructor(public name: string) {}
}

const person = new Person('Alice');

In dit voorbeeld logt de decorator LogClass een bericht wanneer de klasse Person wordt gemaakt. De decorator is gedefinieerd als een functie die één argument aanneemt: de constructor van de klasse die wordt gedecoreerd.

Methode Decorateurs

Method decorators worden toegepast op methoden binnen een klasse. Ze stellen ontwikkelaars in staat om methodeaanroepen te onderscheppen, hun gedrag te wijzigen of extra bewerkingen uit te voeren voor of nadat de methode is uitgevoerd.

function LogMethod(target: Object, propertyKey: string, descriptor: PropertyDescriptor) {
  const originalMethod = descriptor.value;

  descriptor.value = function (...args: any[]) {
    console.log(`Method ${propertyKey} is called with arguments: ${args}`);
    return originalMethod.apply(this, args);
  };

  return descriptor;
}

class Calculator {
  @LogMethod
  add(a: number, b: number): number {
    return a + b;
  }
}

const calc = new Calculator();
calc.add(2, 3);

Hier logt de decorator LogMethod de methodenaam en de argumenten ervan wanneer de methode add wordt aangeroepen. Het verpakt de oorspronkelijke methode in een nieuwe functie die de logging uitvoert voordat deze wordt gedelegeerd naar de oorspronkelijke methode.

Vastgoeddecorateurs

Property decorators worden gebruikt om het gedrag van klasse-eigenschappen te observeren of te wijzigen. In tegenstelling tot method decorators hebben ze geen toegang tot de eigenschapswaarde zelf, maar ze kunnen metadata toevoegen aan eigenschappen.

function ReadOnly(target: Object, propertyKey: string) {
  Object.defineProperty(target, propertyKey, {
    writable: false
  });
}

class Book {
  @ReadOnly
  title: string = 'TypeScript Guide';
}

const myBook = new Book();
myBook.title = 'New Title'; // This will cause an error in strict mode

In dit voorbeeld wordt de decorator ReadOnly toegepast op de eigenschap title van de klasse Book, waardoor deze alleen-lezen wordt door writable in te stellen op false.

Parameter-decoratoren

Parameterdecorators worden gebruikt om methodeparameters te annoteren of te wijzigen. Ze ontvangen drie argumenten: het doelobject, de methodenaam en de parameterindex.

function LogParameter(target: Object, propertyKey: string, parameterIndex: number) {
  console.log(`Parameter in position ${parameterIndex} at ${propertyKey} method is decorated.`);
}

class UserService {
  greet(@LogParameter message: string): void {
    console.log(message);
  }
}

const userService = new UserService();
userService.greet('Hello, TypeScript!');

In dit voorbeeld wordt de decorator LogParameter toegepast op de parameter message van de methode greet in de klasse UserService. De decorator registreert informatie over de parameter die wordt gedecoreerd.

Conclusie

Decorators in TypeScript bieden een krachtige manier om de functionaliteit van code te verbeteren zonder de structuur ervan te veranderen. Door gebruik te maken van class-, method-, property- en parameterdecorators kunnen ontwikkelaars eenvoudig herbruikbare functionaliteit toevoegen aan hun projecten. Met de voorbeelden in deze handleiding is het eenvoudig om aan de slag te gaan met het gebruik van decorators in TypeScript.