Hvordan lage tilpassede TypeScript-dekoratorer

Dekoratorer er en funksjon i TypeScript som gjør det mulig å endre klasser, metoder, egenskaper eller parametere under kjøring. De er spesielle funksjoner som gir metaprogrammeringsmuligheter. I TypeScript brukes dekoratører ofte i rammeverk som Angular for å forbedre funksjonaliteten. Denne artikkelen forklarer hvordan du lager skreddersydde dekoratører trinn for trinn.

Typer dekoratører i TypeScript

Det er fire hovedtyper dekoratører i TypeScript:

• Klasse dekoratører
• Metode Dekoratører
• Tilbehør dekoratører
• Eiendomsdekoratører

Aktivering av dekoratører i TypeScript

For å bruke dekoratører i et TypeScript-prosjekt, må experimentalDecorators-alternativet være aktivert i tsconfig.json-filen.

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

Opprette en klassedekoratør

Klassedekoratorer brukes på konstruktøren av en klasse. De er nyttige for å legge til metadata eller funksjonalitet til klassen. Her er et eksempel på hvordan du lager en enkel klassedekoratør.

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

Opprette en metodedekoratør

Metodedekoratorer brukes på klassemetoder. De kan brukes til å modifisere eller observere oppførselen til metoden. Nedenfor er et eksempel på en metodedekorator som logger metodeutførelsen.

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]

Opprette en eiendomsdekoratør

Eiendomsdekoratører kan brukes til å observere eller endre egenskaper. Her er et eksempel der en eiendomsdekoratør sørger for at en eiendom har en standardverdi.

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

Opprette en parameterdekorator

Parameterdekoratorer brukes på en metodes parametere. De kan være nyttige for oppgaver som validering eller logging av argumenter. Her er et eksempel på en parameterdekorator.

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

Konklusjon

Dekoratorer i TypeScript tilbyr kraftige metaprogrammeringsfunksjoner som kan forbedre og utvide funksjonaliteten til klasser, metoder og egenskaper. Ved å bruke tilpassede dekoratører er det mulig å lage gjenbrukbare, effektive og organiserte kodestrukturer. Denne guiden demonstrerte opprettelsen av forskjellige typer dekoratører: klasse, metode, eiendom og parameter.