Let's Code 3/4: VS Code + TypeScript

Zwei neue Helmbergers Let’s Code Folgen beschäftigen sich mit dem Thema Visual Studio Code + TypeScript.

Let’s Code [003]: Visual Studio Code + TypeScript zeigt wie man TypeScript Code in Visual Studio Code) nach JavaScript kompiliert.
Let’s Code [004]: Visual Studio Code + TypeScript zeigt wie man das TypeScript Projekt mit Libraries und Type Definition Files vervollständigt.

Damit man nichts abtippen muss, hier die wichtigsten Informationen:

Erste Compile Versuche

Ordner anlegen und Visual Studio Code starten:

mkdir hlc.portal
cd .\hlc.portal\
code .

Ein TypeScript File in Visual Studio erstellen, z.B.:

function myFunc(param:string) : string {
    return "my param: " + param;
}

Dann speichern mit Ctrl + s und in der PowerShell kompilieren (mit watch mode):

tsc app.ts
tsc --watch app.ts

tsconfig.json

Das TypeScript Projekt initialisieren ( = ein tsconfig.json file erstellen):

tsc --init

tsconfig.json:

{
    "compilerOptions": {
        "module": "commonjs",
        "target": "es5",
        "noImplicitAny": false,
        "sourceMap": true,
        "outDir": "www",
        "rootDir": "src"
    },
    "exclude": [
        "node_modules"
    ]
}

Builden in VSCode

Ctrl + Shift + B

oder mit F1 in das CommandPanel hüpfen und dann build eintippen

.vscode\tasks.json:

{
    "version": "0.1.0",
    "command": "tsc",
    "isShellCommand": true,
    "showOutput": "always",
    "args": ["-p", "."],
    "problemMatcher": "$tsc"
}

JavaScript Bibliotheken

Um Libraries + dazugehörige TypeScript Definition Files einfach zu erhalten, verwenden wir hier bower und tsd. (Man kann auch nur npm verwenden und für die tsd files das neuer typings dafür verwenden).

Installieren mit npm global (also nicht zum Projekt), diese Tools werden daher in folgdem Ordner abgelegt: C:\Users\yourusername\AppData\Roaming\npm

npm install -g tsd
npm install -g bower

Den Package Manager Bower und tsd initialisieren:

bower init
tsd init

Dadurch erhalten wir das bower.json und tsd.json File.

Nun holen wir uns jquery und das zugehörige TypeScript Definition file:

bower install jquery --save

tsd install jquery --save

Mit dem Parameter —save tragen wir die Bibliotheken in das jeweilige Konfigurationsfile und können später durch einfache install commands die Files wieder herstellen:

bower install
tsd install

Das ist ja jetzt fast eine Abschrift der beiden Folgen geworden. Hoffe, die Folgen 3 und 4 auf Helmbergers Let’s Code werden trotzdem noch angesehen. :-)

Let's Code 3/4: VS Code + TypeScript

Erste Compile Versuche

tsconfig.json

Builden in VSCode

JavaScript Bibliotheken

Links

Artikel in diesem Blog