Hoe u aangepaste TypeScript-decorators maakt

Decorators zijn een functie in TypeScript waarmee u klassen, methoden, eigenschappen of parameters tijdens runtime kunt wijzigen. Het zijn speciale functies die metaprogrammeermogelijkheden bieden. In TypeScript worden decorators vaak gebruikt in frameworks zoals Angular om de functionaliteit te verbeteren. Dit artikel legt stapsgewijs uit hoe u aangepaste decorators maakt.

Soorten decorators in TypeScript

Er zijn vier hoofdtypen decorators in TypeScript:

• Klasse Decorateurs
• Methode Decorateurs
• Accessoire-decorateurs
• Vastgoeddecorateurs

Decorators inschakelen in TypeScript

Om decorators in een TypeScript-project te gebruiken, moet de optie experimentalDecorators ingeschakeld zijn in het bestand tsconfig.json.

{
  "compilerOptions": {
    "experimentalDecorators": true
  }
}

Een klassedecorator maken

Class decorators worden toegepast op de constructor van een class. Ze zijn handig voor het toevoegen van metadata of functionaliteit aan de class. Hier is een voorbeeld van hoe u een eenvoudige class decorator maakt.

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

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

const person = new Person("John");
// Output: Class Person is created

Een methodedecorator maken

Method decorators worden toegepast op klassemethoden. Ze kunnen worden gebruikt om het gedrag van de methode te wijzigen of te observeren. Hieronder ziet u een voorbeeld van een method decorator die de uitvoering van de methode logt.

function logMethod(target: any, 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) {
    return a + b;
  }
}

const calc = new Calculator();
calc.add(2, 3); 
// Output: Method add is called with arguments: [2, 3]

Een woningdecorateur maken

Property decorators kunnen worden gebruikt om properties te observeren of te wijzigen. Hier is een voorbeeld waarbij een property decorator ervoor zorgt dat een property een standaardwaarde heeft.

function defaultValue(value: any) {
  return function (target: any, propertyKey: string) {
    let propertyValue = value;

    const getter = function () {
      return propertyValue;
    };

    const setter = function (newValue: any) {
      propertyValue = newValue || value;
    };

    Object.defineProperty(target, propertyKey, {
      get: getter,
      set: setter,
      enumerable: true,
      configurable: true,
    });
  };
}

class User {
  @defaultValue('Anonymous')
  name!: string;
}

const user = new User();
console.log(user.name); // Output: Anonymous
user.name = 'Alice';
console.log(user.name); // Output: Alice

Een parameterdecorator maken

Parameterdecorators worden toegepast op de parameters van een methode. Ze kunnen nuttig zijn voor taken zoals validatie of het loggen van argumenten. Hier is een voorbeeld van een parameterdecorator.

function logParameter(target: any, propertyKey: string, parameterIndex: number) {
  console.log(`Parameter at index ${parameterIndex} in method ${propertyKey} is being decorated`);
}

class Vehicle {
  drive(@logParameter speed: number) {
    console.log(`Driving at speed ${speed}`);
  }
}

const vehicle = new Vehicle();
vehicle.drive(50);
// Output: Parameter at index 0 in method drive is being decorated

Conclusie

Decorators in TypeScript bieden krachtige metaprogrammeermogelijkheden die de functionaliteit van klassen, methoden en eigenschappen kunnen verbeteren en uitbreiden. Door aangepaste decorators te gebruiken, is het mogelijk om herbruikbare, efficiënte en georganiseerde codestructuren te creëren. Deze gids demonstreerde de creatie van verschillende typen decorators: klasse, methode, eigenschap en parameter.