Come creare decoratori TypeScript personalizzati

I decoratori sono una funzionalità di TypeScript che consente di modificare classi, metodi, proprietà o parametri in fase di esecuzione. Sono funzioni speciali che forniscono capacità di meta-programmazione. In TypeScript, i decoratori sono spesso utilizzati in framework come Angular per migliorare la funzionalità. Questo articolo spiega come creare decoratori personalizzati passo dopo passo.

Tipi di decoratori in TypeScript

Esistono quattro tipi principali di decoratori in TypeScript:

• Decoratori di classe
• Decoratori di metodo
• Decoratori di accessori
• Decoratori di proprietà

Abilitazione dei decoratori in TypeScript

Per utilizzare i decoratori in un progetto TypeScript, è necessario abilitare l'opzione experimentalDecorators nel file tsconfig.json.

{
  "compilerOptions": {
    "experimentalDecorators": true
  }
}

Creazione di un decoratore di classe

I decoratori di classe vengono applicati al costruttore di una classe. Sono utili per aggiungere metadati o funzionalità alla classe. Ecco un esempio di come creare un semplice decoratore di classe.

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

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

const person = new Person("John");
// Output: Class Person is created

Creazione di un decoratore di metodo

I decoratori di metodo vengono applicati ai metodi di classe. Possono essere utilizzati per modificare o osservare il comportamento del metodo. Di seguito è riportato un esempio di decoratore di metodo che registra l'esecuzione del metodo.

function logMethod(target: any, 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) {
    return a + b;
  }
}

const calc = new Calculator();
calc.add(2, 3); 
// Output: Method add is called with arguments: [2, 3]

Creazione di un decoratore immobiliare

I decoratori di proprietà possono essere usati per osservare o modificare le proprietà. Ecco un esempio in cui un decoratore di proprietà assicura che una proprietà abbia un valore predefinito.

function defaultValue(value: any) {
  return function (target: any, propertyKey: string) {
    let propertyValue = value;

    const getter = function () {
      return propertyValue;
    };

    const setter = function (newValue: any) {
      propertyValue = newValue || value;
    };

    Object.defineProperty(target, propertyKey, {
      get: getter,
      set: setter,
      enumerable: true,
      configurable: true,
    });
  };
}

class User {
  @defaultValue('Anonymous')
  name!: string;
}

const user = new User();
console.log(user.name); // Output: Anonymous
user.name = 'Alice';
console.log(user.name); // Output: Alice

Creazione di un decoratore di parametri

I decoratori di parametri vengono applicati ai parametri di un metodo. Possono essere utili per attività come la convalida o la registrazione di argomenti. Ecco un esempio di decoratore di parametri.

function logParameter(target: any, propertyKey: string, parameterIndex: number) {
  console.log(`Parameter at index ${parameterIndex} in method ${propertyKey} is being decorated`);
}

class Vehicle {
  drive(@logParameter speed: number) {
    console.log(`Driving at speed ${speed}`);
  }
}

const vehicle = new Vehicle();
vehicle.drive(50);
// Output: Parameter at index 0 in method drive is being decorated

Conclusione

I decoratori in TypeScript offrono potenti capacità di meta-programmazione che possono migliorare ed estendere la funzionalità di classi, metodi e proprietà. Utilizzando decoratori personalizzati, è possibile creare strutture di codice riutilizzabili, efficienti e organizzate. Questa guida ha dimostrato la creazione di diversi tipi di decoratori: classe, metodo, proprietà e parametro.