TypeScript als JavaScript-Alternative

Ich möchte in diesem Beitrag die Programmiersprache TypeScript vorstellen und Gründe aufzeigen, warum sie der Verwendung von JavaScript als Programmiersprache für die Entwicklung dynamischer Webapplikationen vorzuziehen ist.

Der JavaScript-Albtraum

Im Laufe der letzten zehn Jahre beobachte ich die Entwicklung im Web-Development-Bereich zunehmend mit Sorge: Immer mehr namhafte und zukunftsweisende Frameworks und Systeme wurden veröffentlicht, die allesamt auf der Programmiersprache JavaScript aufbauten.

JavaScript besteht in dessen Ursprung seit Mitte der 90er Jahre. Da die Sprache auf Kosten der Abwärtskompatibilität im Laufe ihrer Entwicklung kaum an neuen Features und Sprachkonstrukten dazugewonnen hat, lässt sie zahlreiche Möglichkeiten zur Strukturierung unseres Quellcodes schmerzlich vermissen. Zudem bietet sie, selbst in der aktuellsten Version “ECMAscript 2016“, lediglich ein dynamisches sowie schwaches Typsystem, durch dessen Anwendung impliziter Typumwandlungen es für den Entwickler zum Auftreten schwer diagnostizierbarer Bugs kommen kann.

Je größer die in JavaScript geschriebenen Projekte werden, desto schwieriger wird es oft, die Kontrolle über den JavaScript-Teil zu bewahren. Für viele Web-Developer ist die beschriebene Entwicklung im JavaScript-Bereich – aber auch die Sprache selbst – daher ein einziger Albtraum.

Was ist TypeScript?

Laut offizieller Aussage von Microsoft wurde TypeScript 2012 ins Leben gerufen, um damit eine skalierbare Programmiersprache für die Entwicklung von JavaScript-Applikationen zu schaffen.

Durch die modernen Sprachkonstrukte kann man den Quellcode gut strukturieren und zuverlässiger formulieren.

TypeScript bietet Sprachkonstrukte, die in allen modernen Programmiersprachen zu finden sind, wie beispielsweise Klassen, Interfaces, Vererbung, Module, anonyme Funktionen, Generics und nicht zuletzt natürlich eine statische Typisierung.

Der TypeScript-Compiler kompiliert den Quellcode nicht etwa in ein eigenes, binäres oder sogar intermediales Format, sondern wandelt ihn lediglich in regulären JavaScript-Code um. Diese Sonderform eines Compilers bezeichnet man auch als Transpiler.

Warum sollte ich TypeScript verwenden?

Durch die modernen Sprachkonstrukte der Sprache können wir unseren hierin verfassten Quellcode mit einer sehr guten Struktur versehen und ihn somit zuverlässiger formulieren und problemlos hochskalieren, um damit auf die wachsenden Anforderungen unserer Anwendung zu reagieren.

Zudem ermöglicht uns die strikte Typisierung den Einsatz hochproduktiver und effizienter Entwicklungswerkzeuge, was uns auch die Durchführung von Code-Refakturierungen vereinfacht. Die Programmierung in TypeScript wird von allen führenden Entwicklungsumgebungen und Texteditoren unterstützt, darunter PHPStorm, WebStorm, Eclipse, Visual Studio, Sublime und Emacs.

Was ist mit meinen bestehenden JavaScript-Projekten?

Da es sich bei TypeScript um ein Superset der Sprache JavaScript handelt, stellt jedes gültige JavaScript-Programm auch ein syntaktisch gültiges TypeScript-Programm dar. Somit können wir in allen TypeScript-Dateien auch reguläres JavaScript schreiben, welches dann vom Compiler standardmäßig unverändert nach JavaScript kompiliert wird.

Daher können all unsere bestehenden JavaScript-Quellcodes problemlos weiterverwendet und Stück für Stück in die TypeScript-Syntax und somit in eine verbesserte und typisierte Struktur überführt werden. Das macht das progressive Umschreiben bestehender JavaScript-Projekte sehr einfach, da man mit dieser Technik nahtlos all seine bestehenden JavaScript-Dateien umschreiben kann, ohne dabei bestehendes Verhalten verändern oder sogar sein Projekt mittels eines “Big Bangs“ umstellen zu müssen.

Auch das Google-Entwicklungsteam hinter Angular 2 verwendet als Programmiersprache TypeScript für die Weiterführung dieses Projekts, nachdem die erste Version – “AngularJS“ – noch mit reinem JavaScript-Code realisiert wurde. Das Team stellte beim Umschreiben ihrer bestehenden Quellcodes wiederholt fest, dass ihr eigener Code hierdurch wesentlich strukturierter und besser lesbar wurde, sodass in diesem Zuge zahlreiche Bugs im bestehenden JavaScript-Altcode ans Tageslicht befördert wurden.

