TypeScript Visual Studio Code Tutorial – Build Script

Im zweiten Teil der TypeScript Visual Studio Code Tutorial Reihe richte ich ein Build Script ein um den ganzen Prozess von der Quelldatei bis zum fertigen JavaScript im Web-Ordner komplett automatisch ablaufen zu lassen.

TypeScript Visual Studio Code Tutorial – Build Script

Im letzten Teil gab es eine kurze Einführung in TypeScript mit einem Hello World Beispiel in Visual Studio. Im folgenden Artikel gibt es weitere Details wie die Entwicklung mit TypeScript funktioniert. Ich zeige wie man die Entwicklung mit der IDE soweit automatisiert, damit man sich voll auf den Code konzentrieren kann.

Compiler Optionen

Bisher haben wir den Compiler über die Kommandozeile unter Angabe der zu kompilierenden Datei aufgerufen zum Beispiel so:

tsc helloworld.ts

Als Ergebnis wurde im selben Verzeichnis eine *.js Datei mit dem selben Namen erzeugt. Der Compiler zeigt standardmäßig ohne Angabe eines Dateinamens das selbe Verhalten:

tsc

gibt es jedoch mehr als eine Quelldatei werden alle *.ts Dateien im selben Verzeichnis kompiliert. Das Problem: die Ausgabe erfolgt weiterhin im selben Verzeichnis. In einem großen Projekt möchte man die erzeugten JavaScript Dateien in den Order der Webapplikation legen, weshalb wir dazu zwingend eine Option benötigen. Tatsächlich lässt sich der Compiler durch eine Konfigurationsdatei dahingehend anpassen. Eine solche wird mit dem Befehl:

tsc init

automatisch erstellt. Im Verzeichnis findet man nun eine tsconfig.json Datei. Alternativ kann man diese auch manuell anlegen, da verzichtet man jedoch auf eine gute Dokumentation der einzelnen Einstellungsmöglichkeiten. Eine so manuell angelegte Konfigurationsdatei sieht beispielsweise wie folgt aus:

Herausheben möchte ich die Option outDir mit der wir das Verzeichnis definieren, wohin der Compiler die erzeugten *.js Dateien kopiert. Ich habe dort out eingetragen, erneutes Ausführen des Compilers  erzeugt nun sowohl den Ordner out als auch die Datei out/helloworld.js. Interessantes Detail zu dieser Konfigurationsdatei ist, dass diese für den aktuellen Ordner gültig ist. Wenn man viele *.ts Dateien hat die als *.js Dateien in unterschiedliche Ordner in die fertige Applikation gehören hilft man sich am besten dadurch mehrere Order für die *.ts Quelldateien zu erstellen mit jeweils unterschiedlichen tsconfig.json Dateien mit unterschiedlichen outDir Ordnern.

Eine Auflistung aller Compiler Optionen findet man in der TypeScript Dokumentation. Diese Optionen kann man als JSON definieren oder direkt als Parameter beim Aufruf von tsc auf der Kommandozeile.

Tasks

Als Entwickler ist man gewohnt nach der Codeänderung auf einen Button zu klicken. Der Code wird automatisch erstellt und auch gleich mit oder ohne Debugger gestartet. Genau diese Automatisierung hätte ich auch gerne für die TypeScript Entwicklung. Es gibt viele Tutorials die zeigen, wie man diese Automatisierung mit Tools wie Ant, Grund, Gulp, Make, MSBuild, usw. erledigt. Damit braucht man sich gar nicht beschäftigen! Visual Studio Code bietet den integrierten Task Runner an.

Eingerichtet wird so ein Task über ein neues Kommando. Mit STRG+SHIFT+P und der Suche nach „Configure Task“ gelangt man zur Auswahl verfügbarer Tasks:

Wir müssen nur noch den entsprechenden Task (build) auswählen und schon wird dieser als tasks.json erstellt.

Die erstellte Konfigurationsdatei können wir bei Bedarf ändern. Sie funktioniert bereits so wie definiert. Es wird der TypeScript Compiler tsc aufgerufen. Definiert ist dieser Task als Build-Task, weshalb er mit folgender Tastenkombination über Visual Studio Code automatisch gestartet wird:

SRTG+SHIFT+B startet den Task, dieser wird im Terminal ausgeführt und kompiliert die *.ts Dateien so wie in den zugehörigen tsconfig.json Dateien definiert.

Automatische Builds

Es geht noch besser! Anstatt nun jedes Mal eine komische Tastenkombination zu drücken die man nach einer Woche wieder vergessen hat wäre es doch sinnvoll, wenn Visual Studio Code bei jeder Änderung an einer Quelldatei die *.js Datei automatisch erstellt. Das funktioniert wie folgt. Wir suchen wieder mit SRTG+SHIFT+P nach „Configure Task“ und wählen diesen aus. In der folgenden Auswahl verwenden wir jedoch die zweite Auswahl (watch):

Die automatisch erzeugte Konfigurationsdatei funktioniert auch bereits wie gewünscht.

Man muss nur initial einmal STRG+SHIFT+B drücken und die angezeigte Auswahl „tsc: watch“ anklicken. Danach wird jede Änderung einer *.ts Datei umgehend als *.js ausgegeben. Öffnet mal also Quell- und Zieldatei parallel nebeneinander im Editor sieht man nach jedem Speichervorgang sofort die Änderungen.

Fazit

Mit ein wenig Konfigurationsarbeit fühlt sich die Arbeit an TypeScript Projekten dank der starken Automatisierung in Visual Studio Code sehr gut an. Als Entwickler kann man sich so fast ausschließlich um den Code kümmern und wird nicht ständig durch Interaktionen mit der IDE abgelenkt. Mir gefällt die Arbeitsweise so sehr gut und ich bin bereit für das erste größere Projekt.