Drei Gründe warum TypeScript das bessere JavaScript ist

Microsoft hat letz­tes Jahr das SharePoint Framework für die Entwicklung von Webparts in SharePoint Online vor­ge­stellt. Damit las­sen sich Webparts unter Verwendung neu­es­ter Webtechnologien ent­wi­ckeln, die optisch und tech­nisch dem weit über­le­gen sind, was aktu­ell in SharePoint mög­lich ist. Microsoft setzt bei der Entwicklung kom­plett auf die Sprache TypeScript.

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

Warum TypeScript?

Für alle, die noch keine Erfahrung mit TypeScript gesam­melt haben, lohnt sich ein kur­zer Besuch auf typescriptlang.org. Dort gibt es Hintergründe, das Handbuch, Beispiele sowie einen Playground zum Testen. Der Playground ist sehr emp­feh­lens­wert, um erste TypeScript-Experimente durch­zu­füh­ren und gleich­zei­tig zu beob­ach­ten, wel­ches JavaScript dar­aus erzeugt wird.

Die fol­gen­den Abschnitte sind teil­weise direkt aus der Diskussion zwi­schen JavaScript- und TypeScript-Verfechtern ent­stan­den. Denn es stellt sich die Frage: JavaScript ist sowieso über­all - wieso soll ich eine "neue" Sprache ler­nen, die so ähn­lich und doch anders ist?

TypeScript als Obermenge von JavaScript

Ein sehr wich­ti­ger Punkt als ers­tes: TypeScript bil­det eine Obermenge von JavaScript, ist also JavaScript + X.

Zitat von der Webseite:

TypeScript is a typed super­set of JavaScript that com­pi­les to plain JavaScript.

Any brow­ser. Any host. Any OS. Open Source.

Gültiger JavaScript-Code ist damit auto­ma­tisch gül­ti­ger TypeScript-Code. Wenn es um die Integration mit bestehen­den JavaScript-Bibliotheken geht, dann ist diese damit pro­blem­los mög­lich. Gleichzeitig müs­sen nicht zwangs­weise alle Features von TypeScript zum Einsatz kom­men. Folgenden Code kann man schreiben:

muss es aber nicht.

Ein JavaScript-erprobtes Team kann gän­gige Praktiken bei­be­hal­ten und sich gleich­zei­tig die TypeScript-Sprachfeatures her­aus­pi­cken, die zu einer wei­te­ren Verbesserung ihrer Arbeitsweise füh­ren. 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 stam­men direkt aus den neuen ECMAScript-Standards wie bspw. Promises und let.  Damit ist TypeScript die Sprache, die JavaScript in ein paar Jahren ein­mal sein wird - und die heute schon ver­wen­det wer­den kann, ohne dass feh­lende Browserunterstützung ein Problem ist.

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

Starke Typisierung - weni­ger Laufzeitfehler

Nachdem die JavaScript-Entwickler mit dem vor­he­ri­gen Abschnitt hof­fent­lich abge­holt sind, folgt jetzt ein Feature für alle, die in sta­tisch typi­sier­ten Sprachen zu Hause sind. Bei sta­ti­scher Typisierung ist der Typ einer Variablen zur Übersetzungszeit bekannt. Damit las­sen sich, ver­gli­chen mit dyna­mi­scher Typisierung, bestimmte Fehler bereits zur Übersetzungszeit ent­de­cken, statt erst zur Laufzeit.

Hier ein Beispiel, in dem bereits die mit ECMAScript 2015 ein­ge­führ­ten 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 sta­tisch typi­sierte Sprache, son­dern ermög­licht starke Typisierung. Damit kön­nen Variablen und Methoden typi­siert wer­den, wor­auf­hin bereits zur Übersetzungszeit auch hier bestimmte Fehler auf­ge­deckt wer­den kön­nen. Die Verwendung ist optio­nal, wes­halb auch hier die Zusammenarbeit ver­schie­de­ner JavaScript-Bibliotheken gege­ben ist.

Eine Einführung zur Typisierung in TypeScript fin­det 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 func­tion scoping.

Folgendes Beispiel (Quelle) ver­deut­licht, 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ßer­halb des if-Blocks ver­wen­det, obwohl sie im if-Block dekla­riert wurde. Das ist mög­lich, da der Scope der Variablen in JavaScript durch die Funktion defi­niert wird (=func­tion sco­ping). In C# wäre das nicht mög­lich, da die Variable x nur inner­halb des if-Blocks ver­füg­bar wäre (=block scoping).

Das ist nur ein Beispiel für die Fallstricke, die im JavaScript lau­ern. Die Lösung in ECMAScript 2015 - und damit TypeScript - lau­tet let. Denn mit let dekla­rierte Variablen fol­gen den Regeln des block scopings.

Block sco­ping macht nicht nur den Umstieg für C#-Entwickler leich­ter, es ermög­licht oft auch schlan­ke­ren und bes­ser les­ba­ren Code. Details zu den ver­schie­de­nen Optionen in TypeScript gibt es hier im TypeScript-Handbuch.

Ausblick

Wir haben uns Sprachfeatures von TypeScript ange­schaut, die einen guten Einstieg sowohl für JavaScript- als auch C#-Entwickler ermög­li­chen. Außerdem haben wir uns mit let ein Sprachfeature genauer ange­se­hen und damit viel­leicht Neugier geweckt.

Bei Communardo set­zen 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 tie­fer man in die Sprache ein­steigt, desto mehr Features ent­deckt man, die man nicht mehr mis­sen möchte. Probieren Sie es aus!