Decorator JavaScript: Metadati e Trasformazione

I Decorator JavaScript, una funzionalità ispirata a linguaggi come Python e Java, forniscono un modo potente ed espressivo per aggiungere metadati e trasformare classi, metodi, proprietà e parametri. Offrono una sintassi pulita e dichiarativa per migliorare la funzionalità del codice e promuovere la separazione delle responsabilità (separation of concerns). Sebbene siano ancora un'aggiunta relativamente nuova all'ecosistema JavaScript, i decorator stanno guadagnando popolarità, specialmente all'interno di framework come Angular e librerie che sfruttano i metadati per l'iniezione delle dipendenze e altre funzionalità avanzate. Questo articolo esplora i fondamenti dei decorator JavaScript, la loro applicazione e il loro potenziale per creare codebase più manutenibili ed estensibili.

Cosa sono i Decorator JavaScript?

Essenzialmente, i decorator sono tipi speciali di dichiarazioni che possono essere associate a classi, metodi, accessor, proprietà o parametri. Utilizzano la sintassi @expression, dove expression deve risolversi in una funzione che verrà chiamata a runtime con informazioni sulla dichiarazione decorata. I decorator agiscono fondamentalmente come funzioni che modificano o estendono il comportamento dell'elemento decorato.

Pensa ai decorator come a un modo per "avvolgere" o arricchire il codice esistente senza modificarlo direttamente. Questo principio, noto come pattern Decorator nel design del software, permette di aggiungere funzionalità a un oggetto in modo dinamico.

Abilitare i Decorator

Sebbene i decorator facciano parte dello standard ECMAScript, non sono abilitati di default nella maggior parte degli ambienti JavaScript. Per utilizzarli, è generalmente necessario configurare i propri strumenti di build. Ecco come abilitare i decorator in alcuni ambienti comuni:

• TypeScript: I decorator sono supportati nativamente in TypeScript. Assicurati che l'opzione del compilatore experimentalDecorators sia impostata su true nel tuo file tsconfig.json:

            {
  "compilerOptions": {
    "target": "esnext",
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true, // Opzionale, ma spesso utile
    "module": "commonjs", // O un altro sistema di moduli come "es6" o "esnext"
    "moduleResolution": "node"
  }
}
            

              
                Copy
              
            
          

• Babel: Se stai usando Babel, dovrai installare e configurare il plugin @babel/plugin-proposal-decorators:

            npm install --save-dev @babel/plugin-proposal-decorators

            

              
                Copy
              
            
          

Successivamente, aggiungi il plugin alla tua configurazione di Babel (ad es. .babelrc o babel.config.js):

            {
  "plugins": [["@babel/plugin-proposal-decorators", { "version": "2023-05" }]]
}
            

              
                Copy
              
            
          

L'opzione version è importante e dovrebbe corrispondere alla versione della proposta dei decorator che stai utilizzando. Consulta la documentazione del plugin di Babel per la versione più recente raccomandata.

Tipi di Decorator

Esistono diversi tipi di decorator, ognuno progettato per elementi specifici:

• Decorator di Classe: Applicati alle classi.
• Decorator di Metodo: Applicati ai metodi all'interno di una classe.
• Decorator di Accessor: Applicati agli accessor getter o setter.
• Decorator di Proprietà: Applicati alle proprietà di una classe.
• Decorator di Parametro: Applicati ai parametri di un metodo o di un costruttore.

Decorator di Classe

I decorator di classe vengono applicati al costruttore di una classe e possono essere usati per osservare, modificare o sostituire la definizione di una classe. Ricevono il costruttore della classe come unico argomento.

Esempio:

            function sealed(constructor: Function) {
  Object.seal(constructor);
  Object.seal(constructor.prototype);
}

@sealed
class Greeter {
  greeting: string;
  constructor(message: string) {
    this.greeting = message;
  }
  greet() {
    return "Hello, " + this.greeting;
  }
}

