TypeScript - Node.js - Start Template - Update

!ACHTUNG, veraltert! Neuere Template Version siehe: VS Code/TypeScript Start Template für Node.js und Web Applikationen

Die Überlegungen und grundsätzlichen Anmerkungen sind aber hilfreich und deshalb wurde der Artikel nicht entfernt.

Das TypeScript - Node.js - Start Template ist in die Jahre gekommen und gehört dringend upgedated. Vor allem die Änderungen in TypeScript 2 machen ein Update notwendig. Tsc oder typings sind nicht mehr notwendig, die Deklarationsfiles lassen sich mit npm verwalten.

Die Anforderung an mein kleines TypeScript Projekttemplate, hat sich nicht geändert. Das Template dient mir als Ausgangsbasis für TypeScript/JavaScript Projekte. Es soll folgendes aufzeigen:

Wie man eine Klasse in einem eigenen TypeScript File einbindet.
Wie man eine externe library einbindet (inkl. type declarations).
Wie man mit Visual Studio Code bequem arbeiten kann (Builden, Debuggen).

0. Vorbereitung

Folgende Werkzeuge installieren (direkt von der Homepage):

Visual Studio Code / VSCode
node.js (Ich verwende die LTS Version.)

Nun die PowerShell öffnen und damit TypeScript global installieren:

TypeScript installieren: npm install -g typescript

Bei Problemen (timeout oder access denied Fehlermeldungen), liegt das häufig daran, dass man keinen direkten Zugriff zu GitHub hat, oft hilft eine proxy Einstellung. (Siehe Artikel: Proxy Settings für npm, Angular CLI, …)

Zur Zeit sind folgende Versionen aktuell:

> tsc --version
Version 2.4.1
> npm --version
3.10.10
> node --version
v6.11.0
> code --version
1.13.1

Zum einfachen Kopieren in die PowerShell, hier nochmals nur die Befehle aufgelistet:

tsc --version
npm --version
node --version
code --version

1. Grundstruktur anlegen

Windows PowerShell verwenden!

$prjname="starter-node-2"
mkdir $prjname; cd $prjname

npm init --yes
tsc --init

New-Item README.md -ItemType File
New-Item .gitignore -ItemType File
New-Item src -ItemType Directory
New-Item src\index.ts -ItemType File
New-Item src\common -ItemType Directory
New-Item src\common\utils.ts -ItemType File

npm install lodash --save
npm install @types/lodash --save-dev

code .

Der letzte Befehl öffnet Visual Studio Code (VS Code) und damit werden nun ein paar Dateien verändert:

2. Dateien befüllen, bzw. anpassen

src/common/utils.ts:

import * as _ from "lodash";
export class Utils {   
    public static kebabStyle(input: string): string {
        console.log(`kebabStyle(${input})`);
        return _.kebabCase(input);
    }
}

src/index.ts:

import {Utils} from "./common/utils";

let s = Utils.kebabStyle("Gurke Tomate Zwiebel");
console.log(s);

.gitignore:

node_modules
dist

package.json

...
    "main": "src/index",
...

tsconfig.json:

...
    "sourceMap": true, 
    "outDir": "dist/", 
    "rootDir": "src/",
...

…

3. Builden + Debuggen

Abhängig von der VSCode Version:

Ab Version 1.14 gibt es ein Tasks Menü in der oberen Menüleiste:

Tasks / Configure Default Build Task
Auswahl: tsc: build tsconfig.json

Ältere VSCode Versionen

Mit Hilfe des VSCode Pannel (F1 oder Ctrl+P: task, bzw. >task eintippen) den task runner konfigurieren.

Tasks: Configure task runner
Auswahl: TypeScript - tsconfig.json

Egal auf welche Art man das tasks.json File erzeugt hat, man sollte dann mit folgendem Befehl das TypeScript Projekt kompilieren können: Builden: Ctrl + Shift + B

Run / Debug

Zunächst muss eine Runtime Umgebung konfiguriert werden. Am einfachsten im Debug pannel, auf das Zahnrad oben klicken.

Node.js auswählen

Das erzeugte File: .vscode/launch.json nun etwas anpassen:

programm,
sourcemaps und
outFiles

{
...
	"version": "0.2.0",
	"configurations": [
	{
		"type": "node",
		"request": "launch",
		"name": "Launch Program",
		"sourceMaps": true,
		"program": "${workspaceRoot}/src/index.ts",
		"outFiles": [
			"${workspaceRoot}/dist/**/*.js"
		]
	}
	]
}

Sind beim Builden keine Fehler aufgetreten (Statusliste zeigt 0 errors), dann starten mit F5. Im TypeScript File kann man vorher einen Breakpoint setzen. Will man das Programm nur ausführen (und nicht debuggen): Ctrl + F5.

Anhang: Verzeichnisse verstecken

File - preferences - settings - workspace-settings

	{
		"files.exclude": {
			"node_modules": true,
			"dist": true
		}	
	}

Damit ist das Projekt Gerüst fertig.

Im nächsten Artikel zeige ich, wie man eine eigene npm Library baut und diese in das Projekt lokal einbindet. (siehe Eintrag: Lokale npm library erstellen und einbinden (TypeScript, VSCode))