Wie sieht es mit externen JavaScript-Bibliotheken aus?

Für alle wichtigen JavaScript-Erweiterungen und -Frameworks existieren sogenannte Type-Definition-Dateien, in denen die abstrakte Struktur aller Elemente für die entsprechenden Bibliotheken festgelegt sind.

Alle extern genutzten Bibliotheken und Frameworks können weiterverwendet und innerhalb bestehender Projekte typisiert eingesetzt werden.

Die Definitionsdateien können beim Kompilieren eingebunden werden, damit die externen Bibliotheken aus all unseren TypeScript-Dateien strukturiert und typisiert angesprochen werden können. Die JavaScript-Bibliotheken selbst werden zur Laufzeit weiterhin wie gehabt als JavaScript-Dateien inkludiert.

Somit können auch alle extern genutzten JavaScript-Bibliotheken und -Frameworks problemlos weiterverwendet und innerhalb bestehender Projekte typisiert eingesetzt werden, was die lückenlose Überführung unseres gesamten Projektcodes nach TypeScript ermöglicht.

Was sind die wichtigsten Features von TypeScript?

Hier möchte ich alle wichtigen Sprachkonstrukte von TypeScript kurz vorstellen. Alle Punkte stellen Verbesserungen dar, die in JavaScript bislang noch nicht nativ implementiert sind:

» Klassen, Schnittstellen, Abstraktion und Vererbung

In TypeScript können Klassen je nach Belieben und Bedarf mit Objektfeldern und Objektmethoden sowie mit statischen Feldern und statischen Funktionen erstellt werden. Klassen können andere Klassen erweitern und auch das Definieren abstrakter Klassen und Schnittstellen ist möglich, um den Quellcode unserer Applikation mit einer klaren und pragmatischen Struktur versehen zu können.

» Enumerations

Enumerations bieten eine typisierte Möglichkeit, um mehrere zusammengehörige Konstanten einer Aufzählung in einer separaten und dafür vorgesehenen Kompilierungseinheit zu definieren. Hierdurch kann eine beliebige Anzahl zusammengehöriger Konstanten innerhalb einer Enumeration gruppiert und in unserem Quellcode typisiert eingesetzt werden.

» Generics

Der optionale Einsatz von Generics ermöglicht uns die strikte Typisierung von Elementen innerhalb beliebiger vorgegebener oder eigens definierter Datenstrukturen bei gleichzeitiger Beibehaltung der Flexibilität hinsichtlich der tatsächlich verwendeten Datentypen. Als einfaches Beispiel lässt sich in unserem Code ein Array definieren, welches nur Strings beinhalten darf.

» Modularisierung

TypeScript unterstützt mittels der Definition von Modulen das Kapseln von Klassen, Interfaces, Funktionen und Variablen in eigene Namensräume und schließt somit Namenskollisionen aus, was in größeren Projekten sowie beim intensiveren Einsatz von externen Bibliotheken ein sehr wertvolles Feature darstellt.

» Statische Typisierung

Wie der Name der Sprache bereits impliziert, ist wohl eines der wichtigsten Features die Möglichkeit, alle Variablen, Funktionsparameter und Rückgabewerte mit einer statischen Typisierung zu versehen. Durch das strikte Typsystem kann der TypeScript-Compiler auf Verletzungen der Typzuweisung mit konkreten Fehlern und Warnungen reagieren. Außerdem wird den Entwicklungsumgebungen hierdurch ermöglicht, eine wesentlich zielführendere Autovervollständigung anzubieten.

— TypeScript-Workshop —

Du möchtest dich oder Dein Team in TypeScript schulen? Christopher Stock bietet dazu den passenden Workshop: Ein praktischer Einstieg mit TypeScript und HTML5. Auf der Workshop-Seite findest Du alle weiteren Informationen.

Darum TypeScript!

Wie beschrieben gelingt der Umstieg von JavaScript auf TypeScript mühelos und das Umschreiben unserer Projekte ist nahtlos möglich. Ich möchte jedem Entwickler die Einführung von TypeScript sehr an Herz legen, da diese einen großen Gewinn für jedes JavaScript-Projekt darstellt.

TypeScript ist hervorragend geeignet für alle Entwickler, die JavaScript aufgrund dessen Dynamik lieben und für alle Entwickler, die JavaScript aufgrund dessen Nachlässigkeit hassen.

Praktischer Einstieg gefällig?

Eine praktische Einführung in die Installation und die Verwendung von TypeScript folgt im zweiten Teil meines Blog-Beitrags, der das technische Pendant zu diesem Artikel darstellt.

