TypeScript – Ein erster Eindruck

Das erste mal als ich von „TypeScript“ gehört habe dachte ich nur „oh nein nicht schon wieder“. Als hätten wir nicht bereits genug JavaScript-Preprozessoren oder Sprachabwandlungen. Warum konzentriert man sich nicht lieber auf die Weiterentwicklung des ECMA-Script Standards und JavaScript selbst?

Die Meinung sollte sich auch so schnell nicht ändern. Nach meinen Vorträgen Ende 2013 auf der IPC in München gönnte ich mir jedoch auch noch einen TypeScript-Vortrag. Der Vortrag war sehr gut gemacht und ging unter anderem auch ganz speziell darauf ein, wie TypeScript letztendlich wieder zu JavaScript umgewandelt wird… Daraus ergaben sich für mich neue Erkenntnisse und ich beschloss, TypeScript doch einmal eine kleine Chance zu geben.

Typensicherheit ohne Performanceverluste

Tatsächlich sah der im Vortrag präsentierte resultierende JavaScript-Code ziemlich exakt so aus, wie ich ihn von Hand geschrieben hätte. Wie kann das sein? TypeScript fügt doch Dinge wie Typsicherheit, Interfaces, etc. hinzu… Ah… Im Laufe des Vortrages stellte sich heraus, dass diese Typsicherheit ausschliesslich während des Compile-Vorgangs bzw. bereits in der IDE sichergestellt wird. Im resultierenden JavaScript fallen die ganzen Typen einfach wieder raus.

Wieso das? Warum führen wir Typsicherheit ein und entfernen sie anschliessend wieder? Hätten wir sie dann nicht gleich weglassen können? Nein! Die Idee ist die folgende: Wissen wir zur Entwicklungs oder Compile-Zeit, dass alle Typen korrekt verwendet werden, dann werden die Typen definitiv auch während des Programmablaufes im Browser stimmen. Von daher brauchen wir nicht während der Laufzeit auch noch die Typen prüfen, sondern verlassen uns darauf, dass Sie ja vorher richtig angegeben und somit richtig sein *müssen*.

Das heisst wir haben Typsicherheit ohne auch nur den geringsten Performanceverlust. Schonmal nicht schlecht. Was bietet TypeScript noch?

AutoComplete!

Nun – wenn wir Typsicherheit haben… dann müsste eine gute IDE doch… Genau! Wunderschönes AutoComplete bieten, wie man das beispielsweise aus anderen Sprachen gewohnt ist. Natürlich kann man in reinem JavaScript auch wunderschön objektorientiert programmieren, aber was mir bislang immer schmerzlich gefehlt hat war ein sauberes AutoComplete. PHPStorm macht per se schon einen relativ guten Job was das angeht, aber durch meine Liebe zu (anonymen) AMD-Modulen hat es eigentlich nicht wirklich eine Chance die tatsächlich richtigen „Klassen“ als solche zu erkennen.

Mit TypeScript ist das anders. Gerade mit PHPStorm 7 funktioniert die Integration riiichtig gut und ich bekomme volles AutoComplete für alle meine Klassen, Typen, Interfaces. Einmal ein paar Tage mit diesem Feature gearbeitet, wird man es kaum noch hergeben wollen. Eigentlich war hier für mich schon entschieden TypeScript definitiv einmal in einem grösseren Projekt einsetzen zu wollen (lohnen sich doch gerade in grösseren Projekten die Autocomplete-Features, da man unmöglich alle Klassen/Methoden, etc. im Kopf haben kann).

Libraries – mist die sind ja noch plain JavaScript

Natürlich wird man nun nicht alle Bibliotheken die man einsetzt nach TypeScript übersetzen wollen. Wie nutzt man diese aber nun sauber in einem TypeScript kontext? Nun 🙂 Glücklichweise ist das gar kein Problem! Entweder man nutzt sie einfach direkt ganz normal und dann eben ohne Typsicherheit und Autocomplete, oder man verwendet sogenannte Type-Definitions. Anstatt die JavaScript-Bibliotheken nach TypeScript zu übersetzen (was völliger Blödsinn wäre), haben ein paar Leute angefangen die Bibliotheken in TypeScript zu „dokumentieren“.

