Як використовувати декоратори в TypeScript

Декоратори в TypeScript є потужною функцією, яка дозволяє розробникам додавати додаткові функції до класів, методів, властивостей і параметрів. Вони забезпечують спосіб модифікації поведінки існуючого коду без зміни його фактичної структури. Цей посібник пояснює, як використовувати декоратори в TypeScript на простих прикладах.

Що таке декоратори?

Декоратори — це спеціальні функції, які можна застосовувати до класів, методів, властивостей або параметрів. Вони викликаються під час виконання та дозволяють розробникам коментувати та змінювати код декларативним способом. Щоб увімкнути декоратори в проекті TypeScript, для прапорця experimentalDecorators потрібно встановити значення true у файлі tsconfig.json.

Увімкнення декораторів у TypeScript

Щоб використовувати декоратори, компілятор TypeScript має бути налаштований на їх розпізнавання. Це можна зробити, встановивши прапор experimentalDecorators на true у файлі tsconfig.json.

{
  "compilerOptions": {
    "target": "ES6",
    "experimentalDecorators": true
  }
}

Після ввімкнення декораторів їх можна використовувати протягом усього проекту.

Створення декоратора класу

Декоратор класу застосовується до оголошення класу і може бути використаний для зміни або заміни визначення класу. Декоратори класів оголошуються безпосередньо над класом, який вони декорують, за допомогою символу @.

function LogClass(target: Function) {
  console.log(`Class ${target.name} is created.`);
}

@LogClass
class Person {
  constructor(public name: string) {}
}

const person = new Person('Alice');

У цьому прикладі декоратор LogClass реєструє повідомлення, коли створюється клас Person. Декоратор визначається як функція, яка приймає один аргумент: конструктор класу, який декорується.

Декоратори методів

Декоратори методів застосовуються до методів у класі. Вони дозволяють розробникам перехоплювати виклики методів, змінювати їх поведінку або виконувати додаткові операції до або після виконання методу.

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

  descriptor.value = function (...args: any[]) {
    console.log(`Method ${propertyKey} is called with arguments: ${args}`);
    return originalMethod.apply(this, args);
  };

  return descriptor;
}

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

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

Тут декоратор LogMethod реєструє назву методу та його аргументи щоразу, коли викликається метод add. Він загортає оригінальний метод у нову функцію, яка виконує журнал перед делегуванням оригінальному методу.

Декоратори нерухомості

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

function ReadOnly(target: Object, propertyKey: string) {
  Object.defineProperty(target, propertyKey, {
    writable: false
  });
}

class Book {
  @ReadOnly
  title: string = 'TypeScript Guide';
}

const myBook = new Book();
myBook.title = 'New Title'; // This will cause an error in strict mode

У цьому прикладі декоратор ReadOnly застосовано до властивості title класу Book, роблячи його доступним лише для читання шляхом встановлення writable до false.

Декоратори параметрів

Декоратори параметрів використовуються для анотації або зміни параметрів методу. Вони отримують три аргументи: цільовий об’єкт, ім’я методу та індекс параметра.

function LogParameter(target: Object, propertyKey: string, parameterIndex: number) {
  console.log(`Parameter in position ${parameterIndex} at ${propertyKey} method is decorated.`);
}

class UserService {
  greet(@LogParameter message: string): void {
    console.log(message);
  }
}

const userService = new UserService();
userService.greet('Hello, TypeScript!');

У цьому прикладі декоратор LogParameter застосовано до параметра message методу greet у класі UserService. Декоратор записує інформацію про параметр, який декорується.

Висновок

Декоратори в TypeScript пропонують потужний спосіб покращити функціональність коду, не змінюючи його структуру. Використовуючи декоратори класів, методів, властивостей і параметрів, розробники можуть легко додавати багаторазові функції у свої проекти. Завдяки прикладам, наведеним у цьому посібнику, легко почати використовувати декоратори у TypeScript.