TypeScript ist eine typisierter Teilmenge von JavaScript mit einer schönen und sauberen Syntax. Der TypeScript-Compiler erzeugt aus TypeScript reinen JavaScript Code, der auf jedem Browser, jedem Host und jedem System läuft. Zusätzlich ist TypeScript OpenSource und steht bei CodePlex unter der Apache License v 2.0 zum Download bereit.

Gerade bei den immer größer und komplexer werdenden Enterprise-Anwendungen wird zunehmend JavaScript verwendet. Hier spielen die Unzulänglichkeiten von JavaScript (keine Typisierung, ungewohnte Syntax, keine IntelliSense Unterstützung usw.) immer wieder eine zentrale Rolle.
Doch damit ist jetzt Schluss! 🙂

Mit TypeScript gibt es endlich Begriffe wie class, module (Namespace) und interface, die einen besser lesbaren Code ermöglichen, aber die komplette Flexibilität von JavaScript beibehalten. Class und Module sind zudem Bestandteil des ECMAScript 6 Standards, so das hier eine Syntax verwendet wird die früher oder später sowieso eingesetzt wird. Somit lernt man nicht für die Mülltonne 😉
Es ist möglich Variablen und Funktionsparametern zu typisieren. Damit kann man jetzt sicherstellen, dass Objekte, die an Funktionen übergeben werden, eine gewisse Struktur haben müssen. Haben die Objekte diese Struktur nicht, knallt’s! Strukturen werden über Interfaces definiert. TypeScript Interfaces sind also ähnlich zu Interfaces in C# und bieten einen Vertrag, dass ein Objekt genau diese Eigenschaften bereitstellt. Folgendes Beispiel verdeutlicht dies:

Endlich bekommt man den Fehler im Visual Studio oder beim Drücken von F5 und nicht erst wenn man durch fünf Seiten navigiert ist, um dann festzustellen, dass einer Funktion ein falscher Wert übergeben wurde 🙂

Damit der Compiler nicht mehr meckert macht man einen Kommentar aus der letzten Zeile und der Compiler erzeugt folgendes JavaScript:

   1: function greeter(person) {

   2:     return "Hallo " + person.name + " " + person.lastname;

   3: }

   4: var user = {

   5:     name: "Nico",

   6:     lastname: "Bolender"

   7: };

   8: var user2 = {

   9:     name: "Nico",

  10:     age: 28

  11: };

  12: alert(greeter(user));

Wie man aus dem erzeugten Code erkennen kann ist das ganz normales JavaScript so wie es bisher in der Regel immer von einem selbst geschrieben wurde. Der Compiler entfernt also alles was nicht JavaScript ist, wie z.B. das Interface und die Typisierungen. Er entfernt auch Kommentare und unnötige Zeilenumbrüche.

Es ist sogar möglich andere JavaScript Frameworks wie jQuery, Knockout usw. im TypeScript Code zu verwenden. Wenn man möchte kann man sogar reinen JavaScript Code in der TypeScript Datei schreiben. Man ist also komplett frei bei der Entwicklung, der Compiler weiß was er machen muss damit am Ende valides JavaScript rauskommt 🙂

Das Einbinden von externen Bibliotheken erfolgt ganz einfach indem man den Rootnamespace bekannt gibt.

Beispiel für jQuery:
declare var $;

Beispiel für Knockout:
declare var ko;

Danach kann man die Bibliotheken wie gewohnt verwenden 🙂

Durch die Verwendung von sogenannten Declaration Source Files ist es sogar möglich diese Frameworks Typsicher zu verwenden! Die Samples beinhalten schon fertige Declaration Source Files z.B. für jQuery.

Wer ein bisschen experimentieren möchte kann das hier machen oder sich direkt das Visual Studio Plug-In herunterladen.

Ab ins Studio …

