Techtalk: TypeScript – Statische Typen und objektorientierte Paradigmen für JavaScript

Techtalk
Techtalk: TypeScript – Statische Typen und objektorientierte Paradigmen für JavaScript

JavaScript ist schlichtweg DIE Wiederentdeckung der letzten Jahre. Die Programmiersprache ist längst nicht mehr nur im Web zuhause und es werden zunehmend grosse Applikationen damit entwickelt. Wer aus der „klassischen“ C# Entwicklung kommt, wird sich mit dieser Entwicklung meist etwas schwer tun. TypeScript setzt genau an diesem Punkt an und erleichtert die Arbeit mit JavaScript.

„TypeScript lets you write JavaScript the way you really want to.”
(Zitat: http://www.typescriptlang.org, 11.08.2015)

Dieser Artikel richtet sich an technische Entscheidungsträger und Entwickler. Er vermittelt das nötige Wissen, um entscheiden zu können, ob das nächste grosse JavaScript Projekt von einer Umsetzung mit TypeScript profitieren kann. TypeScript erleichtert die Entwicklung, indem JavaScript mit statischer Typisierung und Klassen basiertem OOP erweitert wird. Durch diese Erweiterungen lassen sich Qualität und Quantität bei der Umsetzung einer JavaScript basierten Applikation steigern.

Was ist TypeScript?
Grundsätzlich ist TypeScript ein Super Set von JavaScript. Dies bedeutet, dass JavaScript-Code valider TypeScript-Code ist. TypeScript-Code wiederum wird durch den TypeScript-Compiler (tsc.exe) in JavaScript übersetzt/kompiliert. Der kompilierte Code ist somit reines JavaScript, welches sich im Browser oder auf dem Server (node.js) ausführen lässt. Es sind keine Plug-Ins notwendig, wie das zum Beispiel bei Silverlight oder Flash der Fall ist.

Dabei erweitert TypeScript, als Super Set, die Sprache JavaScript mit viel Syntactic Sugar. Darunter hauptsächlich die folgenden Konstrukte:

  • Basic Types
  • Interfaces
  • Classes
  • Modules
  • Generics

TypeScript funktioniert im Grossen und Ganzen ähnlich wie CoffeeScript, unterscheidet sich jedoch fundamental von den Prinzipien von Dart.

Mehr dazu unter „Wie unterscheidet sich TypeScript von anderen JavaScript Alternativen?“

Weshalb sollte ich TypeScript einsetzen?
In TypeScript geschriebener Code wir zu JavaScript kompiliert. Das bedeutet, dass der entsprechende JavaScript Code auch direkt geschrieben werden könnte.

Welche Vorteile bietet die Verwendung von TypeScript gegenüber reinem JavaScript?

Die Erfahrungen mit TypeScript haben im Wesentlichen folgende Vorteile sichtbar gemacht:

Qualität
Durch die Prüfung des Compilers können viele Fehler vermieden, deren Erkennung bei JavaScript erst zur Laufzeit möglich ist. Viele Editoren unterstützen Refactorings für TypeScript. Das Umbenennen von Variablen, Funktionen oder Klassen ist in wenigen Sekunden erledigt, ohne die Applikation zu beschädigen.

Speed
Das Typen-System ermöglicht nicht nur eine Erkennung von Fehlern während des Kompilierens, sondern auch eine zuverlässige und praktische IntelliSense. Auch Refactorings lassen sich gefahrlos und schnell durchführen. Dabei bleibt das bei JavaScript beliebte „Edit and Continue“ erhalten. Mit den generierten „*.js.map“-Files lässt sich TypeScript auch im Browser debuggen. Das alles trägt - verglichen mit JavaScript - zu einer Verkürzung der Entwicklungszeit bei.

Motivation
Oft können sich Entwickler, welche mit C# oder Java gross geworden sind, nur schwer mit JavaScript anfreunden. Mit TypeScript rückt JavaScript ein Stück an diese Sprachen heran und bringt schmerzlich vermisste Features. Glückliche Entwickler schreiben besseren Code!

Einheitliche Konzepte
Bei JavaScript gibt es diverse Methoden, um ein Ziel zu erreichen (z.B. das Definieren einer Klasse), was bei grossen Projekten schnell zum Problem werden kann. Auch wenn sich dies durch Guidelines entschärfen lässt, droht ein Wildwuchs von unterschiedlichen Coding Styles, was in Folge die Wartbarkeit der Software massiv beeinträchtig. TypeScript hingegen generiert „schönen“ JavaScript Code mit einheitlichen Konzepten. Zum einen wird so einheitlicher JavaScript Code garantiert, zum anderen kann der kompilierte TypeScript Code, sprich der generierte JavaScript Code, ohne Probleme auch ohne TypeScript verwendet werden, sollte man sich später im Projekt dafür entscheiden, TypeScript nicht mehr zu verwenden.

The Feature is now
TypeScript stellt jeweils bereits Konzepte von zukünftigen ECMAScript-Versionen bereit.

Bis die Spezifikation der ECMAScript-Version freigegeben und in die Browser integriert ist, generiert der TypeScript-Compiler Polyfills (so z.B. beim „class“-Keyword). So kann zur gegebenen Zeit nur der Compiler angewiesen werden, JavaScript einer entsprechenden ECMAScript-Version zu generieren. Um die entsprechenden Konstrukte der ECMAScript-Version zu nutzen.

Wie funktioniert TypeScript?
TypeScript lässt sich aus Anwendersicht grob in drei Bestanteile unterteilen:

  • Sprache
  • Compiler
  • Defintion Files

TypeScript bringt kein eignes Framework mit.

Die Sprache
TypeScript erweitert JavaScript um diverse Konstrukte - hier ein Beispiel, typischerweise eine Datei mit der Endung .ts:

Die Syntax ist in vielen Teilen identisch. Wer aber JavaScript kennt, wird sofort Konstrukte identifizieren, über welche JavaScript nicht verfügt. Hier: class, privat field, access modifier.

Der Compiler
Der Compiler (tsc.exe) übersetzt den TypeScript Code in JavaScript. Der generierte JavaScript Code enthält keine Besonderheiten, welche ein Plug-In oder ein zusätzliches Framework erfordern. Konstrukte die JavaScript nicht kennt, werden entweder in JavaScript Code nachgebildet (class) oder einfach weggelassen, da sie in JavaScript nicht benötigt werden (Typen). Der Compiler ist Self Hosted, das bedeutet, er ist ebenfalls in TypeScript geschrieben.

Die Definition Files
Mit TypeScript kann man, genau wie mit JavaScript, untypisiert arbeiten. Dafür steht das Keyword „any“ zur Verfügung. Damit man den Vorteil des Typen-Systems von TypeScript nutzen kann, sind nebst den Basis-Typen (int, string, bool usw.) auch weitere Typen erforderlich, welche z.B. vom Browser bereitgestellt werden. Diese Typen werden in sogenannten „declaration files“ (auch genannt „typings“) definiert. Diese Files haben die Dateiendung „.d.ts“. Das TypeScript SDK bringt dabei bereits ein solches declaration file mit. In dieser Datei („lib.d.ts“) sind alle Browser Typen definiert. Als Beispiel die Funktion “eval”: