My Tech Notes: Typescript development setup with Visual Studio Code

Typescript development setup with Visual Studio Code

Install node.js
Install node.js modules: typescript and tslint globally:
```
npm install -g typescript tslint
```
Install Visual Studio Code extensions: "TSLint" and "Debugger for Chrome"

Start Visual Studio Code
CMD+SHIFT+P (CTRL+SHIFT+P) then type: Extensions, select "Extensions: Install Extensions"
Search and install "Debugger for Chrome" and "TSLint" extensions

Initialize project/workspace directory:
```
mkdir HelloWorld
cd HelloWorld
tsc --init
```
It will create tsconfig.json file in the project/workspace directory.

open HelloWorld folder in Visual Studio Code, and edit tsconfig.json file:

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "lib": [
        "es2015.promise", /* Promise */
        "dom"
    ],
    "sourceMap": true,
    "outDir": "./",
  }
}

Create index.html file:

<!DOCTYPE html>
<html>

<head>
    <title>Hello Typescript</title>

</head>

<body>
    <h1>Fun with TypeScript</h1>
    <p id="index">Let's rock</p>
    <script src="main.js"> </script>
</body>

</html>

Create main.ts file:

function hello() {
    console.log('Hello');
    alert('hello');
}
hello();

Configure Default Build Task

Open the command palette using CMD+SHIFT+P (CTRL+SHIFT+P) and type "Tasks", then select "Configure Default Build Task...", then select "tsc:watch".
It will create .vscode/tasks.json file.
tsc:watch runs automatically when you change a TypeScript file.)

Run Build Task

CMD+SHIFT+B (CTRL+SHIFT+B) to build.
It generates main.js and main.js.map files.

Debugging setup

CMD+SHIFT+P (CTRL+SHIFT+P) and select "Debuging: Start Debugging", then select "Chrome"

It should create .vscode/launch.json, edit the file:

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:8086/HelloWorld/index.html",
            "webRoot": "${workspaceFolder}",
            "userDataDir": "/tmp/chrome-debug",
        }
    ]
}

Set some breakpoint in the main.ts, then CMD+SHIFT+P and "Debuging: Restart Debugging", see if it stops at the breakpoint.

Directory structure:

HelloWorld/
HelloWorld/.vscode/
HelloWorld/.vscode/launch.json
HelloWorld/.vscode/settings.json
HelloWorld/.vscode/tasks.json
HelloWorld/index.html
HelloWorld/main.ts
HelloWorld/main.js
HelloWorld/main.ts.map
HelloWorld/tsconfig.json

Project/Workspace settings are saved in .vscode/settings.json

See also

How to use Typescript with native ES6 Promises

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)