JavaScript-Decorators-Proposal: Methodenerweiterung und Metadaten-Annotation

JavaScript als dynamische und sich ständig weiterentwickelnde Sprache sucht kontinuierlich nach Wegen, die Lesbarkeit, Wartbarkeit und Erweiterbarkeit von Code zu verbessern. Eines der am meisten erwarteten Features, das auf diese Aspekte abzielt, ist der Decorators-Proposal. Dieser Artikel bietet einen umfassenden Überblick über JavaScript-Decorators und beleuchtet ihre Syntax, Fähigkeiten und potenziellen Auswirkungen auf die moderne JavaScript-Entwicklung. Obwohl es sich derzeit um einen Stage-3-Proposal handelt, werden Decorators bereits in Frameworks wie Angular weit verbreitet eingesetzt und zunehmend über Transpiler wie Babel adaptiert. Dies macht ihr Verständnis für jeden modernen JavaScript-Entwickler unerlässlich.

Was sind JavaScript-Decorators?

Decorators sind ein Entwurfsmuster, das aus anderen Sprachen wie Python und Java übernommen wurde. Im Wesentlichen sind sie eine spezielle Art von Deklaration, die an eine Klasse, Methode, einen Accessor, eine Eigenschaft oder einen Parameter angehängt werden kann. Decorators verwenden die @expression-Syntax, wobei expression zu einer Funktion ausgewertet werden muss, die zur Laufzeit mit Informationen über die dekorierte Deklaration aufgerufen wird.

Stellen Sie sich Decorators als eine Möglichkeit vor, zusätzliche Funktionalität oder Metadaten zu bestehendem Code hinzuzufügen, ohne ihn direkt zu ändern. Dies fördert eine deklarativere und wartbarere Codebasis.

Grundlegende Syntax und Verwendung

Ein einfacher Decorator ist eine Funktion, die je nachdem, was sie dekoriert, ein, zwei oder drei Argumente entgegennimmt:

• Bei einem Klassen-Decorator ist das Argument der Konstruktor der Klasse.
• Bei einem Methoden- oder Accessor-Decorator sind die Argumente das Zielobjekt (entweder der Klassenprototyp oder der Klassenkonstruktor für statische Member), der Eigenschaftsschlüssel (der Name der Methode oder des Accessors) und der Eigenschaftsdeskriptor.
• Bei einem Eigenschafts-Decorator sind die Argumente das Zielobjekt und der Eigenschaftsschlüssel.
• Bei einem Parameter-Decorator sind die Argumente das Zielobjekt, der Eigenschaftsschlüssel und der Index des Parameters in der Parameterliste der Funktion.

Klassen-Decorators

Ein Klassen-Decorator wird auf den Klassenkonstruktor angewendet. Er kann verwendet werden, um eine Klassendefinition zu beobachten, zu ändern oder zu ersetzen. Ein häufiger Anwendungsfall ist die Registrierung einer Klasse innerhalb eines Frameworks oder einer Bibliothek.

Beispiel: Protokollierung von Klasseninstanziierungen

            function logClass(constructor: Function) {
 return class extends constructor {
 constructor(...args: any[]) {
 super(...args);
 console.log(`Neue Instanz von ${constructor.name} erstellt.`);
 }
 };
}

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

const instance = new MyClass("Hallo, Decorators!"); // Ausgabe: Neue Instanz von MyClass erstellt.
            

              
                Copy
              
            
          

In diesem Beispiel modifiziert der logClass-Decorator den MyClass-Konstruktor, um bei jeder Erstellung einer neuen Instanz eine Nachricht zu protokollieren.

Methoden-Decorators

Methoden-Decorators werden auf Methoden innerhalb einer Klasse angewendet. Sie können verwendet werden, um das Verhalten einer Methode zu beobachten, zu ändern oder zu ersetzen. Dies ist nützlich für Dinge wie die Protokollierung von Methodenaufrufen, die Validierung von Argumenten oder die Implementierung von Caching.

