Cum să utilizați decoratorii în TypeScript

Decoratorii din TypeScript sunt o caracteristică puternică care le permite dezvoltatorilor să adauge funcționalități suplimentare la clase, metode, proprietăți și parametri. Ele oferă o modalitate de a modifica comportamentul codului existent fără a-i schimba structura reală. Acest ghid va explica cum să utilizați decoratorii în TypeScript cu exemple ușor de urmat.

Ce sunt Decoratorii?

Decoratorii sunt funcții speciale care pot fi aplicate claselor, metodelor, proprietăților sau parametrilor. Acestea sunt invocate în timpul execuției și permit dezvoltatorilor să adnoteze și să modifice codul într-un mod declarativ. Pentru a activa decoratorii într-un proiect TypeScript, marcatorul experimentalDecorators trebuie setat la true în fișierul tsconfig.json.

Activarea decoratorilor în TypeScript

Pentru a utiliza decoratorii, compilatorul TypeScript trebuie configurat pentru a le recunoaște. Acest lucru se poate face setând steag-ul experimentalDecorators la true în fișierul tsconfig.json.

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

Odată ce decoratorii sunt activați, aceștia pot fi utilizați pe tot parcursul proiectului.

Crearea unui decorator de clasă

Un decorator de clasă este aplicat unei declarații de clasă și poate fi folosit pentru a modifica sau înlocui o definiție de clasă. Decoratorii clasei sunt declarați chiar deasupra clasei pe care o decorează, folosind simbolul @.

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

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

const person = new Person('Alice');

În acest exemplu, decoratorul LogClass înregistrează un mesaj când este creată clasa Person. Decoratorul este definit ca o funcție care ia un singur argument: constructorul clasei care este decorată.

Decoratori metoda

Decoratorii de metode sunt aplicați metodelor din cadrul unei clase. Acestea permit dezvoltatorilor să intercepteze apelurile de metodă, să-și modifice comportamentul sau să efectueze operațiuni suplimentare înainte sau după executarea metodei.

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);

Aici, decoratorul LogMethod înregistrează numele metodei și argumentele acesteia ori de câte ori este apelată metoda add. Acesta include metoda originală într-o nouă funcție care realizează înregistrarea înainte de a delega metodei originale.

Decoratori imobiliari

Decoratorii de proprietăți sunt utilizați pentru a observa sau modifica comportamentul proprietăților clasei. Spre deosebire de decoratorii de metode, aceștia nu au acces la valoarea proprietății în sine, dar pot adăuga metadate proprietăților.

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

În acest exemplu, decoratorul ReadOnly este aplicat proprietății title a clasei Book, făcându-l doar citire prin setarea writable la fals.

Parametru Decoratori

Decoratorii de parametri sunt utilizați pentru adnotarea sau modificarea parametrilor metodei. Ei primesc trei argumente: obiectul țintă, numele metodei și indexul parametrului.

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!');

În acest exemplu, decoratorul LogParameter este aplicat parametrului message al metodei greet din clasa UserService. Decoratorul înregistrează informații despre parametrul care este decorat.

Concluzie

Decoratorii din TypeScript oferă o modalitate puternică de a îmbunătăți funcționalitatea codului fără a-i modifica structura. Folosind decoratorii de clasă, metodă, proprietate și parametri, dezvoltatorii pot adăuga cu ușurință funcționalități reutilizabile în proiectele lor. Cu exemplele oferite în acest ghid, este ușor să începeți să utilizați decoratorii în TypeScript.