Communardo Software GmbH, Kleiststraße 10 a, D-01129 Dresden
0800 1 255 255

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üm­mern wir uns heute um das Tooling für Entwickler. Früher oder spä­ter muss der TypeScript-Code nach JavaScript com­pi­liert wer­den. Das sollte idea­ler­weise kein manu­el­ler Schritt sein.

Dieser Beitrag beschreibt, wie sich die Compilierung von TypeScript nach JavaScript auto­ma­ti­sie­ren lässt.

Manuelle Compilierung mit dem TypeScript-Compiler

Für den moder­nen TypeScript-Entwickler besteht eigent­lich keine Notwendigkeit mehr, JavaScript zu schrei­ben. Selbst wenn JavaScript erzeugt wer­den muss, kann der Code pro­blem­los in TypeScript geschrie­ben wer­den.

Das geht denk­bar ein­fach:

  • Visual Studio Code öff­nen
  • TypeScript​ ‑Datei anle­gen (.ts)
  • TypeScript schrei­ben
  • Fertig

Zugegeben, jetzt fehlt noch das JavaScript. Dieses wird mit einem Aufruf von tsc, dem TypeScript-Compiler, erzeugt. Wer die­sen noch nicht instal­liert hat, der instal­liert ihn mit­tels node.js package mana­ger: npm install typescript ‑g.

Der Befehlt tsc <dateiname>.ts erzeugt dann die JavaScript-Datei.

Dieser Befehl muss nach jeder Codeänderung auf­ge­ru­fen wer­den, um den dazu­ge­hö­ri­gen JavaScript-Code zu erzeu­gen. Ein manu­el­ler 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 star­tet den Compiler im Überwachungsmodus.

Sobald der Compiler Änderungen an der TypeScript ‑Datei erkennt, erzeugt er die JavaScript-Datei neu:

Das ist schon alles. Diese Funktion eig­net sich beson­ders, um schnell ein wenig TypeScript zu schrei­ben und immer das aktu­elle JavaScript zur Hand zu haben. In kom­ple­xe­ren Projekten kann die auto­ma­ti­sche Compilierung auch an ande­ren Stellen der Build-Pipeline auf­ge­han­gen wer­den, bspw. als gulp-Task.

Zusammenfassung

In die­sem Beitrag haben wir gelernt, wie sich der TypeScript​-Compiler in den Überwachungsmodus ver­set­zen lässt. Anschließend erzeugt er bei Codeänderungen auto­ma­tisch die dazu­ge­hö­rige JavaScript-Datei.

Happy Coding!

Related Posts

Pin It on Pinterest