Jak tworzyć niestandardowe dekoratory TypeScript

Dekoratory to funkcja w TypeScript, która umożliwia modyfikowanie klas, metod, właściwości lub parametrów w czasie wykonywania. Są to specjalne funkcje, które zapewniają możliwości metaprogramowania. W TypeScript dekoratory są często używane w frameworkach, takich jak Angular, w celu zwiększenia funkcjonalności. W tym artykule wyjaśniono krok po kroku, jak tworzyć niestandardowe dekoratory.

Typy dekoratorów w TypeScript

W TypeScript istnieją cztery główne typy dekoratorów:

• Dekoratorzy klas
• Dekoratory metod
• Dekoratory akcesoriów
• Dekoratorzy nieruchomości

Włączanie dekoratorów w TypeScript

Aby używać dekoratorów w projekcie TypeScript, opcja experimentalDecorators musi być włączona w pliku tsconfig.json.

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

Tworzenie dekoratora klasy

Dekoratory klasy są stosowane do konstruktora klasy. Są przydatne do dodawania metadanych lub funkcjonalności do klasy. Oto przykład, jak utworzyć prosty dekorator klasy.

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

Tworzenie dekoratora metody

Dekoratory metod są stosowane do metod klasowych. Mogą być używane do modyfikowania lub obserwowania zachowania metody. Poniżej znajduje się przykład dekoratora metod, który rejestruje wykonywanie metody.

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]

Tworzenie dekoratora nieruchomości

Dekoratory właściwości mogą być używane do obserwowania lub modyfikowania właściwości. Oto przykład, w którym dekorator właściwości zapewnia, że ​​właściwość ma wartość domyślną.

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

Tworzenie dekoratora parametrów

Dekoratory parametrów są stosowane do parametrów metody. Mogą być przydatne do zadań takich jak walidacja lub rejestrowanie argumentów. Oto przykład dekoratora parametrów.

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

Wniosek

Dekoratory w TypeScript oferują potężne możliwości metaprogramowania, które mogą ulepszyć i rozszerzyć funkcjonalność klas, metod i właściwości. Używając niestandardowych dekoratorów, możliwe jest tworzenie wielokrotnego użytku, wydajnych i uporządkowanych struktur kodu. Ten przewodnik pokazał tworzenie różnych typów dekoratorów: klasy, metody, właściwości i parametru.