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:
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:
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).
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.
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:
Die verschiedenen Typen von Decorators werden in der folgenden Reihenfolge bewertet:
Zusammenführung der verschiedenen Typen, ihrer Signaturen und der Reihenfolge der Bewertung:
Auch hier gibt es ein Beispiel in Playground.
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.
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.
Dieser Blogbeitrag wurde aus dem Englischen übersetzt und erschien ursprünglich auf: https://blog.jannikwempe.com/typescript-decorators-basics.
Mehr Infos und weitere interessante Beiträge unter: https://blog.jannikwempe.com/