TypeScript: Microsofts neues typisiertes JavaScript

Inhaltsverzeichnis

Am 1. Oktober 2012 hat Microsoft die neue Programmiersprache TypeScript vorgestellt. Sie ist zwar vollständig abwärtskompatibel zu JavaScript, liefert aber einige in JavaScript fehlende Bausteine wie ein statisches Typsystem, Klassen und Module nach.

Vereinfacht gesagt ist TypeScript eine Sprache, die JavaScript um einige fehlende Bausteine ergänzt. Da JavaScript lediglich erweitert wird, kann TypeScript vorhandenen JavaScript-Code verarbeiten. Das ermöglicht einen einfachen Umstieg auf die neue Sprache. Konkret zielt TypeScript auf drei Aspekte, die JavaScript bislang nicht oder nur unzulänglich bedient:

• TypeScript enthält ein statisches Typsystem, das sich wie ein Mantel um das dynamische Typsystem von JavaScript legt.
• TypeScript kennt das Konzept der Klasse, wobei die Sprache diese intern auf Funktionen und Prototypen-Vererbung abbildet.
• TypeScript verfügt über ein Modulsystem, das auf den Systemen Common.js und AMD (Asynchronous Module Definition) beruht.

Der wichtigste Aspekt von TypeScript ist, dass es sämtliche Erweiterungen während des Übersetzungsvorgangs entfernt, sodass reines JavaScript verbleibt, das dementsprechend auf allen Geräten, Betriebssystemen und Webbrowsern lauffähig ist. Eine spezielle TypeScript-Laufzeitumgebung ist also nicht erforderlich.

Vielfacher Anfang

Der TypeScript-Compiler lässt sich auf drei Wegen installieren. Erstens steht er im Rahmen eines Add-ins für Visual Studio zur Verfügung, wobei derzeit allerdings ausschließlich Visual Studio 2012 unterstützt wird. Es stehen außerdem für die Editoren Sublime, Emacs und vi gesonderte Pakete zur Verfügung, die zumindest Syntax-Highlighting für TypeScript-Dateien ergänzen.

Zweitens kann man den Compiler mit npm, dem Node.js Package Manager, installieren. In dem Fall erfolgt die Installation auf dem für Node.js üblichen Weg über die Konsole mit der Anweisung:

$ sudo npm install -g typescript

Dabei wird TypeScript als globales Modul installiert, weshalb npm über administrative Rechte verfügen muss. Da TypeScript unter der Apache-Lizenz steht, lässt sich als dritte Variante TypeScript bei Bedarf auch direkt im Quelltext herunterladen und von Hand übersetzen.

Der große Unterschied: statisches Typsystem

Der größte Unterschied zwischen TypeScript und JavaScript liegt in der Verfügbarkeit eines statischen Typsystems. Seine Verwendung ist allerdings optional, weshalb sich mit TypeScript ebenso dynamisch typisierter Code schreiben lässt wie in JavaScript – man kann sogar statischen und dynamischen Code mischen.

Wird kein spezieller Typ angegeben, weist TypeScript einem Wert automatisch den Typ any zu. Optional lassen sich Werte, beispielsweise Parameter einer Funktion, jedoch mit Typ-Annotationen statisch typisieren:

var add = function (first: number, second: number) {
  return first + second;
};

Da der TypeScript-Compiler die sogenannte Typherleitung unterstützt, ist nun nicht nur bekannt, dass die beiden Parameter first und second vom Typ number sind, sondern auch, dass die Funktion add einen Wert vom Typ number zurückgibt.

Beim Einsatz von Visual Studio als Editor kann die Codevervollständigung IntelliSense Typfehler erkennen und entsprechend auf sie hinweisen. Zudem weist der Compiler auf Typfehler hin. Wird beispielsweise versucht, die add-Funktion mit Parametern vom Typ string aufzurufen, erkennt der Compiler die Typverletzung in der Zeile

console.log(add('Hallo', 'Welt'));

und gibt eine Fehlermeldung aus:

Supplied parameters do not match any signature of call target.

Neben number kann TypeScript mit den Typen string und bool umgehen, außerdem lässt sich optional der Typ any angeben, um explizit jeden beliebigen Typ zu erlauben. Auch Arrays und Callbacks werden als Typ unterstützt:

var sum = function (
  numbers: number[], callback (result: number) => void) {
  // [...]
  callback(result);
};

Außer den einfachen Datentypen lassen sich auch komplexe Typobjekte angeben:

var add = function (data: {first: number; second: number;}) {
  return data.first + data.second;
};

Gewöhnungsbedürftig ist, dass die Syntax von jener abweicht, die bei der Definition von Objekten in JavaScript zum Einsatz kommt: Die einzelnen Elemente werden nämlich nicht durch ein Komma, sondern durch ein Semikolon voneinander getrennt. Zudem ist das letzte Element zwingend von einem Semikolon abzuschließen.

Will ein Entwickler ein derartiges Typobjekt mehrfach verwenden, kann er es mit dem Schlüsselwort interface auslagern:

interface Data {
  first: number;
  second: number;
}

Neben reinen Datenelementen können Typobjekte weitere Elemente wie Funktionen, Konstruktoren oder Indizes enthalten:

interface Foo {
  bar: string;
  foo(s: string): string;  // Funktion
  new(s: string);          // Konstruktor
  [index: number]: string; // Index
}

Bekommt der Name eines Elements ein ? als Suffix angehängt, wird es als optional angesehen. Auf die Art lassen sich auch Parameter in Funktionen als optional markieren.