JavaScript Decorators-förslaget: Metodförbättring och Metadata-annotering

JavaScript, som ett dynamiskt och ständigt utvecklande språk, söker kontinuerligt sätt att förbättra kodens läsbarhet, underhållbarhet och utbyggbarhet. En av de mest efterlängtade funktionerna som syftar till att hantera dessa aspekter är Decorators-förslaget. Denna artikel ger en omfattande översikt av JavaScript Decorators, utforskar deras syntax, kapabiliteter och potentiella inverkan på modern JavaScript-utveckling. Trots att det för närvarande är ett Stage 3-förslag, används decorators redan i stor utsträckning i ramverk som Angular och anammas alltmer via transpilers som Babel. Detta gör det avgörande för alla moderna JavaScript-utvecklare att förstå dem.

Vad är JavaScript Decorators?

Decorators är ett designmönster lånat från andra språk som Python och Java. I grund och botten är de en speciell typ av deklaration som kan kopplas till en klass, metod, accessor, egenskap eller parameter. Decorators använder syntaxen @expression, där expression måste utvärderas till en funktion som kommer att anropas vid körning med information om den dekorerade deklarationen.

Tänk på decorators som ett sätt att lägga till extra funktionalitet eller metadata till befintlig kod utan att direkt ändra den. Detta främjar en mer deklarativ och underhållbar kodbas.

Grundläggande syntax och användning

En enkel decorator är en funktion som tar en, två eller tre argument beroende på vad den dekorerar:

• För en klass-decorator är argumentet klassens konstruktor.
• För en metod- eller accessor-decorator är argumenten målobjektet (antingen klassens prototyp eller klassens konstruktor för statiska medlemmar), egenskapsnyckeln (namnet på metoden eller accessorn) och egenskapsdeskriptorn.
• För en egenskaps-decorator är argumenten målobjektet och egenskapsnyckeln.
• För en parameter-decorator är argumenten målobjektet, egenskapsnyckeln och parameterns index i funktionens parameterlista.

Klass-decorators

En klass-decorator tillämpas på klassens konstruktor. Den kan användas för att observera, modifiera eller ersätta en klassdefinition. Ett vanligt användningsfall är att registrera en klass inom ett ramverk eller bibliotek.

Exempel: Logga klassinstansieringar

            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
              
            
          

I detta exempel modifierar logClass-decoratorn MyClass-konstruktorn för att logga ett meddelande varje gång en ny instans skapas.

Metod-decorators

Metod-decorators tillämpas på metoder inom en klass. De kan användas för att observera, modifiera eller ersätta en metods beteende. Detta är användbart för saker som att logga metodanrop, validera argument eller implementera cachning.

Exempel: Logga metodanrop

            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
              
            
          

logMethod-decoratorn loggar argumenten och returvärdet för add-metoden.

Accessor-decorators

Accessor-decorators liknar metod-decorators men tillämpas på getter- eller setter-metoder. De kan användas för att kontrollera åtkomst till egenskaper eller lägga till valideringslogik.

Exempel: Validera setter-värden

            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
              
            
          

validate-decoratorn säkerställer att celsius-settern endast accepterar icke-negativa värden.

Egenskaps-decorators

Egenskaps-decorators tillämpas på klassegenskaper. De kan användas för att definiera metadata om egenskapen eller för att modifiera dess beteende.

Exempel: Definiera en obligatorisk egenskap

            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
              
            
          

required-decoratorn markerar name-egenskapen som obligatorisk. Konstruktorn kontrollerar sedan om alla obligatoriska egenskaper finns.

Parameter-decorators

Parameter-decorators tillämpas på funktionsparametrar. De kan användas för att lägga till metadata om parametern eller för att modifiera dess beteende. De är mindre vanliga än andra typer av decorators.

Exempel: Injicera beroenden

            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
              
            
          

I det här exemplet använder vi reflect-metadata (en vanlig praxis när man arbetar med dependency injection i JavaScript/TypeScript). @Inject-decoratorn talar om för UserService-konstruktorn att injicera en instans av DatabaseService. Även om exemplet ovan inte kan köras fullt ut utan ytterligare konfiguration, demonstrerar det den avsedda effekten.

Användningsfall och fördelar

Decorators erbjuder en rad fördelar och kan tillämpas på olika användningsfall:

• Metadata-annotering: Decorators kan användas för att bifoga metadata till klasser, metoder och egenskaper. Denna metadata kan användas av ramverk och bibliotek för att tillhandahålla ytterligare funktionalitet, såsom dependency injection, routing och validering.
• Aspektorienterad programmering (AOP): Decorators kan implementera AOP-koncept som loggning, säkerhet och transaktionshantering genom att omsluta metoder med ytterligare beteende.
• Återanvändbarhet av kod: Decorators främjar återanvändbarhet av kod genom att låta dig extrahera vanlig funktionalitet till återanvändbara decorators.
• Förbättrad läsbarhet: Decorators gör koden mer läsbar och deklarativ genom att separera ansvarsområden och minska boilerplate-kod.
• Ramverksintegration: Decorators används i stor utsträckning i populära JavaScript-ramverk som Angular, NestJS och MobX för att erbjuda ett mer deklarativt och uttrycksfullt sätt att definiera komponenter, tjänster och andra ramverksspecifika koncept.

Verkliga exempel och internationella överväganden

Medan kärnkoncepten för decorators förblir desamma i olika programmeringskontexter, kan deras tillämpning variera beroende på det specifika ramverket eller biblioteket som används. Här är några exempel:

