Предупреждение "Experimental decorators" при компиляции TypeScript

Почему возникает предупреждение и как его исправить

Это предупреждение — не ошибка, а напоминание от TypeScript о том, что декораторы всё ещё являются экспериментальной функцией. Они не входят в стабильный стандарт ECMAScript и могут измениться в будущих версиях. Ваш код будет работать в production, но вы рискуете, что после обновления TypeScript синтаксис декораторов может поменяться.

Основное решение: настройка tsconfig.json

Чтобы убрать предупреждение, нужно добавить опцию experimentalDecorators в файл tsconfig.json:

{
  "compilerOptions": {
    "target": "ES2021",
    "module": "commonjs",
    "strict": true,
    "experimentalDecorators": true,  // Включаем поддержку декораторов
    "emitDecoratorMetadata": true    // Опционально: для рефлексии метаданных
  },
  "include": ["src/**/*"]
}

После этого перезапустите компилятор (или перезагрузите VS Code) — предупреждение исчезнет.

Что делает experimentalDecorators

• Разрешает использование декораторов классов, методов, свойств, параметров
• Включает транспиляцию декораторов в JavaScript согласно старой proposal-спецификации
• Без этой опции TypeScript выдаёт ошибку при встрече декораторов

Современная альтернатива: декораторы TC39 Stage 3 (TypeScript 5.0+)

Начиная с TypeScript 5.0, появилась поддержка стандартных декораторов (proposal TC39 Stage 3). Они не требуют experimentalDecorators, но имеют другой синтаксис. Вот как переписать ваш пример:

// Стандартный декоратор (без experimentalDecorators)
function log(target: any, context: ClassMethodDecoratorContext) {
  const methodName = String(context.name);
  return function(this: any, ...args: any[]) {
    console.log(`Вызов ${methodName} с аргументами:`, args);
    return target.call(this, ...args);
  };
}

class Calculator {
  @log
  add(a: number, b: number): number {
    return a + b;
  }
}

Обратите внимание: в стандартных декораторах:

• Второй параметр — context (объект с информацией о декорируемом элементе)
• Возвращаемое значение — функция-замена (а не PropertyDescriptor)
• Не нужен experimentalDecorators: true в tsconfig

Что выбрать?

• Если проект уже использует экспериментальные декораторы (Angular, NestJS, TypeORM) — просто включите experimentalDecorators: true
• Если пишете новый проект — используйте стандартные декораторы TypeScript 5.0+, они более перспективны
• Если вы новичок — начните с experimentalDecorators: true, это проще и понятнее

Ваш код не упадёт в production, но следите за обновлениями TypeScript — в будущем экспериментальные декораторы могут быть удалены.

{
  "plugins": [
    ["@babel/plugin-proposal-decorators", { "legacy": true }]
  ]
}