TechWiese Blog
Node.js-Projekt mit TypeScript in Visual Studio Code erstellen
24. September 2015
Tobias Kahlert
Dieser Blogbeitrag ist ein Repost und stammt im Original aus dem Know-how-Bereich von TechWiese, dessen Artikel in diesem Blog aufgegangen sind.
Visual Studio Code (VS Code) bietet eine großartige Unterstützung bei der Entwicklung mit JavaScript, insbesondere in Kombination mit Node.js, das serverseitige JavaScript-Programmierung erlaubt. Neben dem Code Highlighting, Code-Nachverfolgung und Refactoring liefert VS Code auch einen Debugger mit, der die Suche nach Fehlern in Node.js-Projekten deutlich vereinfacht. Wer noch einen Schritt weiter gehen will und seinen Code schon statisch auf Fehler überprüfen möchte, kann zu TypeScript greifen. TypeScript ist eine eigene Programmiersprache, die das Beste aus der Einfachheit von JavaScript und typisierten Sprachen wie C# vereint. Am Ende wird der TypeScript-Code dann zu JavaScript umgewandelt, damit dieser dann z.B. mit Node.js ausgeführt werden kann. TypeScript wird auch in VS Code wunderbar unterstützt und ein Projekt für den Übersetzungsvorgang zu erstellen, ist mit wenigen Klicks möglich. Damit man auch in den Genuss des Debuggens kommen kann, sind allerdings weitere Schritte notwendig.
Zunächst einmal muss ein TypeScript-Projekt angelegt werden. Da VS Code direkt auf Datei- und Ordnerebene arbeitet, ist es am einfachsten den gewünschten Ordner einfach über das Kontextmenü in VS Code zu öffnen.
Im Explorer Menü auf der linken Seite, lässt sich nun eine neue Datei anlegen, indem man mit der Maus über den Eintrag des geöffneten Ordners fährt und „New File“ klickt. Die neue Datei kann beliebig benannt werden (hier „app.ts“), sollte aber mit „.ts“ enden, denn sie soll den TypeScript-Code für das neue Programm enthalten:
Mit „Strg + Shift + B“ lässt sich nun der Übersetzungsvorgang starten. Zunächst weiß VS Code aber nicht, was überhaupt übersetzt werden soll. Es schlägt aber vor einen neuen Task zu erzeugen, indem genau das konfiguriert werden kann:
Die dabei erzeugte Datei definiert einen Task, der immer dann ausgeführt wird, wenn „Strg + Shift + B“ in VS Code gedrückt wird. Der Task aus der Vorlage ruft zum Beispiel den TypeScript-Übersetzer für eine Datei mit dem Namen „HelloWorld.ts“ auf, um den enthaltenen Code zu JavaScript zu übersetzen. Viel interessanter ist aber der zweite auskommentierte Task: Er sagt dem TypeScript-Übersetzer, dass der momentane Ordner ein TypeScript-Projekt ist und dieses gebaut werden soll. Nach dem Entfernen der Kommentare sieht der Task wie folgt aus:
Damit der Task das Projekt auch richtig bauen kann, muss im Wurzel-Verzeichnis noch eine TypeScript-Projektdatei mit dem Namen „tsconfig.json“ angelegt werden. Sie steuert wie genau das Projekt gebaut werden soll:
Besonders wichtig sind hier die beiden letzten Optionen: „outDir“ gibt das Verzeichnis an, in dem die erzeugten JavaScript-Dateien gespeichert werden sollen und „sourceMap“ teilt dem Übersetzer mit, eine Datei zu erzeugen, die dabei hilft, den erzeugten JavaScript-Code auf den TypeScript-Code zurückzuführen. Das ist später beim Debuggen besonders wichtig, damit der Debugger weiß, an welcher Stelle im TypeScript-Code er sich befindet, denn eigentlich wird ja das erzeugte JavaScript ausgeführt.
Ein erneutes Einleiten des Erstellungsvorgangs erzeugt die gewünschten Dateien im neuen Ordner „bin\“. Das Starten des Programms ist dann auf der Konsole schon möglich.
In VS Code kann das Programm links im Debug-Menü mit einem Klick auf „Start“ gestartet und debuggt werden. Beim ersten Mal generiert VS Code allerdings zunächst eine neue Datei mit dem Namen „launch.json“. Diese definiert, welches Programm mit welchen Optionen gestartet werden soll.
Im Beispielprojekt müssen die Optionen „program“, „sourceMaps“ und „outDir“ angepasst werden:
Bei einem erneuten Klick auf „Start“ wird das Beispielprogramm gestartet und der Debugger hält an den links neben dem Code gesetzten „Breakpoints“. Variablen im momentanen Kontext, sowie der Aufrufstapel werden an der linken Seite angezeigt. Fährt man mit der Maus über den Code, werden weitere Informationen angezeigt. Mit der kleinen Toolbox am oberen Fensterrand kann das Programm ganz oder schrittweise weiter ausgeführt werden.
Wichtige Ressourcen
- Kostenloser Download: Visual Studio Code
- Video Serie zu Visual Studio Code auf Channel 9
- Übersichtsvideo (english) zu Visual Studio Code
- Visual Studio Code auf Twitter: @Code
- Visual Studio Code-Dokumentation
- Visual Studio Code Blog
- Verwandtes Produkt: Visual Studio Community (ebenfalls kostenlos)
Visual Studio Code Artikelserie
Grundlagen
- Die Grundlagen
- Installation
- Die Arbeitsumgebung
- Produktiver durch den richtigen Einsatz der Suchfunktion
- Git als Quellcodeverwaltung einsetzen
- Tasks, Erstellen und Debuggen
- Konfiguration und Personalisierung
Extensions
Weitere Beiträge