Der JavaScript & HTML5 Track auf der BASTA! 2017

JavaScript für Unternehmensanwendungen

Die Sprache JavaScript wurde 1995 in ein paar Wochen entwickelt. Die Idee war, Code auf Webseiten ausführen zu können, um Inhalt dynamisch anzupassen. Damals konnte sich vermutlich niemand vorstellen, dass mit JavaScript Unternehmensanwendungen mit 100 000 oder mehr Zeilen Code umgesetzt werden. Doch das ist heute der Fall. Zwar lassen sich mit JavaScript solche Anwendungen bauen. Doch dabei gibt es einen großen Nachteil: JavaScript ist eine dynamische Sprache, es gibt keine statische Typisierung von Variablen. Die statische Typisierung, die von Sprachen wie C# oder Java bekannt ist, führt bei falschen Zuweisungen zu entsprechenden Compile-Fehlern, und nicht zu Fehlern, die erst zur Laufzeit auftreten. In C# lässt sich aufgrund der starken Typisierung beispielsweise einer String-Variablen kein Integer zuweisen. In JavaScript dagegen lässt sich einer Variablen ein beliebiger Inhalt zuweisen, da die Variable als solche gar keinen Typ hat:

let firstName = "Thomas";

firstName = 5; // OK

Die firstName-Variable erhält zuerst einen String, dann die Number 5. Das ist in JavaScript völlig in Ordnung und führt zu keinem Fehler. Doch für eine robuste Architektur ist eine statische Typisierung extrem hilfreich, die eben während des Entwickelns und Kompilierens bereits viele Fehler abfangen kann. Und genau diese Typisierung besitzt TypeScript, was auch der Ursprung des Namens ist.

Statische Typisierung

TypeScript stellt eine Obermenge von JavaScript dar. Somit ist jeder JavaScript-Code bereits gültiger TypeScript-Code. Bei einer Migration von JavaScript nach TypeScript werden üblicherweise einfach Typen eingeführt, um mögliche Fehler bereits zur Compile-Zeit abzufangen. Die firstName-Variable aus dem gezeigten Beispiel lässt sich in TypeScript mit einer so genannten Typannotation versehen. Der Typ wird dabei nach dem Variablennamen angegeben. Variablennamen und -typ werden mit einem Doppelpunkt getrennt. Der nachfolgende Code zeigt die firstName-Variable mit der Angabe des string-Typs. Wird in TypeScript dieser Variablen ein Wert vom Typ number zugewiesen, führt dies im Gegensatz zu JavaScript zu einem Compile-Fehler:

let firstName: string = "Thomas";

firstName = 5; // Kompilierfehler

Die statische Typisierung bringt neben Compile-Fehlern weitere Vorteile: Tools wie Visual Studio Code können deutlich bessere Unterstützung als bei reinem JavaScript bieten, weil der Typ zur Entwicklungszeit schon feststeht. Somit gibt es Funktionen wie IntelliSense, Go to Definition und vieles mehr, die das nutzen können.

TypeScript kompilieren

Neben der statischen Typisierung hat TypeScript ein weiteres sehr wichtiges Merkmal: TypeScript kompiliert zu reinem JavaScript-Code. Das heißt, dass TypeScript lediglich zur Entwicklungszeit wichtig ist. Zur Laufzeit benutzt der Browser klassisches JavaScript, das aus TypeScript kompiliert wurde. Doch jetzt kommt der eigentliche Clou: Mit TypeScript lässt sich die erstellte JavaScript-Version bestimmen. So kann nach ES2015 oder auch nach ES5 kompiliert werden. Dies ist insbesondere interessant, wenn man bedenkt, dass Browser immer eine Weile brauchen, bis der letzte ECMAScript-Standard implementiert ist. Und ist der Standard implementiert, ist noch nicht gewährleistet, dass die User auch die letzte Browserversion installiert haben, mit der der JavaScript-Code ausgeführt werden kann und richtig funktioniert. Mit TypeScript ist dies kein Problem mehr, da sich die neuen Features einfach in eine ältere, von allen gängigen Browsern unterstützte JavaScript-Version kompilieren lassen.

Beispielsweise wurden mit ES2015 Klassen eingeführt, um objektorientiert zu programmieren. Klassen sind somit auch in TypeScript verfügbar. Doch der TypeScript-Code lässt sich nicht nur nach ES2015 kompilieren, sondern auch nach ES5. Somit lassen sich Klassen in TypeScript wie in ES2015 nutzen, anschließend aber nach ES5 kompilieren, was von den gängigen Browsern unterstützt wird.

Mit der statischen Typisierung erhalten Entwickler Fehler bereits während des Entwickelns. Ebenso gibt es zahlreiche Features im Tooling, wie IntelliSense, Go to definition und mehr. Ein weiterer Vorteil der statischen Typisierung ist, dass der Code selbst-dokumentierend ist. Hat ein Funktionsparameter einen Typ, ist klar, was an die Funktion übergeben werden muss. Gibt es dagegen wie in JavaScript keinen Typ, bedarf es Kommentaren, die beschreiben, was die Funktion eigentlich verlangt. Da das Kompilat von TypeScript reines JavaScript ist, gibt es keinen Grund, warum man in JavaScript-Projekten nicht auf TypeScript setzen sollte.

Was man wie mit TypeScript machen kann, zeigt Thomas Claudius Huber in seinem Workshop “Einführung in TypeScript: von 0 auf 100 in einem Tag”, am Freitag, den 24.2.2017