Înțelegerea decoratorilor TypeScript

Decoratorii TypeScript oferă o modalitate puternică de a adăuga funcționalitate la clase, metode, proprietăți și parametri în timpul execuției. Ele sunt adesea folosite în cadre precum Angular pentru injectarea de dependențe, înregistrare în jurnal, validare și multe altele. Acest articol va explica diferitele tipuri de decoratori în TypeScript și cum să le folosiți eficient.

Ce sunt decoratorii TypeScript?

Decoratorii din TypeScript sunt funcții care sunt prefixate cu un simbol @ și pot fi atașate la diferite elemente precum clase, metode sau proprietăți. Acestea vă permit să modificați comportamentul codului la care sunt atașați, fără a modifica codul direct.

Tipuri de decoratori

• Decoratori de clasă: Se aplică unei întregi clase.
• Decoratori metode: Aplicat unei metode din cadrul unei clase.
• Decoratori de proprietăți: Aplicat unei proprietăți dintr-o clasă.
• Decoratori de parametri: Aplicat parametrilor unei metode dintr-o clasă.

Cum să activați decoratorii în TypeScript

Înainte de a putea folosi decoratorii, asigurați-vă că le activați în fișierul dvs. tsconfig.json setând "experimentalDecorators" la true.

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

Decoratori de clasă

Un decorator de clasă este aplicat unei clase întregi. Este util pentru adăugarea de metadate sau modificarea comportamentului unei clase.

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'

Decoratori metoda

Decoratorii de metode sunt aplicați metodelor din cadrul unei clase. Acești decoratori pot fi utilizați pentru a modifica sau înregistra comportamentul unei metode.

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'

Decoratori imobiliari

Decoratorii de proprietăți sunt utilizați pentru a adăuga funcționalitate proprietăților dintr-o clasă. Ele pot fi utile pentru validare sau pentru a adăuga metadate la o proprietate.

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'

Parametru Decoratori

Decoratorii de parametri sunt utilizați pentru a modifica sau înregistra informații despre parametrii metodei.

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
  }
}

Concluzie

Decoratorii din TypeScript oferă o modalitate puternică de a îmbunătăți funcționalitatea codului dvs. fără a modifica structura acestuia. Înțelegând cum să utilizați decoratorii de clasă, metodă, proprietate și parametri, puteți implementa funcții avansate precum înregistrarea în jurnal, validarea și injectarea dependenței. Decoratorii sunt o caracteristică cheie în TypeScript care vă poate îmbunătăți foarte mult fluxul de lucru de dezvoltare, în special în aplicațiile mari.