Voorstel voor JavaScript Decorators: Methodeverbetering en Metadata-annotatie

JavaScript, als een dynamische en evoluerende taal, zoekt voortdurend naar manieren om de leesbaarheid, onderhoudbaarheid en uitbreidbaarheid van code te verbeteren. Een van de meest verwachte functies die op deze aspecten inspeelt, is het Decorators-voorstel. Dit artikel biedt een uitgebreid overzicht van JavaScript Decorators, waarbij de syntaxis, mogelijkheden en potentiële impact op moderne JavaScript-ontwikkeling worden onderzocht. Hoewel het momenteel een Stage 3-voorstel is, worden decorators al op grote schaal gebruikt in frameworks zoals Angular en steeds vaker toegepast via transpilers zoals Babel. Dit maakt het begrijpen ervan cruciaal voor elke moderne JavaScript-ontwikkelaar.

Wat zijn JavaScript Decorators?

Decorators zijn een ontwerppatroon dat is overgenomen uit andere talen zoals Python en Java. In wezen zijn het speciale declaraties die kunnen worden gekoppeld aan een klasse, methode, accessor, eigenschap of parameter. Decorators gebruiken de @expressie-syntaxis, waarbij expressie moet resulteren in een functie die tijdens runtime wordt aangeroepen met informatie over de gedecoreerde declaratie.

Zie decorators als een manier om extra functionaliteit of metadata toe te voegen aan bestaande code zonder deze direct te wijzigen. Dit bevordert een meer declaratieve en onderhoudbare codebase.

Basissyntaxis en Gebruik

Een eenvoudige decorator is een functie die één, twee of drie argumenten accepteert, afhankelijk van wat het decoreert:

• Voor een klasse-decorator is het argument de constructor van de klasse.
• Voor een methode- of accessor-decorator zijn de argumenten het doelobject (ofwel het prototype van de klasse, ofwel de constructor van de klasse voor statische leden), de eigenschapssleutel (de naam van de methode of accessor) en de eigenschapsdescriptor.
• Voor een eigenschapsdecorator zijn de argumenten het doelobject en de eigenschapssleutel.
• Voor een parameter-decorator zijn de argumenten het doelobject, de eigenschapssleutel en de index van de parameter in de parameterlijst van de functie.

Klasse Decorators

Een klasse-decorator wordt toegepast op de constructor van de klasse. Het kan worden gebruikt om een klassedefinitie te observeren, wijzigen of vervangen. Een veelvoorkomende toepassing is het registreren van een klasse binnen een framework of bibliotheek.

Voorbeeld: Loggen van Klasse-instantiaties

            function logClass(constructor: Function) {
 return class extends constructor {
 constructor(...args: any[]) {
 super(...args);
 console.log(`New instance of ${constructor.name} created.`);
 }
 };
}

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

const instance = new MyClass("Hello, Decorators!"); // Output: New instance of MyClass created.
            

              
                Copy
              
            
          

In dit voorbeeld wijzigt de logClass-decorator de MyClass-constructor om een bericht te loggen telkens wanneer een nieuwe instantie wordt gemaakt.

Methode Decorators

Methode-decorators worden toegepast op methoden binnen een klasse. Ze kunnen worden gebruikt om het gedrag van een methode te observeren, wijzigen of vervangen. Dit is nuttig voor zaken als het loggen van methode-aanroepen, het valideren van argumenten of het implementeren van caching.

