JavaScript Decorators-forslaget: Metodeforbedring og metadata-annotering

JavaScript, som et dynamisk og utviklende språk, søker kontinuerlig måter å forbedre kodens lesbarhet, vedlikeholdbarhet og utvidbarhet. En av de mest etterlengtede funksjonene som tar sikte på å adressere disse aspektene, er Decorators-forslaget. Denne artikkelen gir en omfattende oversikt over JavaScript Decorators, og utforsker deres syntaks, kapabiliteter og potensielle innvirkning på moderne JavaScript-utvikling. Selv om det for øyeblikket er et Stage 3-forslag, er decorators allerede mye brukt i rammeverk som Angular og blir i økende grad tatt i bruk via transpilere som Babel. Dette gjør det avgjørende for enhver moderne JavaScript-utvikler å forstå dem.

Hva er JavaScript Decorators?

Decorators er et designmønster lånt fra andre språk som Python og Java. I hovedsak er de en spesiell type erklæring som kan festes til en klasse, metode, accessor (tilgangsmetode), egenskap eller parameter. Decorators bruker @expression-syntaksen, der expression må evaluere til en funksjon som vil bli kalt ved kjøretid med informasjon om den dekorerte erklæringen.

Tenk på decorators som en måte å legge til ekstra funksjonalitet eller metadata til eksisterende kode uten å endre den direkte. Dette fremmer en mer deklarativ og vedlikeholdbar kodebase.

Grunnleggende syntaks og bruk

En enkel decorator er en funksjon som tar ett, to eller tre argumenter avhengig av hva den dekorerer:

• For en klassedekorator er argumentet konstruktøren til klassen.
• For en metode- eller accessor-dekorator er argumentene målobjektet (enten klasseprototypen eller klassekonstruktøren for statiske medlemmer), egenskapsnøkkelen (navnet på metoden eller accessoren) og egenskapsbeskrivelsen (property descriptor).
• For en egenskapsdekorator er argumentene målobjektet og egenskapsnøkkelen.
• For en parameterdekorator er argumentene målobjektet, egenskapsnøkkelen og indeksen til parameteren i funksjonens parameterliste.

Klassedekoratorer

En klassedekorator brukes på klassekonstruktøren. Den kan brukes til å observere, modifisere eller erstatte en klassedefinisjon. Et vanlig bruksområde er å registrere en klasse i et rammeverk eller bibliotek.

Eksempel: Logging av klasseinstansieringer

            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 dette eksempelet modifiserer logClass-dekoratoren MyClass-konstruktøren til å logge en melding hver gang en ny instans opprettes.

Metodedekoratorer

Metodedekoratorer brukes på metoder i en klasse. De kan brukes til å observere, modifisere eller erstatte en metodes oppførsel. Dette er nyttig for ting som logging av metodekall, validering av argumenter eller implementering av caching.

Eksempel: Logging av metodekall

            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-dekoratoren logger argumentene og returverdien til add-metoden.

Accessor-dekoratorer

Accessor-dekoratorer ligner på metodedekoratorer, men brukes på 'getter'- eller 'setter'-metoder. De kan brukes til å kontrollere tilgang til egenskaper eller legge til valideringslogikk.

Eksempel: Validering av setter-verdier

            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-dekoratoren sikrer at celsius-setteren kun aksepterer ikke-negative verdier.

Egenskapsdekoratorer

Egenskapsdekoratorer brukes på klasseegenskaper. De kan brukes til å definere metadata om egenskapen eller til å modifisere dens oppførsel.

Eksempel: Definere en påkrevd 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-dekoratoren markerer name-egenskapen som påkrevd. Konstruktøren sjekker deretter om alle påkrevde egenskaper er til stede.

Parameterdekoratorer

Parameterdekoratorer brukes på funksjonsparametere. De kan brukes til å legge til metadata om parameteren eller til å modifisere dens oppførsel. De er mindre vanlige enn andre typer decorators.

