Як створити власні декоратори TypeScript

Декоратори — це функція TypeScript, яка дозволяє змінювати класи, методи, властивості або параметри під час виконання. Це спеціальні функції, які надають можливості метапрограмування. У TypeScript декоратори часто використовуються у таких фреймворках, як Angular, для покращення функціональності. У цій статті крок за кроком пояснюється, як створити власні декоратори.

Типи декораторів у TypeScript

У TypeScript є чотири основні типи декораторів:

• Декоратори класу
• Декоратори методів
• Декоратори аксесуарів
• Декоратори нерухомості

Увімкнення декораторів у TypeScript

Щоб використовувати декоратори в проекті TypeScript, параметр experimentalDecorators має бути ввімкнено у файлі tsconfig.json.

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

Створення декоратора класу

Декоратори класу застосовуються до конструктора класу. Вони корисні для додавання метаданих або функцій до класу. Ось приклад того, як створити простий декоратор класу.

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

Створення декоратора методів

Декоратори методів застосовуються до методів класу. Їх можна використовувати для модифікації або спостереження за поведінкою методу. Нижче наведено приклад декоратора методу, який реєструє виконання методу.

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]

Створення декоратора властивостей

Декоратори властивостей можна використовувати для спостереження або зміни властивостей. Ось приклад, коли декоратор властивості гарантує, що властивість має значення за замовчуванням.

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

Створення декоратора параметрів

Декоратори параметрів застосовуються до параметрів методу. Вони можуть бути корисними для таких завдань, як перевірка або журналювання аргументів. Ось приклад декоратора параметрів.

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

Висновок

Декоратори в TypeScript пропонують потужні можливості метапрограмування, які можуть покращити та розширити функціональність класів, методів і властивостей. Використовуючи спеціальні декоратори, можна створювати багаторазові, ефективні та організовані структури коду. Цей посібник продемонстрував створення різних типів декораторів: класу, методу, властивості та параметра.