Blog

One to rule them all – TypeScript to the rescue!?

In den letzten Jahren hat sich die Entwicklung von Web-Anwendungen stark verändert. Große komplexe System leben im Browser. Gerade Frameworks wie Angular oder ReactJS zeigen diesen Trend sehr deutlich. Dabei ist JavaScript dafür eigentlich gar nicht gebaut: Es war als HTML-Erweiterung geplant und nicht als universelle Sprache des Web. Deswegen ist im Moment TypeScript (gerade im Zusammenhang mit Angular) in aller Munde. Mit seinem statischen, optionalen (!) Typsystem setzt es dabei auch niedrige Einstiegshürden.

TypeScript ist eine Obermenge von JavaScript, d.h., jedes JavaScript-Programm ist ein TypeScript-Programm:

 

So kann der Compiler mit wenigen Stunden Aufwand selbst in ein großes Softwareprojekt eingeführt werden, (fast) ohne den Code zu ändern. Die Vorteile der statischen Typisierung kann man dann nach und nach intensiver nutzen. Die Neuerungen an TypeScript sind konservativ und orientieren sich an bestehenden Sprachen. Genau wie JavaScript hat TypeScript Funktionen erster Klasse (Funktionen sind Daten) und höherer Ordnung (Funkionen können andere Funkionen als Parameter nehmen), und kann damit der Familie der Funktionalen Programmiersprachen zugeordnet werden.

Der Compiler ist in TypeScript geschrieben, läuft in Node.js und lässt sich genauso gut in CLI-basierte Entwicklungsumgebungen oder emacs integrieren wie in Eclipse oder VisualStudio. Es unterstützt die gängigen JavaScript-Modulsysteme und skaliert gut in großen Softwareprojekten. Ich will im Folgenden zunächst die Sprache vorstellen und versuchen, ein Gefühl zu dafür zu geben, was es heißt, in TypeScript zu denken.

Die Funktion add erwartet nun also zwei Parameter vom Typ number und gibt ebenfalls einen Wert vom Typ number zurück. Wenn wir nun diesen Code wieder kompilieren und ausführen, ist das Ergebnis identisch. Das Besondere hier: Die JavaScript-Datei hat sich nicht verändert – TypeScript entfernt alle Typinformationen.
Gut, provozieren wir einen Fehler: var result = add(1, ‚foo‘);
Je nach IDE wird dieser Code nicht automatisch kompiliert. Wenn wir dies aber nun manuell mit tsc tun, passieren zwei Dinge. Wir bekommen eine Fehlermeldung error TS2345: Argument of type ’string‘ is not assignable to parameter of type ’number‘. Trotzdem wird eine JavaScript-Datei erzeugt (wenn wir diese kompilieren und ausführen, bekommen wir als Ausgabe 1foo).
Wenn wir verhindern wollen, dass bei einem Fehler JavaScript erzeugt wird, können wir in der tsconfig.json einfach das Property noEmitOnError auf true setzen. Die Datei tsconfig.json enthält die Konfiguration für den TypeScript Compiler.

{
  "compilerOptions": {
    "target": "es5"
  }
}

Diese Konfiguration stellt sicher, dass der TypeScript Code in ES5 kompiliert wird. In vielen IDEs reicht die tsconfig.json auch schon aus, damit der Code automatisch kompiliert wird.

Vor allem in größeren Projekten verliert man schnell den Überblick. Hier sind strukturiertere Sprachen gegenüber JavaScript deutlich im Vorteil. Durch die Typannotationen ist es TypeScript jedoch möglich, mehr über den Code zu erfahren und die Entwickler vorab über Probleme zu informieren. So können auch größere Projekte problemlos refactored und gemanagt werden. Dabei helfen auch Tools wie das typescript-generator Maven Plugin. Damit können z.B. DTO-Klassen von REST-Schnittstellen direkt in Typen von TypeScript-Klassen erzeugt werden. So lässt sich u.a. API-Kompatibilität sicherstellen.

Für kleinere Projekte, die nur wenige Codezeilen ohne größeren Wartungsaufwand enthalten, ist es unwahrscheinlich, dass TypeScript seine Vorteile ausspielen kann. Hier ist man im Regelfall schneller mit purem JavaScript. Sobald es sinnvoll wäre, Typen zu definieren, bessere Codevervollständigung zu haben oder Code refactored werden muss, ist TypeScript die Sprache der Wahl.

typescript_in_action

Holisticon AG — Teile diesen Artikel

Über den Autor

Die Holisticon AG ist eine Management- und IT-Beratung aus Hamburg. Wir entwickeln beste Individualsoftware, Webplattformen und Apps. Geschäftsprozesse durchdringen wir und automatisieren sie. Große Datenmengen machen wir mit Smart-Data-Ansätzen beherrschbar. ...und das alles agil.

Antwort hinterlassen