Drei Gründe warum TypeScript das bessere JavaScript ist

Microsoft hat letztes Jahr das SharePoint Framework für die Entwicklung von Webparts in SharePoint Online vorgestellt. Damit lassen sich Webparts unter Verwendung neuester Webtechnologien entwickeln, die optisch und technisch dem weit überlegen sind, was aktuell in SharePoint möglich ist. Microsoft setzt bei der Entwicklung komplett auf die Sprache TypeScript.

Welche Vorteile TypeScript gegenüber JavaScript hat, darum soll es in diesem Beitrag gehen.

Warum TypeScript?

Für alle, die noch keine Erfahrung mit TypeScript gesammelt haben, lohnt sich ein kurzer Besuch auf typescriptlang.org. Dort gibt es Hintergründe, das Handbuch, Beispiele sowie einen Playground zum Testen. Der Playground ist sehr empfehlenswert, um erste TypeScript-Experimente durchzuführen und gleichzeitig zu beobachten, welches JavaScript daraus erzeugt wird.

Die folgenden Abschnitte sind teilweise direkt aus der Diskussion zwischen JavaScript- und TypeScript-Verfechtern entstanden. Denn es stellt sich die Frage: JavaScript ist sowieso überall - wieso soll ich eine "neue" Sprache lernen, die so ähnlich und doch anders ist?

TypeScript als Obermenge von JavaScript

Ein sehr wichtiger Punkt als erstes: TypeScript bildet eine Obermenge von JavaScript, ist also JavaScript + X.

Zitat von der Webseite:

TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.

Any browser. Any host. Any OS. Open Source.

Gültiger JavaScript-Code ist damit automatisch gültiger TypeScript-Code. Wenn es um die Integration mit bestehenden JavaScript-Bibliotheken geht, dann ist diese damit problemlos möglich. Gleichzeitig müssen nicht zwangsweise alle Features von TypeScript zum Einsatz kommen. Folgenden Code kann man z.B. schreiben:

Ein JavaScript-erprobtes Team kann gängige Praktiken beibehalten und sich gleichzeitig die TypeScript-Sprachfeatures herauspicken, die zu einer weiteren Verbesserung ihrer Arbeitsweise führen. Hinweise zum Übergang von JavaScript zu TypeScript gibt es hier: Migrating from JavaScript.

Nun zum "X", also zu dem, was TypeScript mehr kann. Viele Sprachelemente stammen direkt aus den neuen ECMAScript-Standards wie bspw. Promises und let.  Damit ist TypeScript die Sprache, die JavaScript in ein paar Jahren einmal sein wird - und die heute schon verwendet werden kann, ohne dass fehlende Browserunterstützung ein Problem ist.

TypeScript ist also keine neue Sprache. Es ist JavaScript aus der Zukunft.

Starke Typisierung - weniger Laufzeitfehler

Nachdem die JavaScript-Entwickler mit dem vorherigen Abschnitt hoffentlich abgeholt sind, folgt jetzt ein Feature für alle, die in statisch typisierten Sprachen zu Hause sind. Bei statischer Typisierung ist der Typ einer Variablen zur Übersetzungszeit bekannt. Damit lassen sich, verglichen mit dynamischer Typisierung, bestimmte Fehler bereits zur Übersetzungszeit entdecken, statt erst zur Laufzeit.

Hier ein Beispiel, in dem bereits die mit ECMAScript 2015 eingeführten Binär- und Oktal-Literale zum Einsatz kommen:

let decimal: number = 42; 
let hex: number = 0xf00d; 
let binary: number = 0b1010; 
let octal: number = 0o744;

TypeScript macht dabei aus JavaScript keine statisch typisierte Sprache, sondern ermöglicht starke Typisierung. Damit können Variablen und Methoden typisiert werden, woraufhin bereits zur Übersetzungszeit auch hier bestimmte Fehler aufgedeckt werden können. Die Verwendung ist optional, weshalb auch hier die Zusammenarbeit verschiedener JavaScript-Bibliotheken gegeben ist.

Eine Einführung zur Typisierung in TypeScript findet sich im Handbuch unter Basic Types.

Variablendeklaration: Function Scoping (var) vs. Block Scoping (let)

Für Entwickler aus Sprachen wie C# gibt es eine sichere Fehlerquelle in JavaScript: das function scoping.

Folgendes Beispiel (Quelle) verdeutlicht, was das bedeutet:

function f(shouldInitialize: boolean) {
if (shouldInitialize) {
var x = 10;    
}
return x;
}
f(true); // returns '10'
f(false); // returns 'undefined'

Die Variable x wird hier außerhalb des if-Blocks verwendet, obwohl sie im if-Block deklariert wurde. Das ist möglich, da der Scope der Variablen in JavaScript durch die Funktion definiert wird (=function scoping). In C# wäre das nicht möglich, da die Variable x nur innerhalb des if-Blocks verfügbar wäre (=block scoping).

Das ist nur ein Beispiel für die Fallstricke, die im JavaScript lauern. Die Lösung in ECMAScript 2015 - und damit TypeScript - lautet let. Denn mit let deklarierte Variablen folgen den Regeln des block scopings.

Block scoping macht nicht nur den Umstieg für C#-Entwickler leichter, es ermöglicht oft auch schlankeren und besser lesbaren Code. Details zu den verschiedenen Optionen in TypeScript gibt es hier im TypeScript-Handbuch.

Ausblick

Wir haben uns Sprachfeatures von TypeScript angeschaut, die einen guten Einstieg sowohl für JavaScript- als auch C#-Entwickler ermöglichen. Außerdem haben wir uns mit let ein Sprachfeature genauer angesehen und damit vielleicht Neugier geweckt.

Bei Communardo setzen wir TypeScript aktiv in Projekten ein, u.a. bei der Arbeit mit dem SharePoint-Framework, aber auch für die Erstellung von JavaScript-Bibliotheken. Je tiefer man in die Sprache einsteigt, desto mehr Features entdeckt man, die man nicht mehr missen möchte. Probieren Sie es aus!