wenn wir unser Beispielprojekt aufsetzen. Im letzten Kapitel dieses Buchs ab Seite 740 werfen wir außerdem einen Blick auf die Schematics – die Skripte, die der Angular CLI ihre guten Fähigkeiten verleihen.
4Einführung in TypeScript
»In any modern frontend project, TypeScript is an absolute no-brainer to me. No types, no way!«
Marius Schulz
(Front End Engineer und Trainer für JavaScript)
Obermenge von JavaScript
Für die Entwicklung mit Angular werden wir die Programmiersprache TypeScript verwenden. Doch keine Angst – Sie müssen keine neue Sprache erlernen, um mit Angular arbeiten zu können, denn TypeScript ist eine Obermenge von JavaScript.
Wenn Sie bereits erste Erfahrungen mit TypeScript gemacht haben, können Sie dieses Kapitel überfliegen oder sogar überspringen. Viele Eigenheiten werden wir auch auf dem Weg durch unsere Beispielanwendung kennenlernen. Wenn Sie unsicher sind oder TypeScript und modernes JavaScript für Sie noch Neuland sind, dann ist dieses Kapitel das Richtige für Sie. Wir wollen in diesem Kapitel die wichtigsten Features und Sprachelemente von TypeScript erläutern, sodass es Ihnen im weiteren Verlauf des Buchs leichtfällt, die gezeigten Codebeispiele zu verstehen.
Sie können dieses Kapitel später als Referenz verwenden, wenn Sie mit TypeScript einmal nicht weiterwissen. Auf geht’s!
4.1Was ist TypeScript und wie setzen wir es ein?
TypeScript ist eine Obermenge von JavaScript. Die Sprache greift die aktuellen ECMAScript-Standards auf und integriert zusätzliche Features, unter anderem ein statisches Typsystem. Das bedeutet allerdings nicht, dass Sie eine komplett neue Programmiersprache lernen müssen. Ihr bestehendes Wissen zu JavaScript bleibt weiterhin anwendbar, denn TypeScript erweitert lediglich den existierenden Sprachstandard. Jedes Programm, das in JavaScript geschrieben wurde, funktioniert auch in TypeScript.
TypeScript integriert Features aus kommenden JavaScript-Standards.
TypeScript unterstützt neben den existierenden JavaScript-Features auch Sprachbestandteile aus zukünftigen Standards. Das hat den Vorteil, dass wir das Set an Sprachfeatures genau kennen und alle verwendeten Konstrukte in allen gängigen Browsern unterstützt werden. Wir müssen also nicht lange darauf warten, dass ein Sprachfeature irgendwann einmal direkt vom Browser unterstützt wird, und können stattdessen sofort loslegen. Zusätzlich bringt TypeScript ein statisches Typsystem mit, mit dem wir schon zur Entwicklungszeit eine hervorragende Unterstützung durch den Editor und das Build-Tooling genießen können.
TypeScript-Compiler
TypeScript ist nicht im Browser lauffähig, denn zusammen mit dem Typsystem und neuen Features handelt es sich nicht mehr um reines JavaScript. Deshalb wird der TypeScript-Code vor der Auslieferung wieder in JavaScript umgewandelt. Für diesen Prozess ist der TypeScript-Compiler verantwortlich. Man spricht dabei auch von Transpilierung, weil der Code lediglich in eine andere Sprache übertragen wird. Alle verwendeten Sprachkonstrukte werden so umgewandelt, dass sie dieselbe Semantik besitzen, aber nur die Mittel nutzen, die tatsächlich von JavaScript in der jeweiligen Version unterstützt werden. Die statische Typisierung geht bei diesem Schritt verloren. Das bedeutet, dass das Programm zur Laufzeit keine Typen mehr besitzt, denn es ist ein reines JavaScript-Programm. Durch die Typunterstützung bei der Entwicklung und beim Build können allerdings schon die meisten Fehler erkannt und vermieden werden.
Abbildung 4–1 zeigt, wie TypeScript die bestehenden JavaScript-Versionen erweitert. Der Standard ECMAScript 2016 hat keine nennenswerten Features gebracht, sodass dieser nicht weiter erwähnt werden muss. TypeScript vereint viele Features aus aktuellen und kommenden ECMAScript-Versionen, sodass wir sie problemlos auch für ältere Browser einsetzen können.
Verwirrung um die ECMAScript-Versionen
Der JavaScript-Sprachkern wurde über viele Jahre hinweg durch die European Computer Manufacturers Association (ECMA) weiterentwickelt. Dabei wurden die Versionen zunächst fortlaufend durchnummeriert: ES1, ES2, ES3, ES4, ES5.
Noch während die nächste Version spezifiziert wurde, war bereits der Name ES6 in aller Munde. Kurz vor Veröffentlichung des neuen Sprachstandards wurde jedoch eine neue Namenskonvention eingeführt. Da fortan jährlich eine neue Version erscheinen soll, wurde die Bezeichnung vom schon vielerorts etablierten ES6 zu ECMAScript 2015 geändert.
Aufgrund der parallelen Entwicklung vieler Polyfills und Frameworks findet man in einschlägiger Literatur und auch in vielen Entwicklungsprojekten noch die Bezeichnung ES6.
Abb. 4–1 TypeScript und ECMAScript
Abb. 4–2 Unterstützung durch den Editor: Type Information On Hover
Typisierung
TypeScript ist als Open-Source-Projekt bei der Firma Microsoft entstanden.1 Durch die Typisierung können Fehler bereits zur Entwicklungszeit erkannt werden. Außerdem können Tools den Code genauer analysieren. Dies ermöglicht Komfortfunktionen wie automatische Vervollständigung, Navigation zwischen Methoden und Klassen, eine solide Refactoring-Unterstützung und automatische Dokumentation in der Entwicklungsumgebung. TypeScript kompiliert in reines JavaScript (unter anderem nach ES5) und ist dadurch in allen Browsern und auf allen Plattformen ausführbar.
Neue JavaScript-Features auf einen Blick
Bei Interesse können Sie mithilfe einer Kompatibilitätstabelle2 einen guten Überblick erhalten, welche Features der verschiedenen Standards bereits implementiert wurden.
TypeScript und Angular
Der empfohlene Editor Visual Studio Code unterstützt TypeScript nativ und ohne zusätzliche Plug-ins. In einem Angular-Projekt ist der TypeScript-Compiler außerdem schon vollständig konfiguriert, sodass wir sofort mit der Entwicklung beginnen können.
4.2Variablen: const, let und var
Ursprünglich wurden Variablen in JavaScript mit dem Schlüsselwort var eingeleitet. Das funktioniert noch immer, allerdings kamen mit ECMAScript 2015 die neuen Variablenarten let und const hinzu.
Die schmerzhafte var-heit
Mit dem Schlüsselwort var eingeleitete Variablen