Eksempel: Injeksjon av avhengigheter (Dependency Injection)

            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 dette eksempelet bruker vi reflect-metadata (en vanlig praksis når man jobber med avhengighetsinjeksjon i JavaScript/TypeScript). @Inject-dekoratoren forteller UserService-konstruktøren at den skal injisere en instans av DatabaseService. Selv om eksempelet over ikke kan kjøres fullt ut uten ytterligere oppsett, demonstrerer det den tiltenkte effekten.

Bruksområder og fordeler

Decorators tilbyr en rekke fordeler og kan brukes i ulike sammenhenger:

• Metadata-annotering: Decorators kan brukes til å feste metadata til klasser, metoder og egenskaper. Denne metadataen kan brukes av rammeverk og biblioteker for å tilby ekstra funksjonalitet, som avhengighetsinjeksjon, ruting og validering.
• Aspektorientert programmering (AOP): Decorators kan implementere AOP-konsepter som logging, sikkerhet og transaksjonsstyring ved å pakke inn metoder med ekstra oppførsel.
• Kode-gjenbruk: Decorators fremmer gjenbruk av kode ved å la deg trekke ut felles funksjonalitet i gjenbrukbare decorators.
• Forbedret lesbarhet: Decorators gjør koden mer lesbar og deklarativ ved å separere ansvarsområder (separation of concerns) og redusere standardkode (boilerplate).
• Rammeverksintegrasjon: Decorators er mye brukt i populære JavaScript-rammeverk som Angular, NestJS og MobX for å tilby en mer deklarativ og uttrykksfull måte å definere komponenter, tjenester og andre rammeverkspesifikke konsepter på.

Eksempler fra den virkelige verden og internasjonale hensyn

Selv om kjernekonseptene i decorators er de samme på tvers av ulike programmeringskontekster, kan bruken variere basert på det spesifikke rammeverket eller biblioteket som brukes. Her er noen eksempler:

• Angular (Utviklet av Google, brukt globalt): Angular benytter i stor grad decorators for å definere komponenter, tjenester og direktiver. For eksempel brukes @Component-dekoratoren til å definere en UI-komponent med sin mal, stiler og annen metadata. Dette lar utviklere fra ulike bakgrunner enkelt lage og administrere komplekse brukergrensesnitt ved hjelp av en standardisert tilnærming.

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

• NestJS (Et Node.js-rammeverk inspirert av Angular, globalt adoptert): NestJS bruker decorators for å definere kontrollere, ruter og moduler. @Controller- og @Get-dekoratorene brukes til å definere API-endepunkter og deres tilsvarende håndterere. Dette forenkler prosessen med å bygge skalerbare og vedlikeholdbare server-side applikasjoner, uavhengig av utviklerens geografiske plassering.

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

• MobX (Et state management-bibliotek, mye brukt i React-applikasjoner globalt): MobX bruker decorators for å definere observerbare egenskaper og beregnede verdier. @observable- og @computed-dekoratorene sporer automatisk endringer i data og oppdaterer brukergrensesnittet deretter. Dette hjelper utviklere med å bygge responsive og effektive brukergrensesnitt for internasjonale publikum, og sikrer en jevn brukeropplevelse selv med komplekse dataflyter.

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

Hensyn til internasjonalisering: Når man bruker decorators i prosjekter rettet mot et globalt publikum, er det viktig å vurdere internasjonalisering (i18n) og lokalisering (l10n). Selv om decorators i seg selv ikke direkte håndterer i18n/l10n, kan de brukes til å forbedre prosessen ved å:

• Legge til metadata for oversettelse: Decorators kan brukes til å merke egenskaper eller metoder som må oversettes. Denne metadataen kan deretter brukes av i18n-biblioteker for å trekke ut og oversette den relevante teksten.
• Dynamisk lasting av oversettelser: Decorators kan brukes til å laste oversettelser dynamisk basert på brukerens locale (språk- og regioninnstillinger). Dette sikrer at applikasjonen vises på brukerens foretrukne språk, uavhengig av deres plassering.
• Formatering av datoer og tall: Decorators kan brukes til å formatere datoer og tall i henhold til brukerens locale. Dette sikrer at datoer og tall vises i et kulturelt passende format.

For eksempel, se for deg en decorator @Translatable som markerer en egenskap som oversettbar. Et i18n-bibliotek kan da skanne kodebasen, finne alle egenskaper merket med @Translatable, og trekke ut teksten for oversettelse. Etter oversettelsen kan biblioteket erstatte den originale teksten med den oversatte versjonen basert på brukerens locale. Denne tilnærmingen fremmer en mer organisert og vedlikeholdbar arbeidsflyt for i18n/l10n, spesielt i store og komplekse applikasjoner.

Nåværende status for forslaget og nettleserstøtte

JavaScript Decorators-forslaget er for øyeblikket på Stage 3 i TC39-standardiseringsprosessen. Dette betyr at forslaget er relativt stabilt og sannsynligvis vil bli inkludert i en fremtidig ECMAScript-spesifikasjon.

Selv om innebygd nettleserstøtte for decorators fortsatt er begrenset, kan de brukes i de fleste moderne JavaScript-prosjekter ved å bruke transpilere som Babel eller TypeScript-kompilatoren. Disse verktøyene transformerer decorator-syntaks til standard JavaScript-kode som kan kjøres i enhver nettleser eller Node.js-miljø.

Bruk av Babel: For å bruke decorators med Babel, må du installere @babel/plugin-proposal-decorators-pluginen og konfigurere den i Babel-konfigurasjonsfilen din (.babelrc eller babel.config.js). Du vil sannsynligvis også trenge @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
              
            
          

Bruk av TypeScript: TypeScript har innebygd støtte for decorators. Du må aktivere experimentalDecorators-kompilatoralternativet i din tsconfig.json-fil.

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

              
                Copy
              
            
          

Legg merke til emitDecoratorMetadata-alternativet. Dette fungerer sammen med biblioteker som reflect-metadata for å muliggjøre avhengighetsinjeksjon via decorators.

Potensiell innvirkning og fremtidige retninger

JavaScript Decorators-forslaget har potensial til å betydelig påvirke måten vi skriver JavaScript-kode på. Ved å tilby en mer deklarativ og uttrykksfull måte å legge til funksjonalitet i klasser, metoder og egenskaper, kan decorators forbedre kodens lesbarhet, vedlikeholdbarhet og gjenbrukbarhet.

Etter hvert som forslaget går gjennom standardiseringsprosessen og får bredere aksept, kan vi forvente å se flere rammeverk og biblioteker omfavne decorators for å tilby en mer intuitiv og kraftig utvikleropplevelse.

Videre kan metadata-kapabilitetene til decorators muliggjøre nye muligheter for verktøy og kodeanalyse. For eksempel kan lintere og koderedigeringsprogrammer bruke decorator-metadata for å gi mer nøyaktige og relevante forslag og feilmeldinger.

Konklusjon

JavaScript Decorators er en kraftig og lovende funksjon som kan forbedre moderne JavaScript-utvikling betydelig. Ved å forstå deres syntaks, kapabiliteter og potensielle bruksområder, kan utviklere utnytte decorators til å skrive mer vedlikeholdbar, lesbar og gjenbrukbar kode. Selv om innebygd nettleserstøtte fortsatt er under utvikling, gjør transpilere som Babel og TypeScript det mulig å bruke decorators i de fleste JavaScript-prosjekter i dag. Etter hvert som forslaget beveger seg mot standardisering og får bredere aksept, vil decorators sannsynligvis bli et essensielt verktøy i JavaScript-utviklerens arsenal.

Videre lesing

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