Modern Full-Stack – Tipps und Lessons Learned aus dem Leben eines Serverless- und Frontend-Enthusiasten

Serverless eröffnet riesige Potenziale für die Frontend-Entwicklung. Als Fullstack-Entwickler berichtet unser Autor Jannik an dieser Stelle regelmäßig von seinen Erfahrungen aus dem Projektalltag, spricht über aktuelle Trends und gibt hilfreiche Tipps rund um AWS, Tailwind und Co.

In der heutigen Folge geht es um die Basics der TypeScript Decorators.

Noch heute sind sie eine Art experimentelles Feature, deren Nutzung aber weit verbreitet ist. Hier zeige ich euch, welche verschiedenen Typen von Decorators es gibt und wie sie funktionieren.

Was sind Decorators? Was für verschiedene Typen gibt es? Wie können sie genutzt werden und wann werden sie ausgeführt?

Inhalt:

1. Was sind Decorators?
2. Wie kann man Decorators aktivieren?
   2.1 Typen von Decorators
   2.2 Überblick über die Signaturen
   2.3 Reihenfolge der Ausführung des Codes
3. Wie helfen Decorator Factories?
4. Zusammensetzung des Decorators
   

    

1. Was sind Decorators?

Decorators sind ein Stage 2 ECMAScript Proposal (Stage 2 hat die Zielsetzung der präzisen Beschreibung der Syntax und Semantik unter Verwendung der formalen Spezifikationssprache).

Deshalb wurde das Feature bisher noch nicht in den ECMAScript Standard mit aufgenommen. TypeScript hat dieses Feature von Decorators (früh) aufgegriffen als ein experimentelles Feature.

Aber was genau ist das? Im ECMAScript Proposal werden sie wie folgt beschrieben:
"Decorators @ decorator sind Funktionen, die sich im Zeitpunkt der Definition auf Class Elemente oder andere JavaScript Syntax Formen beziehen, und diese dabei möglicherweise verpacken oder durch einen neuen Wert ersetzen, der vom Decorator wiedergegeben wird.

Im TypeScript Handbuch werden Decorators wie folgt beschrieben:

• Decorators bieten eine Möglichkeit, sowohl Annotationen als auch eine Meta-programming Syntax für Class Declarations und Members hinzuzufügen.
  
  
• Um es allgemeiner auszudrücken: Man kann das Verhalten bestimmter Teile des Codes ändern, indem man diese mit einem Decorator annotiert. Die Teile des Codes, die mit Decorators annotiert werden können, werden im Abschnitt Typen von Decorators näher erklärt.
  
  
• BONUS: Es gibt sogar ein Decorator Muster, das beschrieben wird im Design Patterns Buch von der Gang of Four. Die Absicht wird wie folgt beschrieben: "Um Verantwortlichkeiten zu individuellen Objekten dynamisch und transparent hinzuzufügen", d.h. ohne Auswirkungen auf andere Objekte.

2. Wie kann man Decorators aktivieren?

Da es sich bei Decorators um ein experiementelles Feature handelt, sind sie standardmäßig deaktiviert. Man muss sie daher zunächst aktivieren, entweder indem man sie in `tsconfig.json` aktiviert oder indem man sie an den TypeScript Compiler (`tsc`) weitergibt. Man sollte auch auf jeden Fall mindestens ES5 als Target nutzen (standardmäßig ist ES3 eingestellt).

Außerdem sollte man sich die damit verbundenen Emit Decorator Metadata Einstellungen anschauen (das ist aber nicht Teil dieses Artikels).

2.1 Typen von Decorators

• Class Decorators
• Property Decorators
• Method Decorators
• Accessor Decorators (Method Decorator angewendet auf die Getter / Setter Funktion)
• Parameter Decorators

Das folgende Beispiel zeigt wie diese angewendet werden können:

Dies ist kein ausführbarer Code, da die Decorators nicht definiert sind. Auf Class Constructors kann kein Decorator angewendet werden.

2.2 Überblick über die Signaturen

Jede der Decorator Funktionen erhält unterschiedliche Parameter. Eine Ausnahme davon bildet der Accessor Decorator, da dieser im Grunde nur ein Method Decorator ist, der auf einen Acessor (Getter oder Setter) angewendet wird.

Die verschiedenen Signaturen sind definiert in node_modules/typescript/lib/lib.es5.d.ts:

2.3 Reihenfolge der Ausführung des Codes

Die verschiedenen Typen von Decorators werden in der folgenden Reihenfolge bewertet:

• Instance Members: zunächst die Property Decorators, gefolgt von Accessor, Parameter oder Method Decorators
• Static Members: zunächst die Property Decorators, gefolgt von Accessor, Parameter oder Method Decorators
• Parameter Decorators werden für den Konstruktor angewendet.
• Class Decorators werden für die Class angewendet.

Zusammenführung der verschiedenen Typen, ihrer Signaturen und der Reihenfolge der Bewertung:

Auch hier gibt es ein Beispiel in Playground.

3. Wie helfen Decorator Factories?

Vielleicht habt Ihr Euch auch schon gefragt, nachdem Ihr Euch die verschiedenen Signaturen angeschaut habt, wie man Parameter an die Decorator Funktionen übergibt.

Die Antwort hierauf ist: mithilfe von Decorator Factories.

Decorator Factories sind lediglich Funktionen, die um die Decorator Funktion selbst gewickelt sind. Wenn sie in Position sind, könnt Ihr Parameter an die äußere Funktion weitergeben, um das Verhalten des Decorators zu ändern.

Hierzu ein Beispiel:

Ich weiß, dieses Beispiel ist nicht besonders aufregend, aber es öffnet die Tür zu vielen Möglichkeiten. Aber einige davon hebe ich mir für weitere Teile in dieser Serie auf.

4. Zusammensetzung des Decorators

Kann man mehrere Decorators zur selben Zeit anwenden? Ja! In welcher Reihenfolge werden sie ausgeführt? Schaut es Euch an:

Die Decorator Factories werden in der Reihenfolge ihres Auftretens ausgeführt und die Decorator Funktionen in der umgekehrten Reihenfolge.

Jannik Wempe – war Software Engineer bei iteratec. Als Full-Stack Entwickler programmierte er individuelle Lösungen für den Kunden, egal ob im Front- oder Backend. Wir schätzen seinen Beitrag und informieren, dass er nicht mehr bei iteratec tätig ist.