TypeScript-Tipps: Compilierung nach JavaScript automatisieren
Früher oder später muss der TypeScript-Code nach JavaScript compiliert werden. Dies sollte idealerweise automatisch passieren. Dieser Beitrag beschreibt, wie sich die TypeScript-Compilierung automatisieren lässt.
In der Reihe TypeScript-Tipps kümmern wir uns heute um das Tooling für Entwickler. Früher oder später muss der TypeScript-Code nach JavaScript compiliert werden. Das sollte idealerweise kein manueller Schritt sein.
Dieser Beitrag beschreibt, wie sich die Compilierung von TypeScript nach JavaScript automatisieren lässt.
Manuelle Compilierung mit dem TypeScript-Compiler
Für den modernen TypeScript-Entwickler besteht eigentlich keine Notwendigkeit mehr, JavaScript zu schreiben. Selbst wenn JavaScript erzeugt werden muss, kann der Code problemlos in TypeScript geschrieben werden.
Das geht denkbar einfach:
- Visual Studio Code öffnen
- TypeScript -Datei anlegen (.ts)
- TypeScript schreiben
- Fertig
Zugegeben, jetzt fehlt noch das JavaScript. Dieses wird mit einem Aufruf von tsc, dem TypeScript-Compiler, erzeugt. Wer diesen noch nicht installiert hat, der installiert ihn mittels node.js package manager: npm install typescript -g.
Der Befehlt tsc <dateiname>.ts erzeugt dann die JavaScript-Datei (siehe Bild links).
Dieser Befehl muss nach jeder Codeänderung aufgerufen werden, um den dazugehörigen JavaScript-Code zu erzeugen. Ein manueller Schritt sollte das aber nicht sein.
JavaScript bei Änderungen des Codes automatisch erzeugen
Der TypeScript-Compiler bringt von Haus aus die Option -w mit. Diese startet den Compiler im Überwachungsmodus.
Sobald der Compiler Änderungen an der TypeScript -Datei erkennt, erzeugt er die JavaScript-Datei neu (siehe Bild rechts).
Das ist schon alles. Diese Funktion eignet sich besonders, um schnell ein wenig TypeScript zu schreiben und immer das aktuelle JavaScript zur Hand zu haben. In komplexeren Projekten kann die automatische Compilierung auch an anderen Stellen der Build-Pipeline aufgehangen werden, bspw. als gulp-Task.
Zusammenfassung
In diesem Beitrag haben wir gelernt, wie sich der TypeScript-Compiler in den Überwachungsmodus versetzen lässt. Anschließend erzeugt er bei Codeänderungen automatisch die dazugehörige JavaScript-Datei.
Happy Coding!
