Install typescript and setup VS code
typescript is a superset of javascript. It enforces types, and has a compiler, so any type mismatch will fail in compiling stage.
set up environment
1. download node.js from website, and install. This by default installs the npm package management tool.
2. install typescript through npm command. Make sure the -g global parameter is on otherwise you may not be able to call tsc command later.
npm install -g typescript
3. check the typescript compiler version. this means the type script installation is successful.
tsc -v
Version 5.2.2
4. Intall VS Code
A helloworld
1. create a folder, and a helloworld.ts file
a line of code:
console.log('helloworld');
2. From vs code, open the folder, From menu-> terminal -> new terminal, run tsc command to compile the helloworld.ts
tsc helloworld.ts
It will generates a corresponding helloworld.js file
If it says error "cannot be loaded because running scripts is disabled on this system", go to powershell admin mode, run: Set-ExecutionPolicy -ExecutionPolicy RemoteSigned
3. Check compiler tsc configuration, run command
tsc --init
A file tsconfig.json will be generated, with something like:
"target": "es2016" ...
which sets the javascript language version, etc.
and better turn on:
"noEmitOnError": true
so it doesn't overwrite the compiled javascript if the typescript has an error.
If need separate src and output folders, also set:
"rootDir": "./src",
"outDir": "./dist",
running only tsc command will compile all ts files, and output to the out dist
the project folder now is:
/helloworld
/dist
helloworld.js
/src
helloworld.ts
tsconfig.json
4. Setup run and debug
Click the 'Run and Debug' icon on the left, or simply F5
It will ask for 'create a launch.json file', choose node.js, it pops up something look like below to specify the run and debug parameters.
To make sure it is using exactly the same tsconfig.json, add a line as in below for "preLaunchTask", which uses the tsconfig.json file just modified above
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Launch Program",
"skipFiles": [
"<node_internals>/**"
],
"program": "${workspaceFolder}\\src\\helloworld.ts",
"preLaunchTask": "tsc: build - tsconfig.json",
"outFiles": [
"${workspaceFolder}/**/*.js"
]
}
]
}
5. debug
set a break point with the below code for testing
let a: number = 18;
console.log(a);
Click the 'Run and Debug' icon on the left, it will show up a 'Launch Program'. Click the green arrow or just F5
It will start debuggint the code, showing the variables etc. on the left, and the buttons for step over, etc. on the top. At the end of the script it wil print the message in the debug console.