Ich habe mir auf jeden Fall das Visual Studio 2012 Plug-In heruntergeladen und installiert! Nachdem man sich das Plug-In heruntergeladen hat, sollte man sich noch dringend die Web Essentials 2012 besorgen. Die Web Essentials sorgen dafür, dass beim Speichern von TypeScript Dateien direkt die JavaScript Dateien kompiliert werden.
Wer sich die Web Essentials nicht herunterladen will (warum auch immer), muss noch ein wenig Handarbeit betrieben. In den Projekteinstellungen meiner Windows Store Anwendung musste ich folgendes in die .jsproj Datei ziemlich am Ende einfügen:

<ItemGroup>
    <AvailableItemName Include="TypeScriptCompile" />
</ItemGroup>
<ItemGroup>
    <TypeScriptCompile Include="$(ProjectDir)***.ts" />
</ItemGroup>
<Target Name="BeforeBuild">
    <Exec Command="&quot;$(PROGRAMFILES)Microsoft SDKsTypeScript.8.0.0	sc&quot; -target ES5 @(TypeScriptCompile ->'&quot;%(fullpath)&quot;', ' ')" />
</Target>

Danach erscheinen beim Drücken von F5 die JavaScript Dateien. Die erzeugten JavaScript Dateien bindet man nach dem Erstellen in seiner HTML-Seite ein.

Debuggen

Nachdem jetzt alles eingerichtet ist und man endlich loslegen kann, stellt sich noch die Frage wie das mit dem Debuggen funktioniert. Eigentlich ist man es ja gewohnt, dass man in die Datei, in der man schreibt, auch einen Haltepunkt setzt. Wie ich aber schon erwähnt habe, benötigt man zum Debuggen an dieser Stelle leider die erzeugte JavaScript Datei.

Man muss also die JavaScript Datei öffnen, die Stelle finden, die man sich gerne näher anschauen möchte und dort den Haltepunkt setzen. Dafür bin ich dann doch sehr dankbar, dass der JavaScript-Code noch nicht minimiert ist 😉

Hier wäre es eine gute Idee gewesen, die Kommentare und die Struktur beizubehalten, welches das Auffinden der gewünschten Stelle erleichtern würden.

Ich denke und hoffe aber, dass die Debug-Funktionalität von TypeScript noch in einer späteren Version der Web Essentials oder dem Visual Studio Plug-In nachgeliefert wird. Aaron Powell beschreibt hier wie man TypeScript mit Chrome debuggen kann, daher wird das bestimmt nicht lange dauern bis das auch im Visual Studio 2012 funktioniert.

Fazit

Dafür, dass TypeScript erst eine Preview ist, macht es für mich schon einen sehr guten Eindruck. Der Compiler funktioniert schon sehr gut und macht das was er soll. Ein entscheidender Vorteil von TypeScript gegenüber ähnlichen Ansätzen wie Dart und SharpScript besteht darin, dass man keine neue Sprache lernen muss, man kann alle Konstrukte von TypeScript nutzen oder eben nicht. Es ist ohne Probleme möglich weiterhin natives JavaScript zu schreiben  – denn JavaScript Code ist valider TypeScript Code! Diese Tatsache ermöglicht die Integration in schon bestehende Projekte ohne den bisherigen geschrieben Code anzufassen. Auch das Einbinden von bekannten JavaScript-Frameworks wie jQuery, Knockout usw. werden vom Compiler ohne Hürden genommen. Man bekommt also ein Werkzeug an die Hand, das einem das Entwickeln mit einer schöne, sauberen und vor allem typsicheren Syntax erleichtern kann. Vor allem bei großen Projekten die unter Umständen unübersichtlich werden, spielt TypeScript damit seine volle Stärke aus!
Für einen produktiven Einsatz sollte man allerdings bedenken, dass es sich gerade um eine erste Preview handelt.

Ich für meinen Teil werde aber versuchen TypeScript wo es geht einzusetzen! 🙂

Mehr Informationen gibt es unter:
http://www.typescriptlang.org/
Why TypeScript