Как создавать пользовательские декораторы 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 предлагают мощные возможности метапрограммирования, которые могут улучшить и расширить функциональность классов, методов и свойств. Используя пользовательские декораторы, можно создавать повторно используемые, эффективные и организованные структуры кода. В этом руководстве продемонстрировано создание различных типов декораторов: класса, метода, свойства и параметра.