Dieser Eintrag wurde veröffentlicht in Development, JavaScript und verschlagwortet mit , , von Christopher Stock. Permanenter Link zum Eintrag.

Über Christopher Stock

Christopher ist als Senior Developer bei der Mayflower GmbH tätig und entwickelt dort hochwertige Web-Applikationen, unter anderem mit Java, TypeScript und PHP. Zu seinen Hobbys gehören neben der Programmierung auch Designen, Joggen, Skifahren, Schwimmen, Fitness und Verreisen. Trotz mehr als 15 Jahren Berufserfahrung als Softwareentwickler im Web-, Desktop- und Mobile Application-Bereich liebt er die Programmierung noch immer wie bei seinem allerersten GW-BASIC Programm.

Für neue Blogupdates anmelden:


11 Gedanken zu “TypeScript als JavaScript-Alternative

  1. Nenn‘ mich altmodisch, aber ich finde es seltsam, mit einem Transpiler Code zu erzeugen, der im schlimmsten Fall von einer weiteren Engine interpretiert wird (oder in Bytecode kompiliert, oder gar direkt auf die Maschine). Vertraut man der Karre direkt oder testen man den Output separat?

    Das Motto von TypeScript lautet „JavaScript that scales“ – und dann muss ich von Hand geschriebene Type Definitions von definitelytyped.org runterladen. So sie jemand für mich geschrieben hat, und sie auf meine Version von X passen.

    Ist der Produktivitätshub so enorm, dass man sich das leisten kann/will?

    Danke dir!

    • Hi Sascha,

      bei dem vom TypeScript-Compiler (=Transpiler) erzeugten Code handelt es sich um 100% valides JavaScript. Wie bei jeder Sprache kann man auch bei TypeScript dem Compiler zu 100% vertrauen. Und auch bei definitelytyped.org gibt es genau definierte Prozesse, um die erforderliche Qualität der Definitionsdateien zu gewährleisten.

      Für mich überwiegen ganz klar die genannten Vorteile bei der Einführung von TypeScript. Der Produktivitätsschub macht sich vor allem bei der Überführung von Legacy-Code sowie großen Projekten bemerkbar.

      Ich schlage Dir vor, TypeScript im Rahmen eines einfachen und übersichtlichen Projekts auszuprobieren und dessen Vorteile unmittelbar zu erleben. In meinem nächsten Blog-Beitrag gebe ich Dir gerne eine praktische Einführung in die Installation und die Verwendung von TypeScript. :)

      Liebe Grüße
      Christopher

  2. Der Artikel sagt, dass dynamisch typisierte Sprachen auch immer schwach typisiert sind. Das stimmt so aber nicht. JavaScript ist dynamisch und schwach typisiert, genauso wie PHP. Python, Ruby und Smalltalk sind aber z.B. dynamisch und stark typisiert bzw. fallen unter Duck Typing. Solchen Unsinn wie 5 == „5“ -> true kann man damit nicht treiben.

  3. Hi Christopher,

    nach dem ich deine (inzwischen) beiden Blog-Beiträge gelesen habe, habe ich TypeScript einmal bei uns in der Firma ausprobiert. Bin angenehm überrascht und konnte in einem kleinen Vortag intern auch andere Entwickler überzeugen, dass es nützlich ist. Vor allem, da wir fast alles nur PHP-Backend-Developer sind und mit JavaScript schon so unsere Schwierigkeiten haben.
    Vielleicht wird unser JavaScript einmal einmal lesbarer und wartbarer. Es kam nur die Frage auf, warum wir nicht gleich ES6 (mit Babel) nehmen.

    Danke für die Beiträge.

    • Hi Erik,
      vielen lieben Dank für Deine Rückmeldung. Ich freue mich sehr, dass Dir mein Beitrag einen Impuls zur Einführung von TypeScript in Eurer Firma geben konnte.

      Deine beiden Fragen kann ich schnell beantworten:

      TypeScript bietet Möglichkeiten zur Strukturierung unseres Quellcodes, die über ES6 hinaus gehen, da es als Superset von JavaScript auf dieser Sprache aufsetzt. Nicht zuletzt unterstützt TypeScript eine strikte Typisierung, welche bei ES6 nicht möglich ist.

      Babel versteht sich, ebenso wie TypeScript auch, als ein JavaScript-Transpiler, bietet aber auch keine statische Typisierung sondern stellt ein sehr flexibles Transpilerframework dar, mit dem Du Dir im Prinzip Deinen eigenen JS-Dialekt zusammenbauen kannst. Vergleichbar sind sie also durchaus, aber mit unterschiedlicher Zielsetzung.

Schreibe einen Kommentar

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