© GoodStudio/Shutterstock.com
Teil 4: TypeScript - die typsichere Variante von JavaScript

Im Zusammenhang von Anfang an!


JavaScript ist universell anwendbar und hat längst vielfältige Einsatzgebiete. Leider ist die Sprache in größeren Projekten nicht immer einfach zu handhaben. Typen muss man nicht angeben, und mit der Objektorientierung nimmt es JavaScript auch nicht so genau. TypeScript bietet Abhilfe. Komfort bei der Entwicklung und ein automatisches Übersetzen in JavaScript sind klare Vorteile.

Wenn Sie die ersten drei Teile unserer Artikelserie über Webentwicklung verfolgt haben, dann sind Sie mit den Basistechnologien HTML5, CSS3 und JavaScript schon gut vertraut. HTML5 dient demnach dazu, einer Webseite die passende Struktur zu geben. Das Design wird komplett nach CSS3 verlagert, und für die Funktionalität steht die Programmiersprache JavaScript zur Verfügung. Damit haben Sie dem Grunde nach alles zusammen, um moderne Webapplikationen zu erstellen, die im Client laufen. Je weiter Sie in diese Technologien einsteigen und je größer die Projekte werden, desto eher werden Sie feststellen, dass die Programmiersprache JavaScript zu einem Engpass bei der Strukturierung des Quellcodes werden kann. Es kann mitunter schwierig werden, sauberen Programmcode in JavaScript zu erzeugen; die Fehlersuche gestaltet sich oft aufwändig. Abhilfe verspricht der Einsatz der Programmiersprache TypeScript, die eine Obermenge von JavaScript ist und der Programmiersprache neue Konzepte und Möglichkeiten hinzufügt. Wir werden uns in diesem Teil der Artikelserie mit den Basics von TypeScript beschäftigen (Textkasten: „Moderne Webprogrammierung: Eine systematische Einführung“). Beginnen wir zunächst damit, zu klären, welche Vorzüge der Einsatz von TypeScript mit sich bringt und wo diese Sprache insbesondere eingesetzt wird.

Was ist TypeScript?

Die Frage lässt sich schnell beantworten: TypeScript bildet eine Obermenge von JavaScript, erweitert also JavaScript um bestimmte Features. TypeScript ist eine von Microsoft entwickelte Programmiersprache. Im Jahr 2012 erfolgte die Veröffentlichung der ersten Version (0.8), seitdem wird TypeScript kontinuierlich weiterentwickelt. Eine Menge an JavaScript-Frameworks setzen heute auf die Verwendung von TypeScript, so zum Beispiel Angular 2 oder React. TypeScript erweitert JavaScript – darum auch der Name – hauptsächlich um eine optionale statische Typisierung zum Zeitpunkt der Kompilierung. Dazu gehören die folgenden Features:

  • strukturelle Typisierung

  • Typinferenz

  • Klassen, klassenbasierte Vererbung und Dekoratoren

  • Typparameter (Generics)

  • abstrakte Schnittstellentypen (Interface)

  • zusätzliche Typen: any, void, enums, tuple, Funktionstypen, Vereinigungstypen (Union), Kreuzungstypen (Intersection) und Aufzählungstypen (enum)

  • Mehrfachvererbung mit Mixins

  • Typaliase

  • Namensräume

Weniger Laufzeitfehler werden durch eine starke Typisierung erreicht. Allerdings macht TypeScript aus JavaScript keine statisch typisierte Sprache. Es ermöglicht lediglich eine starke Typisierung. Damit kann man Variablen und Methoden typisieren, muss es aber nicht. Verwendet man diesen Ansatz, dann können bestimmte Fehler bereits während der Programmierung aufgedeckt werden. TypeScript und JavaScript sind stets 100 % kompatibel zueinander, und es ist möglich, jede beliebige JavaScript-Bibliothek mit TypeScript zu verwenden. Mit anderen Worten: Gültiger JavaScript-Code ist automatisch gültiger TypeScript-Code, und JavaScript-Quelldateien können durch den TypeScript-Compiler verarbeitet werden.

TypeScript-Quellcode wird in JavaScript-Code übersetzt. In diesem Fall spricht man von Transpilieren (Abb. 1). Kommen wir jetzt dazu, die Systemvoraussetzungen zu schaffen, um mit TypeScript zu programmieren.

krypczyk_bochkor_webprogramming_1.tif_fmt1.jpgAbb. 1: Aus TypeScript wird JavaScript [1]

Einrichten von TypeScript

Um mit TypeScript zu programmieren, müssen wir die Entwicklungsumgebung einrichten. Letztendlich muss der TypeScript-Quellcode in JavaScript übersetzt werden. Dazu ist ein TypeScript-Compiler notwendig. Der TypeScript-Compiler aus dem Hause Microsoft benötigt die Laufzeitumgebung Node.js (Textkasten: „Node. js und npm“). Node.js unterstützt eine Vielzahl von Betriebssystemen, die aktuelle LTS-Version können Sie von der Node.js-Webseite unter [2] herunterladen. Die Installation ist wenig spektakulär; unter Microsoft Windows handelt es sich um ein gewöhnliches Installationsprogramm. Ist die Installation abgeschlossen, haben Sie so gleich den Paketmanager npm installiert.

Die erfolgreiche Installation können Sie auf der Kommandozeile mit node --version überprüfen. Sie erhalten eine Ausgabe zur aktuell installierten Version, in unserem Fall etwa die Version v10.15.0. Dass der Paketmanager npm mitinstalliert wurde, können Sie auch sogleich mit dem Kommando npm --version testen. Als Version wird uns 6.4.1 auf unserer Entwicklermaschine angezeigt. Jetzt geht es bereits um die Installation des TypeScript-Compilers. Wir installieren ihn mit der Befehlszeile npm install -g typescript global, d. h. wir setzen die entsprechende PATH-Umgebungsvariable. Das zugehörige Paket wird aus dem Internet automatisch heruntergeladen und installiert. Der Vorgang wird ebenso auf der Kommandozeile protokolliert und quittiert. Ob auch das korrekt gelaufen ist, lässt sich via tsc –version überprüfen. Wir erhalten den Hinweis, dass die aktuelle Version des TypeScript-Compilers, d. h. Version 3.2.2, installiert wurde. Damit ist die Installation des Compilers abgeschlossen und wir können Programme in TypeScript schreiben. Mit dem Kommando tsc filename.ts lässt sich eine TypeScript-Datei dann nach JavaScript übersetzen. Das können Sie an einem einfachen Beispiel prüfen. Benutzen Sie dazu den Code der einfachen Funktion ShowTime:

function ShowTime(toDayDate: Date) { }

Dass es sich um TypeScript handelt, erkennen Sie daran, dass dem Parameter der Funktion toDayDate der Datentyp Date zugewiesen wurde. In JavaScript sind bekanntlich keine Datentypen anzugeben. Schreiben Sie diese Codezeile zum Beispiel in die Datei time.ts und legen Sie sie in ein beliebiges Verzeichnis Ihres Rechners ab. Danach rufen Sie den TypeScript-Compiler für die Übersetzung mit ts time.ts auf. Wenige Augenblicke später haben Sie im gleichen Verzeichnis eine weitere Datei namens time.js mit dem folgenden Inhalt:

function ShowTime(toDayDate) { }

Wenig überraschend unterscheidet sich der Inhalt nur darin, dass der Datentyp für den Parameter toDayDate jetzt nicht mehr vorhanden ist. Wir haben damit jedoch die Funktion des TypeScript-Compilers geprüft. Auf der Webseite der Programmiersprache TypeScript [3] finden Si...

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