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

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

Как работают Декораторы?

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

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

Вот пример простого декоратора, который добавляет информацию о том, что метод был вызван:

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

    descriptor.value = function(...args: any[]) {
        console.log(`Метод ${key} вызван с аргументами: ${JSON.stringify(args)}`);
        return originalMethod.apply(this, args);
    };
}

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

const calc = new Calculator();
calc.add(5, 10);

Пояснение примера

1. Мы создаем декоратор LogMethod, который принимает три параметра:
   • target: объект, к которому мы применяем декоратор.
   • key: имя метода (или свойства), к которому применяется декоратор.
   • descriptor: объект описания, который содержит информацию о методе (или свойстве).
2. Внутри декоратора мы сохраняем оригинальный метод в переменной originalMethod и затем перезаписываем значение descriptor.value, чтобы добавить новую функциональность.
3. В примере класса Calculator мы используем декоратор @LogMethod для метода add. Теперь, каждый раз, когда мы вызываем add, будет выводиться в консоль информация о вызове с аргументами.

Разные виды декораторов

1. Декораторы классов: применяются к классам и могут выполнять дополнительные операции при создании экземпляра класса.
2. Декораторы методов: применяются к методам класса, как в нашем примере.
3. Декораторы свойств: применяются к свойствам класса и могут менять их поведение.
4. Декораторы параметров: позволяют аннотировать параметры методов с помощью метаданных.

Пример декоратора класса

function Component(target: Function) {
    target.prototype.isComponent = true;
}

@Component
class MyComponent {
    // Обычный класс
}

const instance = new MyComponent();
console.log((instance as any).isComponent); // true

Заключение

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