Please enable Javascript to correctly display the contents on Gurukulsight!

Getting Started with TypeScript using Visual Studio Code

  Author : Shailendra Chauhan
Posted On : 22 Jan 2017
Total Views : 1,249   
Updated On : 02 Mar 2017
 

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.

vscode-open

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

vscode-open

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");
obj.showDetails();

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.

vscode-open

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

vscode-open

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

vscode-open

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.

vscode-compile

Note

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.

vscode-hidejs

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.

vscode-hidejs

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.


ABOUT AUTHOR

Shailendra Chauhan
Author, Architect, Corporate Trainer and Microsoft MVP

He is the author of some of most popular e-books which encompass technical Interview on Node.js Interview Questions and Answers, ASP.NET MVC Interview Questions and Answers, AngularJS Interview Questions and Answers and LINQ Interview Questions and AnswersKnow more...

YOU MIGHT LIKE
Free Interview Books
 
COMMENTS (0)
3 APR
Master Class Fast Track MVC 5 with Angular2 Development (online)

10:30 AM -03:30 PM IST (Fast Track)

Know More
1 APR
MEAN Stack 2 Development (offline)

11:00 AM-12:30 PM

Know More
1 APR
ASP.NET MVC with Angular2 Development (offline)

4:00 PM-5:30 PM

Know More
25 MAR
Xamarin Forms : Build Cross-platform Apps (offline)

8:00 AM-9:30AM

21 MAR
ASP.NET MVC with Angular2 Development (online)

09:00 PM - 11:00 PM IST( TUS, THR, SAT)

6 MAR
ASP.NET MVC with Angular2 Development (online)

07:00 AM - 09:00 AM IST( MON, WED, FRI)

25 FEB
ASP.NET MVC with Angular2 Development (offline)

05:00 PM-06:30 PM

31 JAN
ASP.NET MVC with Angular2 Development (online)

07:00 AM-09:00 AM IST(Tuesday & Thursday)

30 JAN
NODEJS & MEAN Stack 2.x Development (online)

09:00 PM-11:00 PM IST( MON, WED, FRI)

31 DEC
ASP.NET MVC with AngularJS Development (offline)

09:30 AM-11:00 AM

BROWSE BY CATEGORY
 
RECENT ARTICLES
SUBSCRIBE TO LATEST NEWS
 
LIKE US ON FACEBOOK
 

Professional Speaks

+