Hur man skapar anpassade TypeScript-dekoratörer

Dekoratorer är en funktion i TypeScript som gör det möjligt att ändra klasser, metoder, egenskaper eller parametrar under körning. De är specialfunktioner som ger metaprogrammeringsmöjligheter. I TypeScript används dekoratörer ofta i ramverk som Angular för att förbättra funktionaliteten. Den här artikeln förklarar hur du skapar anpassade dekoratörer steg för steg.

Typer av dekoratörer i TypeScript

Det finns fyra huvudtyper av dekoratörer i TypeScript:

• Klass dekoratörer
• Metoddekoratörer
• Tillbehör dekoratörer
• Fastighetsinredare

Aktivera dekoratörer i TypeScript

För att använda dekoratörer i ett TypeScript-projekt måste alternativet experimentalDecorators vara aktiverat i filen tsconfig.json.

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

Skapa en klassdekoratör

Klassdekoratörer tillämpas på konstruktören av en klass. De är användbara för att lägga till metadata eller funktionalitet till klassen. Här är ett exempel på hur man skapar en enkel klassdekoratö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

Skapa en metoddekoratör

Metoddekoratörer tillämpas på klassmetoder. De kan användas för att modifiera eller observera metodens beteende. Nedan är ett exempel på en metoddekoratör som loggar metodutförandet.

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]

Skapa en fastighetsdekoratör

Fastighetsdekoratörer kan användas för att observera eller ändra egenskaper. Här är ett exempel där en fastighetsinredare säkerställer att en fastighet har ett standardvärde.

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

Skapa en parameterdekoratör

Parameterdekoratorer tillämpas på en metods parametrar. De kan vara användbara för uppgifter som validering eller loggning av argument. Här är ett exempel på en parameterdekoratör.

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

Slutsats

Dekoratörer i TypeScript erbjuder kraftfulla metaprogrammeringsfunktioner som kan förbättra och utöka funktionaliteten hos klasser, metoder och egenskaper. Genom att använda anpassade dekoratörer är det möjligt att skapa återanvändbara, effektiva och organiserade kodstrukturer. Den här guiden demonstrerade skapandet av olika typer av dekoratörer: klass, metod, egenskap och parameter.