Sådan opretter du brugerdefinerede TypeScript-dekoratører

Dekoratorer er en funktion i TypeScript, der giver mulighed for at ændre klasser, metoder, egenskaber eller parametre under kørsel. De er specielle funktioner, der giver meta-programmeringsmuligheder. I TypeScript bruges dekoratører ofte i rammer som Angular for at forbedre funktionaliteten. Denne artikel forklarer, hvordan du laver brugerdefinerede dekoratører trin for trin.

Typer af dekoratører i TypeScript

Der er fire hovedtyper af dekoratører i TypeScript:

• Klasse dekoratører
• Metode dekoratører
• Tilbehør dekoratører
• Ejendomsdekoratører

Aktivering af dekoratører i TypeScript

For at bruge dekoratører i et TypeScript-projekt skal indstillingen experimentalDecorators være aktiveret i filen tsconfig.json.

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

Oprettelse af en klassedekoratør

Klassedekoratorer anvendes på konstruktøren af ​​en klasse. De er nyttige til at tilføje metadata eller funktionalitet til klassen. Her er et eksempel på, hvordan man opretter 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

Oprettelse af en metodedekoratør

Metodedekoratorer anvendes til klassemetoder. De kan bruges til at ændre eller observere metodens adfærd. Nedenfor er et eksempel på en metodedekorator, der logger metodeudfø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]

Oprettelse af en ejendomsdekoratør

Ejendomsdekoratører kan bruges til at observere eller ændre egenskaber. Her er et eksempel, hvor en ejendomsdesigner sikrer, at en ejendom har en standardværdi.

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

Oprettelse af en parameterdekorator

Parameterdekoratorer anvendes på en metodes parametre. De kan være nyttige til opgaver som validering eller logningsargumenter. 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

Konklusion

Dekoratorer i TypeScript tilbyder kraftfulde metaprogrammeringsfunktioner, der kan forbedre og udvide funktionaliteten af ​​klasser, metoder og egenskaber. Ved at bruge brugerdefinerede dekoratører er det muligt at skabe genanvendelige, effektive og organiserede kodestrukturer. Denne guide demonstrerede skabelsen af ​​forskellige typer dekoratører: klasse, metode, egenskab og parameter.