Getting Started with TypeScript using Visual Studio Code

Shailendra Chauhan  Print   5 min read  
22 Jan 2017
06 Aug 2018

To get started with TypeScript make sure you have TypeScript Supported IDE. In this article, we will use free, open source and cross platform IDE - Visual Studio Code. Make sure you have installed following software to get started with TypeScript development.

Software Pre-requisite

  1. Node.js
  2. Visual Studio Code

Install TypeScript using NPM

To get started with TypeScript, just install Typescript using NPM by running following command.

npm install -g TypeScript

This command will install typescript as global package.

Open Visual Studio Code

So far, we have installed all the prerequisites to build first TypeScript program. Now open VS code and make an empty folder in your system named as TSPrograms. Open this folder with the help of VS code.


Create a new file named as hello.ts by clicking New File option in the MyProject row of the explore sidebar as given below:


Add following line of code as given below:

class Program {
 constructor(private msg: string) {
 showDetails() {
 console.log("Your message is : " + this.msg);

let obj = new Program("Hello TypeScript");

Setting TypeScript compilation option in Visual Studio Code

It’s time to setup typescript compilation target as ES3 or ES5 or ES6 as per your target browsers. For this one you have to add tsconfig.json file and add the following lines of code.

 "compilerOptions": {
 "target": "es5",
 "module": "commonjs",
 "sourceMap": true

Creating Task to Transpile TypeScript into JavaScript

VS Code integrates with tsc (typescript compile) through integrated task runner. You can use this to transpile .ts files into .js files.

To create tasks.json, open the Command Palette with Ctrl+Shift+P and type Configure Task Runner, press Enter to select it.


This shows a selection box with templates you can choose from. Choose TypeScript – tsconfig.json option and press Enter.


It will create a tasks.json file in .vscode folder as given below:


Executing Task to Transpile TypeScript into JavaScript

It’s time to execute the task. It can be executed by simply pressing Ctrl+Shift+B . At this point you will see an additional file show up in the file list with name hello.js.



If you have installed Visual Studio 2013 or 2015 in your machine, you might have TypeScript older version on your machine. In this case, you might face vs code error, TS5023 or Unknown compiler option 'p' while executing ts task using Ctrl+Shift+B. To resolve this issue try the following steps:

  1. Open your environment settings and remove the old Typescript from your system PATH variable. It will be like C:\Program Files (x86)\Microsoft SDKs\TypeScript\1.0.

  2. In the "System" panel (the bottom of Windows OS) select the path variable and click edit. Find the TypeScript older version like C:\Program Files (x86)\Microsoft SDKs\TypeScript\1.0 and click "Delete".

  3. Restart VS Code.

  4. Now try to execute the task by simply pressing Ctrl+Shift+B.

Running Code using Node

Now, you can run your code by opening up a terminal and running the following command.

Node hello

// Output 
Hello World

Hiding .js and .js.map Files from VS Code Explorer

When you are working with TypeScript using VS Code, after ts compilation you will find the .js and .js.map file within your code explorer. These files are auto-generated and not used modified by us. So you can hide these extra files from VS Code explorer by adding settings.json file in .vscode folder with following lines of code.

 "files.exclude": {
 "**/*.js.map": { "when": "$(basename)"},
 "**/*.js": {"when": "$(basename).ts"}

The settings.json file, you can create by navigating to file-> Preferences -> Workspace Settings as shown in below fig.


At this point you will see the following files and folders as shown in fig. Now it is simple and easy to write your typescript code with VS Code.


Important Information

  1. TypeScript never executed by browser, so you have to add reference of compiled JS file (Generated by TypeScript compiler) to your webpage.

  2. TypeScript code can be compiled as per ES3 standard to support older browser.

  3. TypeScript code can be compiled as per ES5 and ES6 standard to support latest browser.

  4. A piece of JavaScript code is a valid TypeScript code.

What do you think?

You can refer this article to develop any typescript based application. I would like to have feedback from my blog readers. Your valuable feedback, question, or comments about this article are always welcome.

Share Article

Take our free skill tests to evaluate your skill!

In less than 5 minutes, with our skill test, you can identify your knowledge gaps and strengths.

Training Schedules
+91 9999123502
Accept cookies & close this