Dr. Holger Schwichtenberg IT-Visions.de

Heute muss man nicht mehr lernen, wie man mit Prototypen eine Vererbung in JavaScript nachbildet, wenn man TypeScript hat, das den lästigen und unübersichtlichen Code für den Entwickler generiert.

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 TypeScript 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 oder dem Node Package Manager. In Visual Studio 2013 und Visual Studio 2015 wird der TypeScript-Compiler mitgeliefert (siehe Verzeichnis C:\Program Files (x86)\Microsoft SDKs\TypeScript\). 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:

  1. Nach jedem Speichern einer TypeScript-Datei
  2. Im Rahmen der Übersetzung eines Projekts
  3. Zur Laufzeit

Bei den JavaScript-Versionen für das Kompilat hat der Entwickler die Wahl zwischen den Standards ECMAScript 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).

Abb. 1: Der TypeScript-Compiler erzeugt aus den TypeScript-Dateien dann JavaScript-Dateien und außerdem noch Abbildungsdateien für den Debugger

Abb. 1: Der TypeScript-Compiler erzeugt aus den TypeScript-Dateien dann JavaScript-Dateien und außerdem noch Abbildungsdateien für den Debugger

Abb. 2: Projekteinstellungen für TypeScript in Webprojekten in Visual Studio 2015

Abb. 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.

<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 Configuration File anlegen.

{
  "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.

Den vollständigen Artikel lesen Sie in der Ausgabe:

Windows Developer 10.16 - "TypeScript statt JavaScript"

Alle Infos zum Heft
263016TypeScript: Die Alternative für JavaScript-Hasser
X
- Gib Deinen Standort ein -
- or -