Proposta sui Decorator JavaScript: Miglioramento dei Metodi e Annotazione dei Metadati

JavaScript, in quanto linguaggio dinamico e in continua evoluzione, cerca costantemente modi per migliorare la leggibilità, la manutenibilità e l'estensibilità del codice. Una delle funzionalità più attese per affrontare questi aspetti è la proposta sui Decorator. Questo articolo fornisce una panoramica completa dei Decorator JavaScript, esplorandone la sintassi, le capacità e il potenziale impatto sullo sviluppo JavaScript moderno. Sebbene attualmente sia una proposta di Stage 3, i decorator sono già ampiamente utilizzati in framework come Angular e vengono sempre più adottati tramite transpiler come Babel. Ciò rende la loro comprensione fondamentale per qualsiasi sviluppatore JavaScript moderno.

Cosa sono i Decorator JavaScript?

I decorator sono un design pattern preso in prestito da altri linguaggi come Python e Java. In sostanza, sono un tipo speciale di dichiarazione che può essere associata a una classe, un metodo, un accessor, una proprietà o un parametro. I decorator utilizzano la sintassi @expression, dove expression deve risolversi in una funzione che verrà chiamata a runtime con informazioni sulla dichiarazione decorata.

Pensa ai decorator come un modo per aggiungere funzionalità o metadati extra al codice esistente senza modificarlo direttamente. Ciò promuove una codebase più dichiarativa e manutenibile.

Sintassi e Utilizzo di Base

Un semplice decorator è una funzione che accetta uno, due o tre argomenti a seconda di ciò che sta decorando:

• Per un decorator di classe, l'argomento è il costruttore della classe.
• Per un decorator di metodo o accessor, gli argomenti sono l'oggetto target (il prototipo della classe o il costruttore della classe per i membri statici), la chiave della proprietà (il nome del metodo o dell'accessor) e il descrittore della proprietà.
• Per un decorator di proprietà, gli argomenti sono l'oggetto target e la chiave della proprietà.
• Per un decorator di parametro, gli argomenti sono l'oggetto target, la chiave della proprietà e l'indice del parametro nell'elenco dei parametri della funzione.

Decorator di Classe

Un decorator di classe viene applicato al costruttore della classe. Può essere usato per osservare, modificare o sostituire la definizione di una classe. Un caso d'uso comune è la registrazione di una classe all'interno di un framework o di una libreria.

Esempio: Registrazione delle Istanze di Classe

            function logClass(constructor: Function) {
 return class extends constructor {
 constructor(...args: any[]) {
 super(...args);
 console.log(`Nuova istanza di ${constructor.name} creata.`);
 }
 };
}

@logClass
class MyClass {
 constructor(public message: string) {
 }
}

const instance = new MyClass("Hello, Decorators!"); // Output: Nuova istanza di MyClass creata.
            

              
                Copy
              
            
          

In questo esempio, il decorator logClass modifica il costruttore di MyClass per registrare un messaggio ogni volta che viene creata una nuova istanza.

Decorator di Metodo

I decorator di metodo vengono applicati ai metodi all'interno di una classe. Possono essere usati per osservare, modificare o sostituire il comportamento di un metodo. Ciò è utile per operazioni come la registrazione delle chiamate ai metodi, la convalida degli argomenti o l'implementazione della cache.

Esempio: Registrazione delle Chiamate ai Metodi

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

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

 return descriptor;
}

class Calculator {
 @logMethod
 add(a: number, b: number): number {
 return a + b;
 }
}

const calculator = new Calculator();
const sum = calculator.add(5, 3); // Output: Chiamata al metodo add con argomenti: [5,3]
 // Output: Il metodo add ha restituito: 8
            

              
                Copy
              
            
          

Il decorator logMethod registra gli argomenti e il valore di ritorno del metodo add.

Decorator di Accessor

I decorator di accessor sono simili ai decorator di metodo ma si applicano ai metodi getter o setter. Possono essere usati per controllare l'accesso alle proprietà o aggiungere logica di convalida.

