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

Декоратор отвечает на вопрос, что сделать с объявлением, когда класс или его элемент определяется. В коде он выглядит как @something перед классом, методом, полем или аксессором.

На интервью важно объяснить не только синтаксис, но и смысл. Декоратор держит сквозную или декларативную логику рядом с объявлением. Например, фреймворк читает настройки компонента, библиотека состояния помечает поле как observable, а ваш код оборачивает метод логированием.

Хорошая короткая формулировка:

Декоратор это функция, примененная к объявлению через синтаксис @. Она может добавить метаданные или изменить поведение элемента. При этом она не делает TypeScript-тип магически умнее и не работает одинаково во всех режимах TypeScript.

В TypeScript не стоит говорить о декораторах как об одной неизменной механике. В проектах встречаются две модели.

Legacy-декораторы появились в TypeScript давно и включались через experimentalDecorators. У них знакомые сигнатуры вида target, propertyKey, descriptor. Еще у них есть параметрные декораторы. Такой код часто встречается в старых проектах и во фреймворках, которые исторически строились вокруг этой модели.

Современные decorators ближе к ECMAScript-предложению. У них другая сигнатура. Декоратор получает значение и context, может вернуть замену или добавить инициализацию. Параметрных декораторов в этой стандартной модели нет.

Практический вывод простой. Если вы приводите пример, назовите модель. Так вы не смешаете несовместимые сигнатуры.

Этот пример показывает современный декоратор метода. Он не просто помечает метод. Он возвращает обертку, которая вызывается вместо исходного метода.

function logged<This, Args extends unknown[], Return>(
  originalMethod: (this: This, ...args: Args) => Return,
  context: ClassMethodDecoratorContext<This, (this: This, ...args: Args) => Return>
) {
  const methodName = String(context.name);

  return function (this: This, ...args: Args): Return {
    console.log(`${methodName} called`, { argsCount: args.length });
    return originalMethod.apply(this, args);
  };
}

class ApiClient {
  @logged
  async loadUser(id: string, signal?: AbortSignal) {
    const response = await fetch(`/api/users/${encodeURIComponent(id)}`, { signal });

    if (!response.ok) {
      throw new Error(`Failed to load user: ${response.status}`);
    }

    return response.json() as Promise<unknown>;
  }
}

В ответе проговорите детали. Обертка сохраняет this, передает аргументы и возвращает результат. Если забыть return, вызывающий код получит undefined вместо Promise. UI может навсегда остаться в loading, потому что обработчик ждет результат запроса. Если потерять this, метод может упасть при обращении к полям экземпляра.

Пример с fetch безопаснее держать внутри исходного метода, а не внутри самого декоратора. Метод принимает AbortSignal, проверяет response.ok и кодирует id для URL. Так вызывающий React-компонент может отменить устаревший запрос в cleanup и не перезаписать экран данными от старого ответа.

Еще один практический риск. Не логируйте токены, пароли и персональные данные в таком декораторе. Он может начать писать в консоль или аналитику аргументы всех методов подряд. Поэтому в примере логируется только количество аргументов, а не их значения.

Самый понятный пример для frontend-разработчика это фреймворки и библиотеки, где декоратор является частью публичного API.

В Angular @Component связывает класс с настройками компонента. Это селектор, шаблон, стили и зависимости. В библиотеках состояния декораторы могут помечать observable-поля или computed-значения. В web component библиотеках они могут связывать свойства класса с атрибутами или реактивным обновлением.

Не говорите так, будто декораторы нужны везде. В React-коде чаще используют хуки, функции, компоненты-обертки и явную композицию. Декоратор оправдан, если он уже является частью архитектуры, упрощает повторяющийся контракт и не прячет важную бизнес-логику.

Если нужен ответ на 30 секунд, можно сказать:

Декоратор в TypeScript это функция, которую применяют к объявлению через @. Она может добавить метаданные, зарегистрировать класс во фреймворке или вернуть обертку для метода или поля. Например, @Component в Angular описывает класс компонента для фреймворка. При этом важно различать modern decorators и legacy experimental decorators, потому что у них разные сигнатуры и поддержка параметров.

Если вас просят привести пример, выбирайте простой метод-декоратор или фреймворковый пример. Не уходите в сложную метапрограмму, если не можете уверенно объяснить порядок выполнения и типовые ограничения.