• Angular (Utvecklat av Google, används globalt): Angular använder i stor utsträckning decorators för att definiera komponenter, tjänster och direktiv. Till exempel används @Component-decoratorn för att definiera en UI-komponent med dess mall, stilar och annan metadata. Detta gör det möjligt för utvecklare med olika bakgrunder att enkelt skapa och hantera komplexa användargränssnitt med en standardiserad metod.

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

• NestJS (Ett Node.js-ramverk inspirerat av Angular, globalt antaget): NestJS använder decorators för att definiera controllers, routes och moduler. @Controller- och @Get-decorators används för att definiera API-ändpunkter och deras motsvarande hanterare. Detta förenklar processen att bygga skalbara och underhållbara server-side-applikationer, oavsett utvecklarens geografiska plats.

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

• MobX (Ett state management-bibliotek, brett använt i React-applikationer globalt): MobX använder decorators för att definiera observerbara egenskaper och beräknade värden. @observable- och @computed-decorators spårar automatiskt ändringar i data och uppdaterar UI:t därefter. Detta hjälper utvecklare att bygga responsiva och effektiva användargränssnitt för internationella målgrupper, vilket säkerställer en smidig användarupplevelse även med komplexa dataflöden.

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

Internationaliseringsöverväganden: När man använder decorators i projekt som riktar sig till en global publik är det viktigt att överväga internationalisering (i18n) och lokalisering (l10n). Även om decorators i sig inte direkt hanterar i18n/l10n, kan de användas för att förbättra processen genom att:

• Lägga till metadata för översättning: Decorators kan användas för att markera egenskaper eller metoder som behöver översättas. Denna metadata kan sedan användas av i18n-bibliotek för att extrahera och översätta den relevanta texten.
• Dynamiskt ladda översättningar: Decorators kan användas för att dynamiskt ladda översättningar baserat på användarens locale. Detta säkerställer att applikationen visas på användarens föredragna språk, oavsett deras plats.
• Formatera datum och siffror: Decorators kan användas för att formatera datum och siffror enligt användarens locale. Detta säkerställer att datum och siffror visas i ett kulturellt lämpligt format.

Till exempel, tänk dig en decorator @Translatable som markerar en egenskap som översättningsbar. Ett i18n-bibliotek skulle då kunna skanna kodbasen, hitta alla egenskaper markerade med @Translatable och extrahera texten för översättning. Efter översättning kan biblioteket ersätta den ursprungliga texten med den översatta versionen baserat på användarens locale. Detta tillvägagångssätt främjar ett mer organiserat och underhållbart i18n/l10n-arbetsflöde, särskilt i stora och komplexa applikationer.

Förslagets nuvarande status och webbläsarstöd

JavaScript Decorators-förslaget är för närvarande på Stage 3 i TC39:s standardiseringsprocess. Det betyder att förslaget är relativt stabilt och sannolikt kommer att inkluderas i en framtida ECMAScript-specifikation.

Medan inbyggt webbläsarstöd för decorators fortfarande är begränsat, kan de användas i de flesta moderna JavaScript-projekt genom att använda transpilers som Babel eller TypeScript-kompilatorn. Dessa verktyg omvandlar decorator-syntax till standard JavaScript-kod som kan köras i vilken webbläsare eller Node.js-miljö som helst.

Använda Babel: För att använda decorators med Babel behöver du installera @babel/plugin-proposal-decorators-pluginet och konfigurera det i din Babel-konfigurationsfil (.babelrc eller babel.config.js). Du kommer sannolikt också att behöva @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
              
            
          

Använda TypeScript: TypeScript har inbyggt stöd för decorators. Du behöver aktivera kompileringsalternativet experimentalDecorators i din tsconfig.json-fil.

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

              
                Copy
              
            
          

Notera alternativet emitDecoratorMetadata. Detta fungerar med bibliotek som reflect-metadata för att möjliggöra dependency injection via decorators.

Potentiell inverkan och framtida riktningar

JavaScript Decorators-förslaget har potentialen att avsevärt påverka hur vi skriver JavaScript-kod. Genom att erbjuda ett mer deklarativt och uttrycksfullt sätt att lägga till funktionalitet till klasser, metoder och egenskaper kan decorators förbättra kodens läsbarhet, underhållbarhet och återanvändbarhet.

Allteftersom förslaget fortskrider genom standardiseringsprocessen och får bredare acceptans kan vi förvänta oss att se fler ramverk och bibliotek anamma decorators för att erbjuda en mer intuitiv och kraftfull utvecklarupplevelse.

Dessutom kan metadata-kapaciteten hos decorators möjliggöra nya möjligheter för verktyg och kodanalys. Till exempel kan linters och kodredigerare använda decorator-metadata för att ge mer exakta och relevanta förslag och felmeddelanden.

Slutsats

JavaScript Decorators är en kraftfull och lovande funktion som avsevärt kan förbättra modern JavaScript-utveckling. Genom att förstå deras syntax, kapabiliteter och potentiella användningsfall kan utvecklare utnyttja decorators för att skriva mer underhållbar, läsbar och återanvändbar kod. Medan inbyggt webbläsarstöd fortfarande utvecklas, gör transpilers som Babel och TypeScript det möjligt att använda decorators i de flesta JavaScript-projekt idag. Allteftersom förslaget rör sig mot standardisering och får bredare acceptans kommer decorators sannolikt att bli ett oumbärligt verktyg i JavaScript-utvecklarens arsenal.

Vidare läsning

• TC39 Decorators-förslag
• TypeScript Decorators
• Babel Plugin Proposal Decorators
• reflect-metadata