Beispiel: Protokollierung von Methodenaufrufen

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

 descriptor.value = function (...args: any[]) {
 console.log(`Methode ${propertyKey} wird mit Argumenten aufgerufen: ${JSON.stringify(args)}`);
 const result = originalMethod.apply(this, args);
 console.log(`Methode ${propertyKey} gab zurück: ${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); // Ausgabe: Methode add wird mit Argumenten aufgerufen: [5,3]
 // Ausgabe: Methode add gab zurück: 8
            

              
                Copy
              
            
          

Der logMethod-Decorator protokolliert die Argumente und den Rückgabewert der add-Methode.

Accessor-Decorators

Accessor-Decorators ähneln Methoden-Decorators, werden aber auf Getter- oder Setter-Methoden angewendet. Sie können verwendet werden, um den Zugriff auf Eigenschaften zu steuern oder Validierungslogik hinzuzufügen.

Beispiel: Validierung von Setter-Werten

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

 descriptor.set = function (value: number) {
 if (value < 0) {
 throw new Error("Der Wert muss nicht-negativ sein.");
 }
 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; // Löst einen Fehler aus
            

              
                Copy
              
            
          

Der validate-Decorator stellt sicher, dass der celsius-Setter nur nicht-negative Werte akzeptiert.

Eigenschafts-Decorators

Eigenschafts-Decorators werden auf Klasseneigenschaften angewendet. Sie können verwendet werden, um Metadaten über die Eigenschaft zu definieren oder ihr Verhalten zu ändern.

Beispiel: Definition einer erforderlichen Eigenschaft

            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(`Fehlende erforderliche Eigenschaft: ${property}`);
 }
 });
 }
}

// const user = new UserProfile({}); // Löst einen Fehler aus: Fehlende erforderliche Eigenschaft: name
const user = new UserProfile({ name: "John Doe" }); // OK
            

              
                Copy
              
            
          

Der required-Decorator markiert die name-Eigenschaft als erforderlich. Der Konstruktor prüft dann, ob alle erforderlichen Eigenschaften vorhanden sind.

Parameter-Decorators

Parameter-Decorators werden auf Funktionsparameter angewendet. Sie können verwendet werden, um Metadaten über den Parameter hinzuzufügen oder sein Verhalten zu ändern. Sie sind seltener als andere Arten von Decorators.

Beispiel: Injektion von Abhängigkeiten

            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("Verbinde mit der Datenbank...");
 }
}

class UserService {
 private databaseService: DatabaseService;

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

 getUser(id: number) {
 this.databaseService.connect();
 console.log(`Rufe Benutzer mit ID ab: ${id}`);
 }
}

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

              
                Copy
              
            
          

In diesem Beispiel verwenden wir reflect-metadata (eine gängige Praxis bei der Arbeit mit Dependency Injection in JavaScript/TypeScript). Der @Inject-Decorator weist den UserService-Konstruktor an, eine Instanz des DatabaseService zu injizieren. Obwohl das obige Beispiel ohne weitere Einrichtung nicht vollständig ausgeführt werden kann, demonstriert es den beabsichtigten Effekt.

Anwendungsfälle und Vorteile

Decorators bieten eine Reihe von Vorteilen und können auf verschiedene Anwendungsfälle angewendet werden:

• Metadaten-Annotation: Decorators können verwendet werden, um Metadaten an Klassen, Methoden und Eigenschaften anzuhängen. Diese Metadaten können von Frameworks und Bibliotheken verwendet werden, um zusätzliche Funktionalität wie Dependency Injection, Routing und Validierung bereitzustellen.
• Aspektorientierte Programmierung (AOP): Decorators können AOP-Konzepte wie Protokollierung, Sicherheit und Transaktionsmanagement implementieren, indem sie Methoden mit zusätzlichem Verhalten umschließen.
• Wiederverwendbarkeit von Code: Decorators fördern die Wiederverwendbarkeit von Code, indem sie es ermöglichen, gemeinsame Funktionalität in wiederverwendbare Decorators auszulagern.
• Verbesserte Lesbarkeit: Decorators machen Code lesbarer und deklarativer, indem sie Zuständigkeiten trennen und Boilerplate-Code reduzieren.
• Framework-Integration: Decorators werden in populären JavaScript-Frameworks wie Angular, NestJS und MobX häufig verwendet, um eine deklarativere und ausdrucksstärkere Art zur Definition von Komponenten, Services und anderen frameworks-spezifischen Konzepten bereitzustellen.

Praxisbeispiele und internationale Überlegungen

Obwohl die Kernkonzepte von Decorators in verschiedenen Programmierkontexten gleich bleiben, kann ihre Anwendung je nach verwendetem Framework oder Bibliothek variieren. Hier sind einige Beispiele:

• Angular (entwickelt von Google, weltweit im Einsatz): Angular nutzt Decorators intensiv zur Definition von Komponenten, Services und Direktiven. Beispielsweise wird der @Component-Decorator verwendet, um eine UI-Komponente mit ihrer Vorlage, Stilen und anderen Metadaten zu definieren. Dies ermöglicht Entwicklern mit unterschiedlichem Hintergrund, komplexe Benutzeroberflächen einfach mit einem standardisierten Ansatz zu erstellen und zu verwalten.

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

• NestJS (Ein von Angular inspiriertes Node.js-Framework, weltweit adaptiert): NestJS verwendet Decorators zur Definition von Controllern, Routen und Modulen. Die Decorators @Controller und @Get werden verwendet, um API-Endpunkte und ihre entsprechenden Handler zu definieren. Dies vereinfacht den Prozess des Aufbaus skalierbarer und wartbarer serverseitiger Anwendungen, unabhängig vom geografischen Standort des Entwicklers.

              
   @Controller('users')
   class UsersController {
   @Get()
   findAll(): string {
   return 'Diese Aktion gibt alle Benutzer zurück';
   }
   }
   
              
  
                
                  Copy
                
              
            

• MobX (Eine Zustandsverwaltungsbibliothek, weit verbreitet in React-Anwendungen weltweit): MobX verwendet Decorators zur Definition von beobachtbaren Eigenschaften und berechneten Werten. Die Decorators @observable und @computed verfolgen automatisch Datenänderungen und aktualisieren die Benutzeroberfläche entsprechend. Dies hilft Entwicklern, reaktionsschnelle und effiziente Benutzeroberflächen für ein internationales Publikum zu erstellen und sorgt auch bei komplexen Datenflüssen für eine reibungslose Benutzererfahrung.

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

Überlegungen zur Internationalisierung: Bei der Verwendung von Decorators in Projekten, die auf ein globales Publikum abzielen, ist es wichtig, Internationalisierung (i18n) und Lokalisierung (l10n) zu berücksichtigen. Obwohl Decorators selbst i18n/l10n nicht direkt handhaben, können sie verwendet werden, um den Prozess zu verbessern, indem sie:

• Metadaten für die Übersetzung hinzufügen: Decorators können verwendet werden, um Eigenschaften oder Methoden zu kennzeichnen, die übersetzt werden müssen. Diese Metadaten können dann von i18n-Bibliotheken verwendet werden, um den relevanten Text zu extrahieren und zu übersetzen.
• Übersetzungen dynamisch laden: Decorators können verwendet werden, um Übersetzungen basierend auf der Ländereinstellung des Benutzers dynamisch zu laden. Dies stellt sicher, dass die Anwendung in der bevorzugten Sprache des Benutzers angezeigt wird, unabhängig von seinem Standort.
• Daten und Zahlen formatieren: Decorators können verwendet werden, um Daten und Zahlen entsprechend der Ländereinstellung des Benutzers zu formatieren. Dies stellt sicher, dass Daten und Zahlen in einem kulturell angemessenen Format angezeigt werden.

Stellen Sie sich zum Beispiel einen Decorator @Translatable vor, der eine Eigenschaft als übersetzungsbedürftig markiert. Eine i18n-Bibliothek könnte dann den Code durchsuchen, alle mit @Translatable markierten Eigenschaften finden und den Text zur Übersetzung extrahieren. Nach der Übersetzung kann die Bibliothek den Originaltext durch die übersetzte Version ersetzen, basierend auf der Ländereinstellung des Benutzers. Dieser Ansatz fördert einen organisierteren und wartbareren i18n/l10n-Workflow, insbesondere in großen und komplexen Anwendungen.

Aktueller Stand des Proposals und Browser-Unterstützung

Der JavaScript-Decorators-Proposal befindet sich derzeit in Stage 3 des TC39-Standardisierungsprozesses. Das bedeutet, dass der Vorschlag relativ stabil ist und wahrscheinlich in eine zukünftige ECMAScript-Spezifikation aufgenommen wird.

Obwohl die native Browser-Unterstützung für Decorators noch begrenzt ist, können sie in den meisten modernen JavaScript-Projekten durch die Verwendung von Transpilern wie Babel oder dem TypeScript-Compiler eingesetzt werden. Diese Werkzeuge wandeln die Decorator-Syntax in Standard-JavaScript-Code um, der in jedem Browser oder jeder Node.js-Umgebung ausgeführt werden kann.

Verwendung mit Babel: Um Decorators mit Babel zu verwenden, müssen Sie das Plugin @babel/plugin-proposal-decorators installieren und es in Ihrer Babel-Konfigurationsdatei (.babelrc oder babel.config.js) konfigurieren. Wahrscheinlich benötigen Sie auch @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
              
            
          

Verwendung mit TypeScript: TypeScript hat eingebaute Unterstützung für Decorators. Sie müssen die Compiler-Option experimentalDecorators in Ihrer tsconfig.json-Datei aktivieren.

            
 // tsconfig.json
 {
 "compilerOptions": {
 "target": "es5",
 "experimentalDecorators": true,
 "emitDecoratorMetadata": true,  // Optional, aber nützlich für Dependency Injection
 }
 }
 
            

              
                Copy
              
            
          

Beachten Sie die Option `emitDecoratorMetadata`. Diese arbeitet mit Bibliotheken wie `reflect-metadata` zusammen, um Dependency Injection über Decorators zu ermöglichen.

Potenzielle Auswirkungen und zukünftige Richtungen

Der JavaScript-Decorators-Proposal hat das Potenzial, die Art und Weise, wie wir JavaScript-Code schreiben, erheblich zu beeinflussen. Indem sie eine deklarativere und ausdrucksstärkere Möglichkeit bieten, Funktionalität zu Klassen, Methoden und Eigenschaften hinzuzufügen, können Decorators die Lesbarkeit, Wartbarkeit und Wiederverwendbarkeit von Code verbessern.

Während der Vorschlag den Standardisierungsprozess durchläuft und eine breitere Akzeptanz findet, können wir erwarten, dass mehr Frameworks und Bibliotheken Decorators einsetzen, um eine intuitivere und leistungsfähigere Entwicklererfahrung zu bieten.

Darüber hinaus können die Metadaten-Fähigkeiten von Decorators neue Möglichkeiten für Tooling und Code-Analyse eröffnen. Zum Beispiel können Linter und Code-Editoren Decorator-Metadaten verwenden, um genauere und relevantere Vorschläge und Fehlermeldungen bereitzustellen.

Fazit

JavaScript-Decorators sind ein leistungsstarkes und vielversprechendes Feature, das die moderne JavaScript-Entwicklung erheblich verbessern kann. Durch das Verständnis ihrer Syntax, Fähigkeiten und potenziellen Anwendungsfälle können Entwickler Decorators nutzen, um wartbareren, lesbareren und wiederverwendbareren Code zu schreiben. Obwohl die native Browser-Unterstützung noch in der Entwicklung ist, ermöglichen Transpiler wie Babel und TypeScript den Einsatz von Decorators in den meisten heutigen JavaScript-Projekten. Da der Vorschlag in Richtung Standardisierung voranschreitet und eine breitere Akzeptanz findet, werden Decorators wahrscheinlich zu einem unverzichtbaren Werkzeug im Arsenal eines jeden JavaScript-Entwicklers.

Weiterführende Informationen

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