// Tentare di aggiungere proprietà alla classe sigillata o al suo prototipo fallirà

            

              
                Copy
              
            
          

In questo esempio, il decorator @sealed impedisce ulteriori modifiche alla classe Greeter e al suo prototipo. Questo può essere utile per garantire l'immutabilità o prevenire modifiche accidentali.

Decorator di Metodo

I decorator di metodo vengono applicati ai metodi all'interno di una classe. Ricevono tre argomenti:

• target: Il prototipo della classe (per metodi di istanza) o il costruttore della classe (per metodi statici).
• propertyKey: Il nome del metodo decorato.
• descriptor: Il descrittore di proprietà per il metodo.

Esempio:

            function log(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
  const originalMethod = descriptor.value;

  descriptor.value = function (...args: any[]) {
    console.log(`Chiamata a ${propertyKey} con argomenti: ${JSON.stringify(args)}`);
    const result = originalMethod.apply(this, args);
    console.log(`Metodo ${propertyKey} ha restituito: ${result}`);
    return result;
  };

  return descriptor;
}

class Calculator {
  @log
  add(x: number, y: number) {
    return x + y;
  }
}

const calculator = new Calculator();
calculator.add(2, 3); // Output: Chiamata a add con argomenti: [2,3]
                      //         Metodo add ha restituito: 5

            

              
                Copy
              
            
          

Il decorator @log registra gli argomenti e il valore di ritorno del metodo add. Questo è un semplice esempio di come i decorator di metodo possono essere utilizzati per il logging, il profiling o altre problematiche trasversali (cross-cutting concerns).

Decorator di Accessor

I decorator di accessor sono simili ai decorator di metodo ma vengono applicati agli accessor getter o setter. Anch'essi ricevono gli stessi tre argomenti: target, propertyKey e descriptor.

Esempio:

            function configurable(value: boolean) {
  return function (target: any, propertyKey: string, descriptor: PropertyDescriptor) {
    descriptor.configurable = value;
  };
}

class Point {
  private _x: number;
  private _y: number;

  constructor(x: number, y: number) {
    this._x = x;
    this._y = y;
  }

  @configurable(false)
  get x() {
    return this._x;
  }

  set x(value: number) {
      this._x = value;
  }
}

const point = new Point(1, 2);
// Object.defineProperty(point, 'x', { configurable: true }); // Lancerebbe un errore perché 'x' non è configurabile

            

              
                Copy
              
            
          

Il decorator @configurable(false) impedisce che il getter x venga riconfigurato, rendendolo non configurabile.

Decorator di Proprietà

I decorator di proprietà vengono applicati alle proprietà di una classe. Ricevono due argomenti:

• target: Il prototipo della classe (per proprietà di istanza) o il costruttore della classe (per proprietà statiche).
• propertyKey: Il nome della proprietà decorata.

Esempio:

            function readonly(target: any, propertyKey: string) {
  Object.defineProperty(target, propertyKey, {
    writable: false,
  });
}

class Person {
  @readonly
  name: string;

  constructor(name: string) {
    this.name = name;
  }
}

const person = new Person("Alice");
// person.name = "Bob"; // Questo causerà un errore in strict mode perché 'name' è di sola lettura

            

              
                Copy
              
            
          

Il decorator @readonly rende la proprietà name di sola lettura, impedendo che venga modificata dopo l'inizializzazione.

Decorator di Parametro

I decorator di parametro vengono applicati ai parametri di un metodo o di un costruttore. Ricevono tre argomenti:

• target: Il prototipo della classe (per metodi di istanza) o il costruttore della classe (per metodi statici o costruttori).
• propertyKey: Il nome del metodo o del costruttore.
• parameterIndex: L'indice del parametro nell'elenco dei parametri.

I decorator di parametro sono spesso usati con la reflection per memorizzare metadati sui parametri di una funzione. Questi metadati possono poi essere usati a runtime per l'iniezione delle dipendenze o altri scopi. Affinché funzioni correttamente, è necessario abilitare l'opzione del compilatore emitDecoratorMetadata nel file tsconfig.json.

