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.

typescript tutorials

NPM, TypeScript installed successfully

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.

typescript tutorials

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.

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.

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.

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

typescript tutorials

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.
typescript tutorials

Debugging TypeScript files

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

You may also like...

13 Responses

  1. sai kumar says:

    not found any typescript watcher task runner in visual studio code

  2. Katturaja M says:

    It works for me. Super. Great article.

  3. Marc d'Entremont says:

    Handy post. Thanks for sharing.

  4. Don says:

    I cannot get debugging of Typescript to work in my Ionic2 project.
    VsCode tells me parameter “outDir” is not allowed anywhere in my launch.json
    and parameter “program” is not allowed.

    I have not found any source-map parameters that work in my projects.

    I dont know if any source map is generated, and it is, VsCode is not helping me to debug Typescript

    All this is a bit worrying. Is VsCode being developed, or is it being left to wither and die?

    November 2016

  5. Alex says:

    Very good – thanks!

  6. Alex says:

    I usually debug Typescript using Chrome debugger – what is advantage of using VS to debug Typescript?

  1. May 24, 2016

    […] In the common files, I now have: Notice that the package.json file is part of the common files. Typescript Tutorials – Setup VS Code to Write, Run & Debug Typescript. Typescript tutorials are series of articles to learn Typescript using Visual Studio […]

  2. May 25, 2016

    […] Let’s see working example of this in JavaScript, I hope you have Setup Visual Studio Code for TypeScript tutorials. […]

  3. July 8, 2017

    […] basically following this guide, humbly attempting to trim to bare necessity and align a couple crucial bits that have shifted […]

Leave a Reply