Was heisst das? Es wurden Definitions-Dateien angelegt, welche genau angeben, welche Methoden/Klassen/Typen/etc. eine Bibliothek beinhaltet. Anschließend bindet man einfach neben der JavaScript-Bibliothek noch die Definitionsdatei für den TypeScript-Compiler und die IDE mit ein. Im kompilierten Resultat werden diese wie gewohnt nicht verwendet, aber IDE und Compiler wissen, was die Bibliothek bietet und wir bekommen auch für diese Typsicherheit und AutoComplete!

Eine gute Quelle für diese Type-Definitionen findet ihr auf Github unter: https://github.com/borisyankov/DefinitelyTyped

Probleme mit RequireJS

RequireJS ist über die Jahre ein treuer Begleiter in JavaScript-Projekten geworden, also wollte ich die Tradition fortführen und Require auch bei meinen TypeScript-Projekten einsetzen. Hierbei ergaben sich dann leider ernsthaftere Probleme, die letztendlich dann aber auch behoben werden konnten.

TypeScript-Module als AMD-Modul kompilieren

Das ging noch relativ einfach. Dem TypeScript-Compiler muss lediglich die Option „–module amd“ mitgegeben werden, dann kompiliert er brav als AMD-Modul. Ferner sollte dann „exports“ verwendet werden, anstelle der sonst in Typescript üblichen Moduldefinitionen.

Aus folgender kleinen TypeScript-Datei:

Wird folgender JavaScript-Code:

Wie gewohnt kann ich die Datei dann via require js aus einer anderen Quelle einbinden:

Und das Ergebnis in JavaScript:

 

Soweit alles bestens 🙂 Autocomplete funktioniert ebenfalls:

autocomplete

Soweit so gut. In der Hoffnung das würde mit externen JavaScript-Bibliotheken und den Type-Definitionen dazu so schön funktionieren wurde ich aber herb enttäuscht.

Externe Bibliotheken mit RequireJS und AMD

Hier habe ich wirklich lange gekämpft. Die Lösung war dann aber doch erschreckend einfach. Hier das Beispiel für die korrekt eingebundene Bibliothek „lodash“:

Den Weg zur Lösung fand ich auf Codebelt. Hier findet ihr auch den detaillierten Weg zur Lösung. Mit diesen vier Zeilen habe ich volle Typsicherheit für extern eingebundene JavaScript-Bibliotheken, die dann auch im resultierenden JavaScript sauber als AMD-Modul geladen werden können.

Fazit

TypeScript erfindet die Welt nicht neu, es rüstet ein paar Features nach, die man beispielsweise aus der Java-Welt kennt. Wer bereits JavaScript kann und z.B. Java kennt wird sich extrem leicht tun, TypeScript zu lernen. Es bleibt vollständig Browser-kompatibel, da es sich in reines JavaScript kompilieren lässt und es beeinträchtigt auch die Performance nicht. Features wie AutoComplete in der IDE und Typsicherheit können zu besserem Code und einer effizienteren Programmierung führen.

Trotz allem ist es kein Allheilmittel. Wer kein gutes JavaScript programmieren kann, wird auch in TypeScript keine besseren Ergebnisse erzielen. Das heisst der Umstieg auf TypeScript lohnt sich in meinen Augen ohnehin erst, wenn man in JavaScript gut genug ist auch ohne TypeScript auszukommen :).

Wer jedoch fit in JavaScript ist und gerade in grösseren Projekten sauber objektorientiert arbeiten möchte, der wird in TypeScript vielleicht genau das finden, was er die ganze Zeit in JavaScript vermisst hat. So geht es mir zumindest.

Als Beispiel für ein umfangreicheres Projekt verweise ich hier gerne auf mein kleines HTML5-Game-Experiment, zu dem ich demnächst auch noch ein paar Zeilen schreiben werde: Spaceship in Trouble!

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.