Декораторы в JavaScript: Состояние на 2025 год
Декораторы в JavaScript — это мощный синтаксический инструмент, позволяющий модифицировать классы и их элементы (методы, поля, аксессоры) на уровне объявления. Они уже давно используются в таких языках, как TypeScript и Python, а с 2024 года начали входить в стандарт ECMAScript как часть Stage 3 спецификации TC39. В 2025 году они становятся все более популярными в JavaScript-сообществах, особенно в рамках разработки библиотек, фреймворков и метапрограммирования.
Что такое декораторы?
Декоратор — это специальная функция, которая применяется к классу или его члену, позволяя изменить его поведение или добавить метаданные. Синтаксис декоратора использует символ @ перед именем функции:
@myDecorator
class MyClass {}
Важное отличие декораторов в JavaScript по сравнению с TypeScript или Python заключается в том, что они строго определены спецификацией ECMAScript и работают по иным принципам, особенно при применении к полям и методам.
Области применения
Декораторы можно применять к:
Нельзя использовать декораторы для обычных функций или переменных вне класса.
Синтаксис и структура
Рассмотрим простой пример декоратора метода:
function log(target, context) {
const originalMethod = target;
return function(...args) {
console.log(`Вызов ${context.name} с аргументами:`, args);
return originalMethod.apply(this, args);
};
}
class Example {
@log
greet(name) {
return `Привет, ${name}`;
}
}
В этом примере @log оборачивает метод greet, добавляя логирование до его выполнения.
Новый API: Метаданные и контекст
Современные декораторы используют контекст, который предоставляет информацию о декорируемом элементе:
function decorator(value, context) {
console.log(context.kind); // "method", "field", "accessor", "class"
console.log(context.name); // имя члена класса
console.log(context.private); // true или false
}
Это позволяет создавать более универсальные и безопасные декораторы.
Автоаксессоры
Новая концепция — автоаксессоры (auto-accessors) — это синтаксическая абстракция, позволяющая использовать декораторы для контроля доступа к полям:
function logAccess({ get, set }, context) {
return {
get() {
console.log(`Чтение ${context.name}`);
return get.call(this);
},
set(value) {
console.log(`Запись ${context.name} = ${value}`);
set.call(this, value);
}
};
}
class User {
@logAccess accessor name = 'Гость';
}
Автоаксессоры позволяют применять декораторы к полям с геттером/сеттером без явного их определения.
Ограничения
Текущая поддержка
По состоянию на 2025 год:
Использование с TypeScript
TypeScript до версии 5.x использовал старую (экспериментальную) модель декораторов. С выходом TypeScript 5.2+ реализована новая система, совместимая с ECMAScript-декораторами. Для использования новой системы необходимо включить флаг experimentalDecorators и useDefineForClassFields.
{
"experimentalDecorators": true,
"useDefineForClassFields": true
}
Практические применения
Заключение
Декораторы становятся официальной и мощной частью JavaScript-экосистемы. Они позволяют создавать декларативный, лаконичный и масштабируемый код, особенно в рамках архитектур с метапрограммированием. Несмотря на некоторые ограничения, они открывают новые горизонты для построения библиотек и фреймворков, а также улучшают читаемость и повторное использование кода.
