typescript environment setup

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.