TypeScript Tutorials - Setup VS Code to Write, Run & Debug Typescript

Typescript tutorials are series of articles to learn Typescript using Visual Studio Code. What we will learn?

  1. Setup Typescript environment in Visual Studio Code.
  2. Write a simple “Hello TypeScript” example.
  3. Run demo code, view output in the console.
  4. Debug TypeScript code.

TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. Any browser. Any host. Any OS. Open Source.

Why learn TypeScript?

  1. The very definition says that it’s ‘typed superset’ meaning its JavaScript with strongly typed nature.
  2. Your JavaScript development experience comes handy, no major learning curve. You will, in fact, feel better with it.
  3. OOPS knowledge will help write better small or large JavaScript apps.
  4. Angular 2 highly recommends TypeScript to be used for its development.
  5. Global teams will benefit from TypeScript because of typed nature; meaning you know if write wrong instantly.

Step 1 - Install TypeScript using NPM and Visual Studio Code

TypeScript can be installed in two ways i.e. either throught NPM (Node Package Manager) or through Visual Studio Plugins. Our focus is to use Visual Studio Code (light weight editor from Microsoft), so we will install TypeScript using NPM. We will install NPM, Visual Studio and after that run command “npm install -g typescript“ to install it. Also install Visual Studio Code.

Step 2 - Building “Contact Manager” application using Typescript tutorials

We will build a sample “Contact Manager” application by following Typescript tutorials series. So lets create “contactmanger“ folder and open that in VS code.

Step 3 - Setting Task Runner to Transpile aka Compile TypeScript to JavaScript

When we build now using Cntrl+Shift+B in VS code, we get this warning telling “No task runner configured”. Then click on “Configure Task Runner” to create tasks.json file which is collection of Tasks for various tasks for TypeScript, Gulp, Grunt etc. Press Cntrl+Shift+B in VS code and ollow below image for better understanding to create tasks.json. Select the Task Runner “TypeScript with Watch Mode“, this will ensure that whenever any TS file gets modified & saved its compiled to JS file immediately.

Configure tasks.json (Task Runner in VS Code)

Create “tsconfig.json“ file (TypeScript Configuration File) and copy the below code, the compilerOptions are explained as

  1. –target“ tells TSC (TypeScript Compiler) to transpile all TS files to ES5 standard JS files,
  2. –outDir“ is output directory of the transpiled JS files i.e. “jsScripts”
  3. –sourceMap“ Help us in debugging typescript.
    1
    2
    3
    4
    5
    6
    7
    {
    "compilerOptions": {
    "target": "es5",
    "outDir": "jsScripts/",
    "sourceMap": true
    }
    }

Step 4 - Start writing the first TypeScript app.ts file & build it

Let’s start learning by creating “app.ts“ file. You can name the file as per your wish.

.TS files indicates its Typescript file.

1
2
3
4
5
6
class HelloTypeScript {
constructor(public message: string) {
}
}
var hello = new HelloTypeScript("Hi Mithunvp.com !!")
console.log(hello.message);

After this, build the project “Cntrl+Shift+B”; you will notice that “ jsScripts“ folder gets created with app.js & maps files. Now we are ready with run the project.

Step 5 - Run the project to see output in console.

We successfully setup, build the TypeScript project for our TypeScript tutorials series. Its time to run. Follow the below steps Press “Cntrl+Shift+D“ to open “Debug“ panel; we will see “gear” like icon click to open launch.json. This file lets run the application. Copy the below code and paste it.

We need to select “Node” as environment to run application. TypeScript knowledge is not tied to Node itself.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
{
"version": "0.2.0",
"configurations": [
{
"name": "Launch",
"type": "node",
"request": "launch",
"program": "${workspaceRoot}/app.ts",
"stopOnEntry": false,
"args": [],
"cwd": "${workspaceRoot}",
"preLaunchTask": null,
"runtimeExecutable": null,
"runtimeArgs": [
"--nolazy"
],
"env": {
"NODE_ENV": "development"
},
"externalConsole": false,
"sourceMaps": true,
"outDir": "${workspaceRoot}/jsScripts"
},
{
"name": "Attach",
"type": "node",
"request": "attach",
"port": 5858,
"address": "localhost",
"restart": false,
"sourceMaps": false,
"outDir": null,
"localRoot": "${workspaceRoot}",
"remoteRoot": null
}
]
}

Now press “F5” to see output in “Debug Console” as seen below

Output seen in debug console

Step 6 - Debugging Typescript in VS Code

With intention to debug TypeScript code, also we had added “SourceMaps” & added their reference in launch.json file. Now place breakpoint, run the application & see we are able to debug TS files. Observe what is happening?

  1. I am setting break point, running the application.
  2. As soon as it hits breakpoint, we see “local variables”, “call stack”.
  3. When i cross the breakpoint by stepping through, we see message output in “debug console” and from apps.ts it moves to app.js.

Debugging TypeScript files

What’s next? We will learn TypeScript Basic Types and their usage in writing strongly typed application.