Esempio: Convalida dei Valori del Setter

            function validate(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
 const originalSet = descriptor.set;

 descriptor.set = function (value: number) {
 if (value < 0) {
 throw new Error("Il valore deve essere non negativo.");
 }
 originalSet.call(this, value);
 };
}

class Temperature {
 private _celsius: number = 0;

 @validate
 set celsius(value: number) {
 this._celsius = value;
 }

 get celsius(): number {
 return this._celsius;
 }
}

const temperature = new Temperature();
temperature.celsius = 25; // OK
// temperature.celsius = -10; // Lancia un errore
            

              
                Copy
              
            
          

Il decorator validate assicura che il setter celsius accetti solo valori non negativi.

Decorator di Proprietà

I decorator di proprietà vengono applicati alle proprietà di una classe. Possono essere usati per definire metadati sulla proprietà o per modificarne il comportamento.

Esempio: Definizione di una Proprietà Obbligatoria

            function required(target: any, propertyKey: string) {
 let existingRequiredProperties: string[] = target.__requiredProperties__ || [];
 existingRequiredProperties.push(propertyKey);
 target.__requiredProperties__ = existingRequiredProperties;
}

class UserProfile {
 @required
 name: string;

 age: number;

 constructor(data: any) {
 this.name = data.name;
 this.age = data.age;

 const requiredProperties: string[] = (this.constructor as any).prototype.__requiredProperties__ || [];
 requiredProperties.forEach(property => {
 if (!this[property]) {
 throw new Error(`Proprietà obbligatoria mancante: ${property}`);
 }
 });
 }
}

// const user = new UserProfile({}); // Lancia un errore: Proprietà obbligatoria mancante: name
const user = new UserProfile({ name: "John Doe" }); // OK
            

              
                Copy
              
            
          

Il decorator required contrassegna la proprietà name come obbligatoria. Il costruttore controlla quindi se tutte le proprietà obbligatorie sono presenti.

Decorator di Parametro

I decorator di parametro vengono applicati ai parametri delle funzioni. Possono essere usati per aggiungere metadati sul parametro o per modificarne il comportamento. Sono meno comuni rispetto ad altri tipi di decorator.

Esempio: Iniezione di Dipendenze

            import 'reflect-metadata';

const Injectable = (): ClassDecorator => {
 return (target: any) => {
 Reflect.defineMetadata('injectable', true, target);
 };
};

const Inject = (token: any): ParameterDecorator => {
 return (target: any, propertyKey: string | symbol | undefined, parameterIndex: number) => {
 Reflect.defineMetadata('design:paramtypes', [token], target, propertyKey!)
 };
};

@Injectable()
class DatabaseService {
 connect() {
 console.log("Connessione al database...");
 }
}

class UserService {
 private databaseService: DatabaseService;

 constructor(@Inject(DatabaseService) databaseService: DatabaseService) {
 this.databaseService = databaseService;
 }

 getUser(id: number) {
 this.databaseService.connect();
 console.log(`Recupero utente con ID: ${id}`);
 }
}

const databaseService = new DatabaseService();
const userService = new UserService(databaseService);
userService.getUser(123);
            

              
                Copy
              
            
          

