Предупреждение об экспериментальных декораторах в TypeScript

Причина предупреждения и решение

Вы столкнулись с типичной ситуацией. Предупреждение возникает, потому что декораторы в TypeScript всё ещё считаются экспериментальной функцией. Хотя они широко используются в фреймворках (Angular, NestJS, TypeORM), стандарт ECMAScript до сих пор не утвердил их окончательную спецификацию. TypeScript реализовал их раньше стандарта, но с пометкой "экспериментально".

Чтобы убрать предупреждение, нужно правильно настроить tsconfig.json. Вот минимальная рабочая конфигурация:

{
  "compilerOptions": {
    "target": "ES6",
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true, // опционально, для получения метаданных
    "module": "commonjs",
    "outDir": "./dist",
    "rootDir": "./src",
    "strict": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist"]
}

Проверка корректности

Убедитесь, что:

• Файл tsconfig.json находится в корневой папке проекта (где лежит package.json).
• В VSCode используется верный TypeScript — не встроенный, а из node_modules (см. настройку typescript.tsdk).
• После добавления опции перезапустите компиляцию: npx tsc --watch или через Ctrl+Shift+B.

Почему декораторы экспериментальные?

Декораторы — это предложение для JavaScript (stage 2 на момент написания). TypeScript добавил их раньше, но синтаксис может измениться. Пример различий:

• Текущий TypeScript-синтаксис (экспериментальный): @log над методом.
• Будущий стандарт может использовать другой подход (например, декораторы как функции высшего порядка).

Поэтому Microsoft честно предупреждает: "используйте на свой страх и риск, API может поменяться". Однако для современных проектов это безопасно — Angular и NestJS полностью на них завязаны, и они вряд ли сломают обратную совместимость.

Полный пример рабочего кода

После настройки tsconfig ваш код будет компилироваться без предупреждений. Вот улучшенная версия декоратора с поддержкой асинхронных методов:

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

    descriptor.value = function (...args: any[]) {
        console.log(`[LOG] Вызван ${propertyKey} с аргументами:`, args);
        const start = Date.now();
        const result = originalMethod.apply(this, args);
        const duration = Date.now() - start;
        console.log(`[LOG] ${propertyKey} завершён за ${duration}мс, результат:`, result);
        return result;
    };

    return descriptor;
}

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

    @log
    multiply(a: number, b: number): number {
        return a * b;
    }
}

const calc = new Calculator();
console.log(calc.add(2, 3)); // Логи: вызов, завершение, результат 5
console.log(calc.multiply(4, 5)); // Логи: вызов, завершение, результат 20

Альтернатива без декораторов

Если вы не хотите использовать экспериментальную функциональность, можно обойтись функциями-обёртками:

function withLogging(method: Function) {
    return function (...args: any[]) {
        console.log(`Вызван метод с аргументами:`, args);
        return method(...args);
    };
}

class Calculator {
    add = withLogging(function(a: number, b: number) {
        return a + b;
    });
}

const calc = new Calculator();
calc.add(2, 3); // Работает без предупреждений

Но этот подход менее удобен для множества методов.

Рекомендация

Используйте декораторы смело — они стабильны в TypeScript уже много лет. Просто добавьте "experimentalDecorators": true в tsconfig.json, и всё будет работать. Если проект строго требует "чистого" ES-стандарта, подождите окончательной спецификации (ожидается в ES2024+).

{
  "compilerOptions": {
    "experimentalDecorators": true,
    "target": "ES6"
  },
  "include": ["src/**/*"]
}

"scripts": {
  "start": "ts-node --experimentalDecorators src/index.ts"
}

// Вместо @log используем функцию-декоратор
function withLogging(fn: T): T {
    return ((...args: any[]) => {
        console.log(`Вызов функции: ${fn.name}`);
        return fn(...args);
    }) as T;
}

const add = withLogging((a: number, b: number) => a + b);