Esempio (usando reflect-metadata):

            import 'reflect-metadata';

function required(target: Object, propertyKey: string | symbol, parameterIndex: number) {
  let existingRequiredParameters: number[] = Reflect.getOwnMetadata("required", target, propertyKey) || [];
  existingRequiredParameters.push(parameterIndex);
  Reflect.defineMetadata("required", existingRequiredParameters, target, propertyKey);
}

function validate(target: any, propertyName: string, descriptor: TypedPropertyDescriptor) {
  let method = descriptor.value!;

  descriptor.value = function (...args: any[]) {
    let requiredParameters: number[] = Reflect.getOwnMetadata("required", target, propertyName);
    if (requiredParameters) {
      for (let parameterIndex of requiredParameters) {
        if (args[parameterIndex] === null || args[parameterIndex] === undefined) {
          throw new Error(`Argomento obbligatorio mancante all'indice ${parameterIndex}`);
        }
      }
    }
    return method.apply(this, args);
  };
}

class User {
  name: string;
  age: number;

  constructor(@required name: string, public surname: string, @required age: number) {
    this.name = name;
    this.age = age;
  }

  @validate
  greet(prefix: string, @required salutation: string): string {
    return `${prefix} ${salutation} ${this.name}`;
  }
}

// Utilizzo

try {
  const user1 = new User("John", "Doe", 30);
  console.log(user1.greet("Mr.", "Hello"));

  const user2 = new User(undefined as any, "Doe", null as any);

} catch (error) {
  console.error(error.message);
}

try {
  const user = new User("John", "Doe", 30);
  console.log(user.greet("Mr.", undefined as any));
} catch (error) {
  console.error(error.message);
}


            

              
                Copy
              
            
          

In questo esempio, il decorator @required contrassegna i parametri come obbligatori. Il decorator @validate usa poi la reflection (tramite reflect-metadata) per verificare se i parametri obbligatori sono presenti prima di chiamare il metodo. Questo esempio mostra l'uso di base, e si raccomanda di creare una validazione dei parametri robusta in uno scenario di produzione.

Per installare reflect-metadata:

            npm install reflect-metadata --save

            

              
                Copy
              
            
          

Usare i Decorator per i Metadati

Uno degli usi principali dei decorator è quello di allegare metadati alle classi e ai loro membri. Questi metadati possono essere utilizzati a runtime per vari scopi, come l'iniezione delle dipendenze, la serializzazione e la validazione. La libreria reflect-metadata fornisce un modo standard per memorizzare e recuperare i metadati.

Esempio:

            import 'reflect-metadata';

const TYPE_KEY = "design:type";
const PARAMTYPES_KEY = "design:paramtypes";
const RETURNTYPE_KEY = "design:returntype";

function Type(type: any) {
    return Reflect.metadata(TYPE_KEY, type);
}


function LogType(target: any, propertyKey: string) {
  const t = Reflect.getMetadata(TYPE_KEY, target, propertyKey);
  console.log(`${target.constructor.name}.${propertyKey} tipo: ${t.name}`);
}

class Demo {
    @LogType
    public name: string;
    constructor(name: string){
      this.name = name;
    }
}

            

              
                Copy
              
            
          

Factory di Decorator

Le factory di decorator sono funzioni che restituiscono un decorator. Permettono di passare argomenti al decorator, rendendolo più flessibile e riutilizzabile.

Esempio:

            function deprecated(deprecationReason: string) {
  return function (target: any, propertyKey: string, descriptor: PropertyDescriptor) {
    const originalMethod = descriptor.value;

    descriptor.value = function (...args: any[]) {
      console.warn(`Il metodo ${propertyKey} è deprecato: ${deprecationReason}`);
      return originalMethod.apply(this, args);
    };

    return descriptor;
  };
}

class LegacyComponent {
  @deprecated("Usa invece il metodo newMethod.")
  oldMethod() {
    console.log("Vecchio metodo chiamato");
  }

