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

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

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

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

Види декораторів

• Декоратори класів: Застосовуються до всього класу.
• Декоратори методів: Застосовуються до методів у класі.
• Декоратори властивостей: Застосовується до властивості в класі.
• Декоратори параметрів: Застосовуються до параметрів методу в класі.

Як увімкнути декоратори в TypeScript

Перш ніж використовувати декоратори, увімкніть їх у файлі tsconfig.json, встановивши для "experimentalDecorators" значення true.

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

Декоратори класу

Декоратор класу застосовується до всього класу. Це корисно для додавання метаданих або зміни поведінки класу.

function Controller(route: string) {
  return function (target: Function) {
    target.prototype.route = route;
  };
}

@Controller('/api/user')
class UserController {
  // Class logic
}

console.log(new UserController().route); // Outputs: '/api/user'

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

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

function Log(target: any, propertyName: string, descriptor: PropertyDescriptor) {
  const originalMethod = descriptor.value;
  
  descriptor.value = function (...args: any[]) {
    console.log(`Calling ${propertyName} with arguments: ${args}`);
    return originalMethod.apply(this, args);
  };
}

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

const calculator = new Calculator();
calculator.add(2, 3); // Logs: 'Calling add with arguments: 2,3'

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

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

function ReadOnly(target: any, key: string) {
  const descriptor: PropertyDescriptor = {
    writable: false
  };
  return descriptor;
}

class Person {
  @ReadOnly
  name: string = 'John Doe';
}

const person = new Person();
person.name = 'Jane Doe'; // Error: Cannot assign to read only property 'name'

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

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

function LogParameter(target: any, propertyName: string, index: number) {
  const metadataKey = `log_${propertyName}_parameters`;
  
  if (Array.isArray(target[metadataKey])) {
    target[metadataKey].push(index);
  } else {
    target[metadataKey] = [index];
  }
}

class Demo {
  method(@LogParameter param1: string, @LogParameter param2: number) {
    // Method logic
  }
}

Висновок

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