Informazioni sui decoratori TypeScript

I decoratori TypeScript forniscono un modo potente per aggiungere funzionalità a classi, metodi, proprietà e parametri in fase di esecuzione. Sono spesso utilizzati in framework come Angular per l'iniezione di dipendenza, la registrazione, la convalida e altro. Questo articolo spiegherà i diversi tipi di decoratori in TypeScript e come utilizzarli in modo efficace.

Cosa sono i decoratori TypeScript?

I decoratori in TypeScript sono funzioni che hanno come prefisso il simbolo @ e possono essere collegate a vari elementi come classi, metodi o proprietà. Consentono di modificare il comportamento del codice a cui sono collegate, senza alterare direttamente il codice.

Tipi di decoratori

• Decoratori di classe: Applicato a un'intera classe.
• Decoratori di metodo: Applicati a un metodo all'interno di una classe.
• Decoratori di proprietà: Applicato a una proprietà in una classe.
• Decoratori dei parametri: Applicati ai parametri di un metodo in una classe.

Come abilitare i decoratori in TypeScript

Prima di poter utilizzare i decoratori, assicurati di abilitarli nel file tsconfig.json impostando "experimentalDecorators" su true.

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

Decoratori di classe

Un decoratore di classe viene applicato a un'intera classe. È utile per aggiungere metadati o modificare il comportamento di una classe.

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 di metodo

I decoratori di metodo vengono applicati ai metodi all'interno di una classe. Questi decoratori possono essere utilizzati per modificare o registrare il comportamento di un metodo.

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 di proprietà

I decoratori di proprietà sono usati per aggiungere funzionalità alle proprietà in una classe. Possono essere utili per la convalida o per aggiungere metadati a una proprietà.

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'

Decoratori dei parametri

I decoratori di parametri vengono utilizzati per modificare o registrare informazioni sui parametri del metodo.

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

Conclusione

I decoratori in TypeScript forniscono un modo potente per migliorare la funzionalità del tuo codice senza modificarne la struttura. Comprendendo come usare i decoratori di classe, metodo, proprietà e parametro, puoi implementare funzionalità avanzate come logging, validazione e iniezione di dipendenza. I decoratori sono una funzionalità chiave in TypeScript che può migliorare notevolmente il tuo flusso di lavoro di sviluppo, specialmente in applicazioni di grandi dimensioni.