© iStockphoto.com/FreezeFrameStudio
ECMAScript-2016-Dekoratoren in TypeScript

Kürzer und prägnanter


Dekoratoren erlauben das Hinterlegen von Metainformationen in JavaScript-Quellcode. Somit lassen sich Codestrecken kürzer und ausdrucksstärker gestalten. Obwohl es sich dabei um einen Vorschlag für den Standard ECMAScript 2016 handelt, kann dieses neue Sprachkonstrukt bereits heute dank Technologien wie TypeScript genutzt werden.

In Mainstreamsprachen wie Java oder C# ist die Möglichkeit, Quellcode mit Metadaten zu annotieren, kaum mehr wegzudenken. Viele Frameworks nutzen diesen Mechanismus zur Unterstützung von kurzen und prägnanten sowie sich selbst erklärenden Codestrecken. Auch in JavaScript wird es solch ein Sprachkonstrukt geben. Hierbei ist die Rede von Dekoratoren, die mit dem JavaScript-Standard ECMAScript 2016 (ECMA­Script 7) in die Sprache Einzug halten werden.

Der dafür vorliegende Vorschlag [1] wird auch schon von Transpilern unterstützt, die moderne Sprachkonstrukte aus der Welt von ECMAScript 2015 und 2016 in handelsübliches JavaScript übersetzen. Zu diesen Transpilern gehört neben Babel auch TypeScript, das JavaScript zusätzlich um ein statisches Typsystem erweitert. Aber auch populäre Frameworks wie AngularJS 2.0 aus der Feder von Google nutzen das künftige Dekoratorenkonzept intensiv und greifen dazu auf die erwähnten Transpiler zurück.

Der vorliegende Artikel geht auf die Möglichkeiten von Dekoratoren ein und zeigt anhand von Beispielen, die mit TypeScript 1.6 verfasst wurden, wie sich dieses Konzept anwenden lässt und was dahinter steckt. Die vollständigen Listings können unter [2] heruntergeladen werden.

Dekoratoren in TypeScript

Da es sich bei Dekoratoren um ein Sprachmerkmal handelt, das erst mit ECMAScript 6 offiziell verabschiedet wird, stuft TypeScript 1.6 es als experimentell ein. Um die Unterstützung dafür zu aktivieren, ist bei direkter Nutzung des TypeScript-Compilers tsc der Vermerk experimentalDecorators in der Datei tsconfig.json zu hinterlegen:

{ "compilerOptions": { "target": "ES5", "experimentalDecorators": true, } }

Diese Datei wird im Stammverzeichnis der Anwendung erwartet und auch von Editoren mit TypeScript-Unterstützung, wie dem leichtgewichtigen Visual-Studio-Code [3], verwendet. Aus der Reihe tanzt hier leider derzeit noch das klassische Visual Studio, zumal es die Datei tsconfig.json ignoriert. Abhilfe schafft hier ein Eintrag in der Projektdatei. Informationen dazu findet man unter [4].

Erste Schritte mit Dekoratoren

Als Einstieg in die Welt der Dekoratoren soll eine einfache Umsetzung betrachtet werden, di...

Neugierig geworden?

Angebote für Teams

Für Firmen haben wir individuelle Teamlizenzen. Wir erstellen Ihnen gerne ein passendes Angebot.

Das Library-Modell:
IP-Zugang

Das Company-Modell:
Domain-Zugang