© Liashko/Shutterstock.com
Typisierung für JavaScript

Grundkurs TypeScript


TypeScript ist eine echte Obermenge von JavaScript mit optionaler statischer Typisierung. Es bietet schon heute zahlreiche Features aus den zukünftigen ECMAScript-Standards. Dabei transpiliert es zu JavaScript in der ECMAScript-Version 3/5 und ist damit kompatibel zu allen Browsern. Wir wollen uns in diesem Artikel die grundlegenden Konzepte der Sprache etwas genauer ansehen.

TypeScripts [1] wichtigstes Feature ist die optionale statische Typisierung, die laut Projektleiter Anders Hejlsberg JavaScript-Entwicklung in großem Stil ermöglicht. Die 2012 als Open Source veröffentlichte Sprache wird unter großem Einfluss der Community weiterentwickelt. Sie transpiliert wahlweise zu ECMAScript 3, 5 oder 6 und garantiert dadurch auch, dass das erzeugte JavaScript auf allen Browsern lauffähig ist. Abgerundet wird das Paket durch ein Tooling, das sich in das Ökosystem rund um Node.js und npm einfügt.

Etablierte IDEs und Editoren profitieren von der Architektur des TypeScript-Compilers, durch die Plug-ins mit Codevervollständigung und Refaktorisierungsmöglichkeiten gebaut werden können. Mit den vorhandenen Werkzeugen sind große JavaScript-Codebasen handhabbar. Spätestens seit Google für sein beliebtes Framework Angular auf TypeScript setzt, kann man davon ausgehen, dass das Projekt ein langes Leben haben wird.

Hauptmerkmal von TypeScript ist die optionale statische Typisierung. Dafür stellt es eine ganze Reihe von Basistypen bereit, die in Listing 1 in Aktion gezeigt werden. Neben den klassischen Typen für boolesche Werte boolean, string für Strings und number für Zahlenwerte im Format dezimal, hexadezimal, binär und oktär, lassen sich auch Arrays definieren, sogar auf zwei Arten: klassisch zum Beispiel ein Array aus strings mit

 let aArray: string[] = ['Hello', 'World', '!'];

oder mit Generics

 let aArray: Array<string> = ['Hello', 'World', '!'];

Ein letzter Basistyp ist enum, mit dem sich Aufzählungen definieren lassen, die aufsteigend von 0 angelegt werden. Alternativ können auch die numerischen Werte selbst belegt werden.

Listing 1: Basistypen

let isDone: boolean = false; let decimal: number = 6; let color: string = 'berlin'; // Getype Arrays auf zwei Arten let aArray: number[] = [1, 2, 3]; let aGenericArray: Array<number> = [4,5,6]; enum Color {Red, Green, Blue}; let c: Color = Color.Green;

Die Migration von JavaScript auf TypeScript bringt mitunter Fehler ans Tageslicht. Diese betreffen die Typisierung der Codebasis und Spezialfälle mit nicht klar aufgelösten Typen. Dafür gibt es auch einige Spezialtypen, die die Integration mit JavaScript vereinfachen. Listing 2 zeigt zuerst den Typ any, der immer dann zum Einsatz kommen kann, wenn eine Variable Werte von unterschiedlichen Typen annehmen kann. Arrays können auch verschiedene Typen enthalten, so wie:

let tuple: [string, number];

Zu beachten ist hierbei, dass damit eine Reihenfolge verbunden ist und ab Index 2 jeder der beiden Typen erlaubt ist. Folgende Zuweisungen sind also korrekt:

tuple = ["Hello", 42]; tuple = ["Hi", 42, 27, "Zoe"];

Listing 2: Spezialtypen

// Kann jeden Typ enthalten let notSure: any = 4; notSure = 'I am undecided'; let tuple: [string, number]; tuple = ["Hello", 42];

Seit Version 2.0 gibt es einen neuen Typ never, der immer dann zum Einsatz kommt, wenn eine Methode nicht korrekt terminiert. Das wird gerne mit void verwechselt, wenn eine Methode nichts zurückgibt. Die Methode in Listing 3 wirft immer einen Fehler, terminiert also nicht korrekt. Deswegen bekommt sie als Rückgabewert den sogenannten Bottom Type never, der genau dieses Verhalten ausdrückt. Das lässt sich dazu benutzen, Checks zur Lauf- und Kompilierzeit einzubauen, die auf dieses Verhalten prüfen. Eine genaue Erläuterung findet sich in [2] und [3].

Listing 3

// Falls Methoden keinen Rückgabewert // haben: never function error(message: string): never { throw new Error(message); }

Warum Sie zuschlagen sollten

Größtes Verkaufsargument von TypeScript ist die optionale statische Typisierung. Tatsächlich ist sie ziemlich ausgereift und der Compiler zuverlässig und schnell. Typen lassen sich mit Interfaces relativ leicht erzeugen. Listing 4 definiert ein Interface Robot. Es kann sowohl Properties als auch Funktionssignaturen enthalten. Eine Besonderheit stellen sogenannte optionale Properties dar. Sie werden mit einem ? markiert, wie die Property model. In einer konkreten Ausprägung können sie dann vorhanden sein oder auch nicht.

Listing 4: Ein einfaches Interface

interface Robot { name: string; model?: number; isDiscontinued?: boolean; sayName(): void; }

Eine Klasse kann dieses Interface implementieren und der Compiler überprüft die Einhaltung des Vertrags. Hier zeigt sich schon der große Vorteil von statischer Typisierung. Bei einer großen Codebasis ist es nicht immer leicht, diese Einhaltung nur...

Neugierig geworden? Wir haben diese Angebote für dich:

Angebote für Gewinner-Teams

Wir bieten Lizenz-Lösungen für Teams jeder Größe: Finden Sie heraus, welche Lösung am besten zu Ihnen passt.

Das Library-Modell:
IP-Zugang

Das Company-Modell:
Domain-Zugang