  newMethod() {
    console.log("Nuovo metodo chiamato");
  }
}

const component = new LegacyComponent();
component.oldMethod(); // Output: Il metodo oldMethod è deprecato: Usa invece il metodo newMethod.
                       //         Vecchio metodo chiamato

            

              
                Copy
              
            
          

La factory di decorator @deprecated accetta un messaggio di deprecazione come argomento e registra un avviso quando il metodo decorato viene chiamato. Ciò consente di contrassegnare i metodi come deprecati e fornire una guida agli sviluppatori su come migrare a nuove alternative.

Casi d'Uso Reali

I decorator hanno una vasta gamma di applicazioni nello sviluppo JavaScript moderno:

• Iniezione delle Dipendenze: Framework come Angular si basano pesantemente sui decorator per l'iniezione delle dipendenze.
• Routing: Nelle applicazioni web, i decorator possono essere usati per definire le route per controller e metodi.
• Validazione: I decorator possono essere usati per validare i dati di input e assicurarsi che soddisfino determinati criteri.
• Autorizzazione: I decorator possono essere usati per applicare politiche di sicurezza e limitare l'accesso a determinati metodi o risorse.
• Logging e Profiling: Come mostrato negli esempi precedenti, i decorator possono essere usati per il logging e il profiling dell'esecuzione del codice.
• Gestione dello Stato: I decorator possono integrarsi con le librerie di gestione dello stato per aggiornare automaticamente i componenti quando lo stato cambia.

Vantaggi dell'Uso dei Decorator

• Migliore Leggibilità del Codice: I decorator forniscono una sintassi dichiarativa per aggiungere funzionalità, rendendo il codice più facile da capire e mantenere.
• Separazione delle Responsabilità: I decorator consentono di separare le problematiche trasversali (es. logging, validazione, autorizzazione) dalla logica di business principale.
• Riutilizzabilità: I decorator possono essere riutilizzati su più classi e metodi, riducendo la duplicazione del codice.
• Estensibilità: I decorator rendono facile estendere la funzionalità del codice esistente senza modificarlo direttamente.

Sfide e Considerazioni

• Curva di Apprendimento: I decorator sono una funzionalità relativamente nuova e potrebbe essere necessario del tempo per imparare a usarli in modo efficace.
• Compatibilità: Assicurati che il tuo ambiente di destinazione supporti i decorator e di aver configurato correttamente i tuoi strumenti di build.
• Debugging: Il debug del codice che utilizza i decorator può essere più impegnativo del debug del codice normale, specialmente se i decorator sono complessi.
• Uso Eccessivo: Evita di usare eccessivamente i decorator, poiché ciò può rendere il tuo codice più difficile da capire e mantenere. Usali strategicamente per scopi specifici.
• Overhead a Runtime: I decorator possono introdurre un certo overhead a runtime, specialmente se eseguono operazioni complesse. Considera le implicazioni sulle prestazioni quando usi i decorator in applicazioni critiche per le performance.

Conclusione

I Decorator JavaScript sono uno strumento potente per migliorare la funzionalità del codice e promuovere la separazione delle responsabilità. Fornendo una sintassi pulita e dichiarativa per aggiungere metadati e trasformare classi, metodi, proprietà e parametri, i decorator possono aiutarti a creare codebase più manutenibili, riutilizzabili ed estensibili. Sebbene presentino una curva di apprendimento e alcune potenziali sfide, i vantaggi dell'utilizzo dei decorator nel contesto giusto possono essere significativi. Con la continua evoluzione dell'ecosistema JavaScript, è probabile che i decorator diventino una parte sempre più importante dello sviluppo JavaScript moderno.

Considera di esplorare come i decorator possano semplificare il tuo codice esistente o permetterti di scrivere applicazioni più espressive e manutenibili. Con un'attenta pianificazione e una solida comprensione delle loro capacità, puoi sfruttare i decorator per creare soluzioni JavaScript più robuste e scalabili.