© best_vector/Shutterstock.com
TypeScript = JavaScript + x

Die Alternative für JavaScript-Hasser


An JavaScript scheiden sich die Geister: Die einen lieben die Sprache aufgrund ihrer Flexibilität, die anderen hassen sie aufgrund ihrer Komplexität. Aber auch die Liebhaber müssen feststellen, dass manche JavaScript-Entwickler Programmcode schreiben, der schwer lesbar und nicht gut zu warten ist. Sprachen, die von JavaScript abstrahieren, gibt es schon länger. Microsofts TypeScript setzt sich hier immer stärker durch, vor allem nachdem auch Google mit Angular 2 aufgesprungen ist.

TypeScript hat sich rasant weiterentwickelt: Von der Erstankündigung am 02.10.2013 über die Version 1.0 am 02.04.2014 bis zur aktuellen Version 1.8.10 vom 09.04.2016. Maßgeblich an der Entwicklung von Type­Script beteiligt ist Anders Hejlsberg, der Schöpfer von Turbo Pascal, Delphi und C#. Ein wichtiger Meilenstein für TypeScript war der 05.03.2015: An diesem Tag gab Google bekannt, dass das beliebte JavaScript-Framework Angular mit TypeScript entwickelt und dafür die eigene Sprache AtScript aufgegeben wird. TypeScript unterstützt aber nicht nur Angular 2, sondern viele JavaScript-Frameworks, einschließlich React mit seiner besonderen eingebetteten Tagsyntax.

Werkzeuge

Der TypeScript-Compiler liegt selbst in JavaScript vor (tsc.js). Für Windows gibt es eine direkt ausführbare Version tsc.exe. Den Compiler bekommt man von www.nuget.org [1] oder dem Node Package Manager [2]. In Visual Studio 2013 und Visual Studio 2015 wird der TypeScript-Compiler mitgeliefert (siehe Verzeichnis C:\Program Files (x86)\Microsoft SDKs\Type­Script\). Da der Compiler häufig aktualisiert wird, sollte man immer die aktuellsten Visual-Studio-Gesamtupdates bzw. die Updates des TypeScript-Compilers einzeln installieren.

Der TypeScript-Compiler erzeugt aus dem TypeScript-Programmcode dann JavaScript-Programmcode (Abb. 1). Diese Transformation von TypeScript-Syntax zu JavaScript-Syntax kann zu drei Zeitpunkten erfolgen:

  • Nach jedem Speichern einer TypeScript-Datei

  • Im Rahmen der Übersetzung eines Projekts

  • Zur Laufzeit

Bei den JavaScript-Versionen für das Kompilat hat der Entwickler die Wahl zwischen den Standards ECMA­Script Version 3, ECMAScript Version 5 und dem aktuellen ECMAScript Version 2015 (alias Version 6). Bei der Ausgabe von Modulen hat der Entwickler inzwischen sogar fünf Modulformate zur Wahl: Asynchronous Module Design (AMD), CommonJS, Universal Module Definition (UMD), SystemJS und ECMAScript 2015 (ES6) (Abb. 1).

schwichtenberg1_neu.tif_fmt1.jpgAbb. 1: Der TypeScript-Compiler erzeugt aus den TypeScript-Dateien dann JavaScript-Dateien und außerdem noch Abbildungsdateien für den Debugger
schwichtenberg_2.tif_fmt1.jpgAbb. 2: Projekteinstellungen für TypeScript in Webprojekten in Visual Studio 2015

In Visual Studio wählt der Webentwickler die wichtigsten Compileroptionen komfortabel in den Projekteinstellungen in Webprojekten (Abb. 2). Leider sind nicht alle TypeScript-Compiler-Optionen auf diesem Wege verfügbar. Manche Einstellungen (z. B. die Aktivierung einiger noch als „experimentell“ geltenden Sprachfeatures, wie Dekoratoren) muss man, wie in Listing 1, durch einen Eintrag in der XML-Projektdatei direkt vornehmen.

Listing 1: Ausschnitt aus den TypeScript-Compiler-Einträgen in „.csproj“-Datei

<PropertyGroup Condition="'$(Configuration)' == 'Debug'"> <TypeScriptExperimentalDecorators>true</TypeScriptExperimentalDecorators> <TypeScriptEmitDecoratorMetadata>true</TypeScriptEmitDecoratorMetadata> <TypeScriptTarget>ES6</TypeScriptTarget> ... </PropertyGroup>

Der zweite Weg für die TypeScript-Compiler-Konfiguration ist, dem Projekt eine tsconfig.js-Datei hinzufügen (Listing 2). Dazu kann man in Visual Studio ein neues Element vom Typ TypeScript JSON Configura­tion File anlegen.

Listing 2: Beispiel für eine „tsconfig.js“-Datei

{ "compilerOptions": { "experimentalDecorators": true, "noImplicitAny": false, "noEmitOnError": true, "removeComments": false, "sourceMap": true, "target": "es2015" }, "exclude": [ "node_modules", "wwwroot" ] }

