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

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

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

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

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

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

Шаг 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, аргументы: ["Мир"]

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

Заключение

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