Voorbeeld: Loggen van Methode-aanroepen

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

 descriptor.value = function (...args: any[]) {
 console.log(`Calling method ${propertyKey} with arguments: ${JSON.stringify(args)}`);
 const result = originalMethod.apply(this, args);
 console.log(`Method ${propertyKey} returned: ${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: Calling method add with arguments: [5,3]
 // Output: Method add returned: 8
            

              
                Copy
              
            
          

De logMethod-decorator logt de argumenten en de retourwaarde van de add-methode.

Accessor Decorators

Accessor-decorators lijken op methode-decorators, maar zijn van toepassing op getter- of setter-methoden. Ze kunnen worden gebruikt om de toegang tot eigenschappen te controleren of validatielogica toe te voegen.

Voorbeeld: Valideren van Setter-waarden

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

 descriptor.set = function (value: number) {
 if (value < 0) {
 throw new Error("Value must be non-negative.");
 }
 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; // Throws an error
            

              
                Copy
              
            
          

De validate-decorator zorgt ervoor dat de celsius-setter alleen niet-negatieve waarden accepteert.

Eigenschap Decorators

Eigenschap-decorators worden toegepast op klasse-eigenschappen. Ze kunnen worden gebruikt om metadata over de eigenschap te definiëren of om het gedrag ervan te wijzigen.

Voorbeeld: Definiëren van een Vereiste Eigenschap

            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(`Missing required property: ${property}`);
 }
 });
 }
}

// const user = new UserProfile({}); // Throws an error: Missing required property: name
const user = new UserProfile({ name: "John Doe" }); // OK
            

              
                Copy
              
            
          

De required-decorator markeert de name-eigenschap als vereist. De constructor controleert vervolgens of alle vereiste eigenschappen aanwezig zijn.

Parameter Decorators

Parameter-decorators worden toegepast op functieparameters. Ze kunnen worden gebruikt om metadata over de parameter toe te voegen of het gedrag ervan te wijzigen. Ze zijn minder gebruikelijk dan andere soorten decorators.

Voorbeeld: Injecteren van Afhankelijkheden

            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("Connecting to the database...");
 }
}

class UserService {
 private databaseService: DatabaseService;

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

 getUser(id: number) {
 this.databaseService.connect();
 console.log(`Fetching user with ID: ${id}`);
 }
}

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

              
                Copy
              
            
          

In dit voorbeeld gebruiken we reflect-metadata (een gebruikelijke praktijk bij het werken met dependency injection in JavaScript/TypeScript). De @Inject-decorator vertelt de constructor van UserService om een instantie van DatabaseService te injecteren. Hoewel het bovenstaande voorbeeld niet volledig kan worden uitgevoerd zonder verdere setup, demonstreert het wel het beoogde effect.

Use-cases en Voordelen

Decorators bieden een reeks voordelen en kunnen worden toegepast in verschillende use-cases:

• Metadata-annotatie: Decorators kunnen worden gebruikt om metadata te koppelen aan klassen, methoden en eigenschappen. Deze metadata kan worden gebruikt door frameworks en bibliotheken om extra functionaliteit te bieden, zoals dependency injection, routing en validatie.
• Aspect-Georiënteerd Programmeren (AOP): Decorators kunnen AOP-concepten implementeren zoals logging, beveiliging en transactiebeheer door methoden te omhullen met extra gedrag.
• Herbruikbaarheid van Code: Decorators bevorderen de herbruikbaarheid van code door u in staat te stellen gemeenschappelijke functionaliteit te extraheren in herbruikbare decorators.
• Verbeterde Leesbaarheid: Decorators maken code leesbaarder en declaratiever door verantwoordelijkheden te scheiden en boilerplate-code te verminderen.
• Frameworkintegratie: Decorators worden veel gebruikt in populaire JavaScript-frameworks zoals Angular, NestJS en MobX om een meer declaratieve en expressieve manier te bieden voor het definiëren van componenten, services en andere framework-specifieke concepten.

Praktijkvoorbeelden en Internationale Overwegingen

Hoewel de kernconcepten van decorators in verschillende programmeercontexten hetzelfde blijven, kan hun toepassing variëren afhankelijk van het specifieke framework of de gebruikte bibliotheek. Hier zijn een paar voorbeelden:

• Angular (ontwikkeld door Google, wereldwijd gebruikt): Angular maakt intensief gebruik van decorators voor het definiëren van componenten, services en directives. De @Component-decorator wordt bijvoorbeeld gebruikt om een UI-component te definiëren met zijn template, stijlen en andere metadata. Dit stelt ontwikkelaars met diverse achtergronden in staat om gemakkelijk complexe gebruikersinterfaces te creëren en te beheren met een gestandaardiseerde aanpak.

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

• NestJS (een Node.js-framework geïnspireerd op Angular, wereldwijd toegepast): NestJS gebruikt decorators voor het definiëren van controllers, routes en modules. De @Controller- en @Get-decorators worden gebruikt om API-eindpunten en hun bijbehorende handlers te definiëren. Dit vereenvoudigt het proces van het bouwen van schaalbare en onderhoudbare server-side applicaties, ongeacht de geografische locatie van de ontwikkelaar.

              
   @Controller('users')
   class UsersController {
   @Get()
   findAll(): string {
   return 'This action returns all users';
   }
   }
   
              
  
                
                  Copy
                
              
            

• MobX (een state management-bibliotheek, veel gebruikt in React-applicaties wereldwijd): MobX gebruikt decorators voor het definiëren van observeerbare eigenschappen en berekende waarden. De @observable- en @computed-decorators volgen automatisch wijzigingen in data en werken de UI dienovereenkomstig bij. Dit helpt ontwikkelaars om responsieve en efficiënte gebruikersinterfaces te bouwen voor een internationaal publiek, wat een soepele gebruikerservaring garandeert, zelfs bij complexe datastromen.

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

Internationalisatieoverwegingen: Bij het gebruik van decorators in projecten die gericht zijn op een wereldwijd publiek, is het belangrijk om rekening te houden met internationalisatie (i18n) en lokalisatie (l10n). Hoewel decorators zelf niet direct i18n/l10n afhandelen, kunnen ze worden gebruikt om het proces te verbeteren door:

• Metadata toevoegen voor Vertaling: Decorators kunnen worden gebruikt om eigenschappen of methoden te markeren die vertaald moeten worden. Deze metadata kan vervolgens worden gebruikt door i18n-bibliotheken om de relevante tekst te extraheren en te vertalen.
• Dynamisch Laden van Vertalingen: Decorators kunnen worden gebruikt om vertalingen dynamisch te laden op basis van de landinstelling van de gebruiker. Dit zorgt ervoor dat de applicatie wordt weergegeven in de voorkeurstaal van de gebruiker, ongeacht hun locatie.
• Opmaak van Datums en Getallen: Decorators kunnen worden gebruikt om datums en getallen op te maken volgens de landinstelling van de gebruiker. Dit zorgt ervoor dat datums en getallen in een cultureel passend formaat worden weergegeven.

Stel je bijvoorbeeld een decorator @Translatable voor die een eigenschap markeert als te vertalen. Een i18n-bibliotheek zou dan de codebase kunnen scannen, alle eigenschappen gemarkeerd met @Translatable kunnen vinden en de tekst voor vertaling kunnen extraheren. Na de vertaling kan de bibliotheek de originele tekst vervangen door de vertaalde versie op basis van de landinstelling van de gebruiker. Deze aanpak bevordert een meer georganiseerde en onderhoudbare i18n/l10n-workflow, vooral in grote en complexe applicaties.

De Huidige Status van het Voorstel en Browserondersteuning

Het JavaScript Decorators-voorstel bevindt zich momenteel in Stage 3 van het TC39-standaardisatieproces. Dit betekent dat het voorstel relatief stabiel is en waarschijnlijk zal worden opgenomen in een toekomstige ECMAScript-specificatie.

Hoewel de native browserondersteuning voor decorators nog beperkt is, kunnen ze in de meeste moderne JavaScript-projecten worden gebruikt met behulp van transpilers zoals Babel of de TypeScript-compiler. Deze tools transformeren de decorator-syntaxis naar standaard JavaScript-code die in elke browser of Node.js-omgeving kan worden uitgevoerd.

Gebruik van Babel: Om decorators met Babel te gebruiken, moet u de @babel/plugin-proposal-decorators-plugin installeren en configureren in uw Babel-configuratiebestand (.babelrc of babel.config.js). U zult waarschijnlijk ook @babel/plugin-proposal-class-properties nodig hebben.

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

              
                Copy
              
            
          

Gebruik van TypeScript: TypeScript heeft ingebouwde ondersteuning voor decorators. U moet de experimentalDecorators-compileroptie inschakelen in uw tsconfig.json-bestand.

            
 // tsconfig.json
 {
 "compilerOptions": {
 "target": "es5",
 "experimentalDecorators": true,
 "emitDecoratorMetadata": true,  // Optional, but useful for dependency injection
 }
 }
 
            

              
                Copy
              
            
          

Let op de optie `emitDecoratorMetadata`. Deze werkt samen met bibliotheken zoals `reflect-metadata` om dependency injection via decorators mogelijk te maken.

Potentiële Impact en Toekomstige Richtingen

Het JavaScript Decorators-voorstel heeft het potentieel om de manier waarop we JavaScript-code schrijven aanzienlijk te beïnvloeden. Door een meer declaratieve en expressieve manier te bieden om functionaliteit toe te voegen aan klassen, methoden en eigenschappen, kunnen decorators de leesbaarheid, onderhoudbaarheid en herbruikbaarheid van code verbeteren.

Naarmate het voorstel vordert in het standaardisatieproces en breder wordt toegepast, kunnen we verwachten dat meer frameworks en bibliotheken decorators zullen omarmen om een meer intuïtieve en krachtige ontwikkelaarservaring te bieden.

Bovendien kunnen de metadatamogelijkheden van decorators nieuwe kansen creëren voor tooling en code-analyse. Linters en code-editors kunnen bijvoorbeeld decoratormetadata gebruiken om nauwkeurigere en relevantere suggesties en foutmeldingen te geven.

Conclusie

JavaScript Decorators zijn een krachtige en veelbelovende functie die de moderne JavaScript-ontwikkeling aanzienlijk kan verbeteren. Door hun syntaxis, mogelijkheden en potentiële use-cases te begrijpen, kunnen ontwikkelaars decorators gebruiken om meer onderhoudbare, leesbare en herbruikbare code te schrijven. Hoewel de native browserondersteuning nog in ontwikkeling is, maken transpilers zoals Babel en TypeScript het mogelijk om decorators vandaag de dag in de meeste JavaScript-projecten te gebruiken. Naarmate het voorstel richting standaardisatie beweegt en breder wordt toegepast, zullen decorators waarschijnlijk een essentieel hulpmiddel worden in het arsenaal van de JavaScript-ontwikkelaar.

Verder Leren

• TC39 Decorators Proposal
• TypeScript Decorators
• Babel Plugin Proposal Decorators
• reflect-metadata