Hack Frontend Community

Что такое декораторы в TypeScript?

Декораторы — это специальные функции, которые можно применять к классам, методам, свойствам или параметрам, чтобы добавить или изменить поведение во время выполнения или компиляции.

Декораторы — это своего рода "аннотации" или "модификаторы", работающие на уровне метаданных.

Для работы с декораторами нужно включить флаги:

{
  "experimentalDecorators": true,
  "emitDecoratorMetadata": true
}

Где можно использовать декораторы?

  • Классы
  • Методы
  • Свойства
  • Параметры
  • Аксессоры (get/set)

Пример: Классовый декоратор

function Logger(constructor: Function) {
  console.log(`Класс создан: ${constructor.name}`);
}

@Logger
class User {
  constructor(public name: string) {}
}

Декоратор Logger будет вызван при определении класса User, выводя имя конструктора.

Пример: Декоратор метода

function LogMethod(
  target: any,
  propertyKey: string,
  descriptor: PropertyDescriptor
) {
  const original = descriptor.value;

  descriptor.value = function (...args: any[]) {
    console.log(`Метод ${propertyKey} вызван с`, args);
    return original.apply(this, args);
  };
}

class MathService {
  @LogMethod
  sum(a: number, b: number) {
    return a + b;
  }
}

Этот декоратор логирует вызов метода и его аргументы.

Пример: Декоратор свойства

function Readonly(target: any, propertyKey: string) {
  Object.defineProperty(target, propertyKey, {
    writable: false,
  });
}

class Config {
  @Readonly
  version = "1.0";
}

Свойство version теперь невозможно изменить.

Пример: Декоратор параметра

function LogParam(target: Object, propertyKey: string | symbol, parameterIndex: number) {
  console.log(`Параметр метода ${String(propertyKey)} на позиции ${parameterIndex}`);
}

class Example {
  test(@LogParam msg: string) {
    console.log(msg);
  }
}

Используется редко, но может быть полезен для валидации или логирования.