In questo esempio, stiamo usando reflect-metadata (una pratica comune quando si lavora con l'iniezione di dipendenze in JavaScript/TypeScript). Il decorator @Inject indica al costruttore di UserService di iniettare un'istanza di DatabaseService. Sebbene l'esempio precedente non possa essere eseguito completamente senza un'ulteriore configurazione, dimostra l'effetto desiderato.

Casi d'Uso e Benefici

I decorator offrono una serie di benefici e possono essere applicati a vari casi d'uso:

• Annotazione di Metadati: I decorator possono essere usati per associare metadati a classi, metodi e proprietà. Questi metadati possono essere utilizzati da framework e librerie per fornire funzionalità aggiuntive, come l'iniezione di dipendenze, il routing e la convalida.
• Programmazione Orientata agli Aspetti (AOP): I decorator possono implementare concetti AOP come la registrazione (logging), la sicurezza e la gestione delle transazioni avvolgendo i metodi con comportamenti aggiuntivi.
• Riusabilità del Codice: I decorator promuovono la riusabilità del codice consentendo di estrarre funzionalità comuni in decorator riutilizzabili.
• Migliore Leggibilità: I decorator rendono il codice più leggibile e dichiarativo separando le responsabilità e riducendo il codice boilerplate.
• Integrazione con i Framework: I decorator sono ampiamente utilizzati nei popolari framework JavaScript come Angular, NestJS e MobX per fornire un modo più dichiarativo ed espressivo per definire componenti, servizi e altri concetti specifici del framework.

Esempi del Mondo Reale e Considerazioni Internazionali

Sebbene i concetti fondamentali dei decorator rimangano gli stessi in diversi contesti di programmazione, la loro applicazione potrebbe variare in base al framework o alla libreria specifica utilizzata. Ecco alcuni esempi:

• Angular (Sviluppato da Google, usato a livello globale): Angular utilizza ampiamente i decorator per definire componenti, servizi e direttive. Ad esempio, il decorator @Component viene utilizzato per definire un componente UI con il suo template, stili e altri metadati. Ciò consente agli sviluppatori di diversa provenienza di creare e gestire facilmente interfacce utente complesse utilizzando un approccio standardizzato.

              
   @Component({
   selector: 'app-my-component',
   templateUrl: './my-component.html',
   styleUrls: ['./my-component.css']
   })
   class MyComponent {
   // Logica del componente qui
   }
   
              
  
                
                  Copy
                
              
            

• NestJS (Un framework Node.js ispirato ad Angular, adottato a livello globale): NestJS utilizza i decorator per definire controller, route e moduli. I decorator @Controller e @Get sono usati per definire endpoint API e i loro corrispondenti gestori. Ciò semplifica il processo di creazione di applicazioni lato server scalabili e manutenibili, indipendentemente dalla posizione geografica dello sviluppatore.

              
   @Controller('users')
   class UsersController {
   @Get()
   findAll(): string {
   return 'Questa azione restituisce tutti gli utenti';
   }
   }
   
              
  
                
                  Copy
                
              
            

• MobX (Una libreria di gestione dello stato, ampiamente utilizzata nelle applicazioni React a livello globale): MobX utilizza i decorator per definire proprietà osservabili e valori calcolati. I decorator @observable e @computed tracciano automaticamente le modifiche ai dati e aggiornano l'interfaccia utente di conseguenza. Questo aiuta gli sviluppatori a creare interfacce utente reattive ed efficienti per un pubblico internazionale, garantendo un'esperienza utente fluida anche con flussi di dati complessi.

              
   class Store {
   @observable count = 0;
  
   @computed get doubledCount() {
   return this.count * 2;
   }
  
   increment() {
   this.count++;
   }
   }
   
              
  
                
                  Copy
                
              
            

Considerazioni sull'Internazionalizzazione: Quando si utilizzano i decorator in progetti destinati a un pubblico globale, è importante considerare l'internazionalizzazione (i18n) e la localizzazione (l10n). Sebbene i decorator stessi non gestiscano direttamente i18n/l10n, possono essere utilizzati per migliorare il processo:

• Aggiunta di Metadati per la Traduzione: I decorator possono essere usati per contrassegnare proprietà o metodi che devono essere tradotti. Questi metadati possono poi essere utilizzati dalle librerie i18n per estrarre e tradurre il testo pertinente.
• Caricamento Dinamico delle Traduzioni: I decorator possono essere utilizzati per caricare dinamicamente le traduzioni in base alla locale dell'utente. Ciò garantisce che l'applicazione venga visualizzata nella lingua preferita dell'utente, indipendentemente dalla sua posizione.
• Formattazione di Date e Numeri: I decorator possono essere utilizzati per formattare date e numeri in base alla locale dell'utente. Ciò garantisce che date e numeri vengano visualizzati in un formato culturalmente appropriato.

Ad esempio, immagina un decorator @Translatable che contrassegna una proprietà come bisognosa di traduzione. Una libreria i18n potrebbe quindi scansionare la codebase, trovare tutte le proprietà contrassegnate con @Translatable ed estrarre il testo per la traduzione. Dopo la traduzione, la libreria può sostituire il testo originale con la versione tradotta in base alla locale dell'utente. Questo approccio promuove un flusso di lavoro i18n/l10n più organizzato e manutenibile, specialmente in applicazioni grandi e complesse.

Stato Attuale della Proposta e Supporto dei Browser

La proposta sui Decorator JavaScript si trova attualmente allo Stage 3 nel processo di standardizzazione TC39. Ciò significa che la proposta è relativamente stabile ed è probabile che venga inclusa in una futura specifica ECMAScript.

Sebbene il supporto nativo dei browser per i decorator sia ancora limitato, possono essere utilizzati nella maggior parte dei progetti JavaScript moderni utilizzando transpiler come Babel o il compilatore TypeScript. Questi strumenti trasformano la sintassi dei decorator in codice JavaScript standard che può essere eseguito in qualsiasi browser o ambiente Node.js.

Utilizzo di Babel: Per utilizzare i decorator con Babel, è necessario installare il plugin @babel/plugin-proposal-decorators e configurarlo nel file di configurazione di Babel (.babelrc o babel.config.js). Molto probabilmente avrai bisogno anche di @babel/plugin-proposal-class-properties.

            
 // babel.config.js
 module.exports = {
 presets: ['@babel/preset-env'],
 plugins: [
 ['@babel/plugin-proposal-decorators', { legacy: true }],
 ['@babel/plugin-proposal-class-properties', { loose: true }]
 ],
 };
 
            

              
                Copy
              
            
          

Utilizzo di TypeScript: TypeScript ha un supporto integrato per i decorator. È necessario abilitare l'opzione del compilatore experimentalDecorators nel file tsconfig.json.

            
 // tsconfig.json
 {
 "compilerOptions": {
 "target": "es5",
 "experimentalDecorators": true,
 "emitDecoratorMetadata": true,  // Opzionale, ma utile per l'iniezione di dipendenze
 }
 }
 
            

              
                Copy
              
            
          

Nota l'opzione `emitDecoratorMetadata`. Questa funziona con librerie come `reflect-metadata` per abilitare l'iniezione di dipendenze tramite i decorator.

Impatto Potenziale e Direzioni Future

La proposta sui Decorator JavaScript ha il potenziale per avere un impatto significativo sul modo in cui scriviamo codice JavaScript. Fornendo un modo più dichiarativo ed espressivo per aggiungere funzionalità a classi, metodi e proprietà, i decorator possono migliorare la leggibilità, la manutenibilità e la riusabilità del codice.

Man mano che la proposta avanza nel processo di standardizzazione e ottiene una più ampia adozione, possiamo aspettarci di vedere più framework e librerie che adottano i decorator per fornire un'esperienza di sviluppo più intuitiva e potente.

Inoltre, le capacità dei metadati dei decorator possono aprire nuove possibilità per gli strumenti e l'analisi del codice. Ad esempio, linter ed editor di codice possono utilizzare i metadati dei decorator per fornire suggerimenti e messaggi di errore più accurati e pertinenti.

Conclusione

I Decorator JavaScript sono una funzionalità potente e promettente che può migliorare significativamente lo sviluppo JavaScript moderno. Comprendendone la sintassi, le capacità e i potenziali casi d'uso, gli sviluppatori possono sfruttare i decorator per scrivere codice più manutenibile, leggibile e riutilizzabile. Sebbene il supporto nativo dei browser sia ancora in evoluzione, transpiler come Babel e TypeScript rendono possibile l'utilizzo dei decorator nella maggior parte dei progetti JavaScript odierni. Man mano che la proposta si avvicina alla standardizzazione e guadagna una più ampia adozione, è probabile che i decorator diventino uno strumento essenziale nell'arsenale dello sviluppatore JavaScript.

Approfondimenti

• Proposta Decorator TC39
• Decorator TypeScript
• Plugin Babel Proposta Decorator
• reflect-metadata