Die von dem TypeScript-Compiler erzeugten .js-Dateien sind im Standard nicht Teil des Visual-Studio-Projekts. Man kann sie wie üblich über die Option Show all files im Solution Explorer einblenden. Fehler bei der TypeScript-Kompilierung landen in der Error List – wie man es erwartet. In eine Webseite einbetten muss man immer die .js-Datei. Visual Studio hilft hier mit: Beim Drag and Drop einer .ts-Datei in eine .html-Datei erstellt die IDE ein <script>-Tag mit Verweis auf die .js-Datei statt auf die .ts-Datei.

Visual Studio bietet auch Debugging: Bei einem Laufzeitfehler oder einem Haltepunkt in der Type­Script-Datei zeigt die Entwicklungsumgebung im Debugger nicht den eigentlich ausgeführten JavaScript-Programmcode, sondern den ursprünglichen TypeScript-Programmcode an. Der Entwickler kann diesen wie üblich zeilenweise durchlaufen. Die für dieses komfortable Debugging notwendige Beziehung zwischen den Zeilen in der ausgeführten JavaScript-Datei und in der ursprünglichen TypeScript-Datei erhält Visual Studio durch eine Source-Map-Datei (.map), die ebenfalls im Rahmen der TypeScript-Kompilierung entsteht (Abb. 1).

Wer mit Visual Studio Code oder anderen „einfacheren“ Editoren arbeiten will, muss auf die Kommandozeilenoptionen zurückgreifen. Der folgende kurze Kommandozeilenbefehl sorgt dafür, dass zwei Type­Script-Dateien immer beim Speichern in ECMA­Script 5 und das Modulformat AMD übersetzt werden:

tsc datei1.ts datei2.ts --watch --target es5 --module amd

Die Option --watch gibt es leider nur, wenn man tsc.cmd aus Node.js-Paketen zum Kompilieren verwendet. Die tsc.exe, die in Visual Studio enthalten ist, kann das Dateisystem leider nicht überwachen, dafür kümmert sich Visual Studio selbst um die Überwachung. Eine weitere wichtige Kommandozeilenaktion ist tsc --init. Damit legt man im aktuellen Verzeichnis eine tsconfig.js an, über die man dann den Compiler steuern kann.

Übersetzung in JavaScript

Die Sprache TypeScript stellt eine Übermenge von JavaScript da, das heißt, (fast) jede JavaScript-Datei ist auch gültiger Type­Script-Programmcode. Das ist hilfreich für den Umstieg von JavaScript auf TypeScript bzw. für die Nutzung bestehenden JavaScript-Programmcodes aus Büchern und dem Internet. Allerdings steht in dem Satz oben bewusst ein „fast“: Denn den JavaScript-Programmcode in Listing 3 (eine Filterdefinition für AngularJS) mag der TypeScript-Compiler nicht. Er bemängelt: error TS2322: Type 'string' is not assign­able to type 'number'. Das liegt daran, dass der Type­Script-Compiler durch die Zeile var num = parseInt(n, 10) der Variablen num auf dem Wege der automatischen Typherleitung bereits den Typ number zuweist. Dann später hat der Autor dieses JavaScript-Codes [3] die Variable num nun leider als Zeichenkette verwendet. In JavaScript ist sowas möglich – aber natürlich schlechter Programmierstil. Gut programmiertes JavaScript ist kein Problem für den TypeScript-Compiler. Auch in diesem Fall kann man die Situation retten, indem man in Type­Script explizit num auf den Typ any deklariert: var num : any = parseInt(n, 10).

Listing 3: Diesen JavaScript-Code bemängelt der Type­Script-Compiler

// Quelle: http://jsfiddle.net/TheRoks/8uCT9/ var app = angular.module('myApp', []); app.filter('numberFixedLen', function () { return function (n, len) { var num = parseInt(n, 10); len = parseInt(len, 10); if (isNaN(num) || isNaN(len)) { return n; } num = '' + num; while (num.length < len) { num = '0' + num; } return num; }; });

Microsoft hat sich bei der TypeScript-Syntax von Anfang an bemüht, nahe am ECMAScript-2015-Standard zu sein, d. h., bei der Ausgabe in ECMAScript 2015 hat der Compiler nur ganz wenig zu tun. Je niedriger die Zielversion jedoch ist, desto mehr Programmcode muss der Compiler erzeugen, um die fehlenden JavaScript-Sprachfeatures nachzubilden.

Ein guter erster Anlaufpunkt für Neueinsteiger in TypeScript ist die interaktive, browserbasierte Codeumwandlung, die Microsoft unter [4] bietet: Während man in der linken Fensterhälfte von Abbildung 3 Type­Script erfasst, sieht man rechts schon das JavaScript-Ergebnis. Abbildung 3 zeigt eine Vererbungshierarchie mit drei Klassen in TypeScript und rechts das deutlich längere Pendant in JavaScript. Man sieht sofort: TypeScript ist hier wesentlich prägnanter und eleganter. In dieser Webanwendung kann man leider die JavaScript-Zielversion nicht wählen; die Ausgabe ist aktuell immer ECMAScri...

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