Nahaufnahme einer Person, die mit einem Tablet auf einer Decke sitzt.

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:

'use strict';
 
 var theWorld : string = "World";
 
 for(var i : number = 0; i <= theWorld.length; i++) {
    console.log("Hello "
        + theWorld.substr(i)
        + (theWorld.length - i > 0 ? '!' : '?'));
 }

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:

// A task runner that calls the Typescript compiler (tsc) and
 // compiles based on a tsconfig.json file that is present in
 // the root of the folder open in VSCode
 
 {
    "version": "0.1.0",
 
    // The command is tsc. Assumes that tsc has been installed using npm install -g typescript
    "command": "tsc",
 
    // The command is a shell script
    "isShellCommand": true,
 
    // Show the output window only if unrecognized errors occur.
    "showOutput": "silent",
 
    // Tell the tsc compiler to use the tsconfig.json from the open folder.
    "args": ["-p", "."],
 
    // use the standard tsc problem matcher to find compile problems
    // in the output.
    "problemMatcher": "$tsc"
 }

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:

{
    "compilerOptions": {
        "emitDecoratorMetadata": true,
        "target": "ES5",
        "module": "amd",
        "outDir": "bin",
        "sourceMap": true
    }
 }

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.

Abbildung: TypeScript Ausgabe in der Konsole

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:

{
    "version": "0.1.0",
    // List of configurations. Add new configurations or edit existing ones.
    // ONLY "node" and "mono" are supported, change "type" to switch.
    "configurations": [
        {
            // Name of configuration; appears in the launch configuration drop down menu.
            "name": "Launch app.js",
            // Type of configuration. Possible values: "node", "mono".
            "type": "node",
            // Workspace relative or absolute path to the program.
            "program": "app.ts",
            // Automatically stop program after launch.
            "stopOnEntry": false,
            // Command line arguments passed to the program.
            "args": [],
            // Workspace relative or absolute path to the working directory of the program being debugged. Default is the current workspace.
            "cwd": ".",
            // Workspace relative or absolute path to the runtime executable to be used. Default is the runtime executable on the PATH.
            "runtimeExecutable": null,
            // Optional arguments passed to the runtime executable.
            "runtimeArgs": ["--nolazy"],
            // Environment variables passed to the program.
            "env": { },
            // Use JavaScript source maps (if they exist).
            "sourceMaps": true,
            // If JavaScript source maps are enabled, the generated code is expected in this directory.
            "outDir": "bin"
        },
        {
            "name": "Attach",
            "type": "node",
            // TCP/IP address. Default is "localhost".
            "address": "localhost",
            // Port to attach to.
            "port": 5858,
            "sourceMaps": true
        }
    ]
 }

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

Extensions