Как создать пользовательский декоратор в TypeScript?

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

Типы декораторов

Существует несколько типов декораторов:

1. Классовые декораторы — применяются к классам.
2. Методные декораторы — применяются к методам классов.
3. Свойствные декораторы — применяются к свойствам классов.
4. Параметрические декораторы — применяются к параметрам методов.

Пример: Создание пользовательского декоратора

Рассмотрим, как создать простой методный декоратор, который будет логировать вызовы метода.

Шаг 1: Включите поддержку декораторов

Убедитесь, что в вашем проекте включены декораторы. Для этого в tsconfig.json установите следующие параметры:

{
  "compilerOptions": {
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true
  }
}

Шаг 2: Создание декоратора

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

function LogMethod(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
    const originalMethod = descriptor.value; // Сохраняем оригинальный метод

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

    return descriptor; // Возвращаем измененный дескриптор
}

class MyClass {
    @LogMethod
    sayHello(name: string): string {
        return `Привет, ${name}!`;
    }
}

const myClassInstance = new MyClass();
console.log(myClassInstance.sayHello('Мир')); // Вызов метода: sayHello, аргументы: ["Мир"]

Объяснение кода

1. Функция LogMethod — это наш пользовательский декоратор. Он принимает три параметра:
   • target — это класс, к которому применяется декоратор.
   • propertyKey — это имя метода, который мы декорируем.
   • descriptor — это объект дескриптора, который содержит информацию о методе и позволяет изменять его.
2. Мы сохраняем оригинальный метод в переменную originalMethod, а затем оборачиваем его в новую функцию, которая сначала логирует данные, а затем вызывает оригинальный метод с переданными аргументами.
3. Декоратор применяется к методу sayHello с помощью символа @, что позволяет отследить все его вызовы.

Заключение

Таким образом, используя декораторы в TypeScript, вы можете эффективно добавлять функциональность и организовывать код. Это особенно полезно для создания промежуточных слоев и управления кэшированием, логированием или валидацией данных. Не забудьте использовать декораторы с умом, чтобы не усложнять код без необходимости.