print("Hello, World🌟!")

print("Hello, World🌟!")

🌍 Привет, мир!
Сегодня поговорим о декораторах. Почему о них? Всё просто: они встречаются повсюду, и их стоит понимать!

🤔 Что такое декоратор?
Декоратор — это шаблон проектирования, который позволяет добавлять новое поведение к функции, не изменяя её базовую реализацию. Прежде чем подробно рассказать об этом, стоит отметить, что в настоящее время декораторы в JavaScript — это синтаксический сахар. В комитете, ответственном за развитие ECMAScript, decorator-proposal находится на финальной стадии рассмотрения (Stage 3). Однако нельзя назвать эту концепцию новой для JavaScript, так как существуют функции высшего порядка, которые по сути являются формой декораторов, и всё это возможно благодаря функциям первого класса.

🔥 Мотивация
Декораторы отлично подходят для написания более чистого и масштабируемого кода. Они используются во многих библиотеках, таких как Angular, Vue, MobX, NestJS, TypeORM, InversifyJS и других. Поэтому понимание их принципов очень важно. Декораторы позволяют определять многоразовые функциональности, которые могут быть легко применены к различным классам или методам.

🚀 С чего начать?
Для использования декораторов необходимо писать код на TypeScript, и добавить соответствующую опцию в файл конфигурации:

{
  "compilerOptions": {
    "experimentalDecorators": true
  }
}

Или, при использовании Babel, необходимо установить дополнительный пакет и также добавить в файл конфигурации:

{
  "plugins": [
    ["@babel/plugin-proposal-decorators", { "version": "2023-11" }]
  ]
}

🌟 Применение декораторов

Применение к функциям (Higher-order functions):

const logger = (message) => console.log(message);

function loggerDecorator(logger) {
  return function (message) {
    logger.call(this, message);
    console.log("message logged at:", new Date().toLocaleString());
  }
}

loggerDecorator(logger)("ilya");

На выходе получаем:
ilya message logged at: 10/26/2024, 9:37:54 PM

Применение к различным элементам класса с префиксом @:

- Декораторы классов: применяются ко всему классу.
- Декораторы методов: применяются к методу.
- Декораторы аксессоров: применяются к геттерам и сеттерам.
- Декораторы свойств: применяются к свойству класса.
- Декораторы параметров: применяются к параметру метода.

Наиболее часто декоратор используется с методами класса, пример:

function log(target, key, descriptor) {
  const originalMethod = descriptor.value;
  descriptor.value = function (...args) {
    console.log(`Произошел вызов метода ${key} с аргументами`, args);
    const result = originalMethod.apply(this, args);
    console.log(`Результат сложения:`, result);
    return result;
  };
  return descriptor;
}

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

const calculator = new Calculator();
calculator.add(2, 3);

На выходе получаем:
Произошел вызов метода add с аргументами [2, 3]
Результат сложения: 5

В этом примере декоратор log оборачивает оригинальный метод add, записывая в консоль имя метода и аргументы перед вызовом метода, а затем записывая в консоль результат после вызова.

⚙️ Декоратор принимает три параметра:

- target: это прототип класса (в примере выше Calculator.prototype).
- key: имя метода (в примере выше add).
- descriptor: дескриптор свойства для метода, предоставляет контроль над тем, как метод определен. Включает такие свойства, как value (сам метод), writable (разрешение на изменение), enumerable (перечисляемость) и configurable (конфигурируемость).

⚠️ Важно: Декоратор класса принимает только один аргумент — это конструктор класса.

🎯 Общие случаи использования:

- Логирование.
- Валидация: проверка параметров методов или свойств классов.
- Авторизация: проверка прав пользователя перед выполнением метода.
- Кэширование: реализация механизмов кэширования для ресурсоемких операций.
- Обработка ошибок: автоматический перехват и обработка ошибок в методах.

💬 Делитесь мнениями в комментариях 👇! Если вам понравилась статья, не забудьте поставить лайк! 👍

#PATTERNS #TYPESCRIPT