Introduction to TypeScript

Amit Kumar  Print   7 min read  
01 Aug 2018
06 Aug 2018

Typescript 1.0 was released on 1st Oct 2012 by Microsoft as a free and open source programming language for JavaScript-based enterprise application development. At the time of writing this article, the latest version of TypeScript was 3.0.


If you or your team come from a strongly typed languages like C#, Java and Php then you don’t need to learn JavaScript syntax and style to develop your JavaScript application; TypeScript is a good alternative. Since it will give you the feel of object-oriented programming language.

Advantages of TypeScript

  1. Simplify JavaScript code which is easier to read and debug.

  2. Provides Type Safety at compile time.

  3. Unlike JavaScript, it supports classes, Interfaces etc.

  4. Supports latest standard and evolving features of JavaScript including ES5 and ES6.

  5. Supports modularity.

  6. Open source.

TypeScript based JavaScript Frameworks

TypeScript is used by the many popular JavaScript Framework for developing desktop applications, web applications as well as hybrid and native mobile apps. Some of the frameworks are shown in the fig.

TypeScript based JavaScript Frameworks

Tools And IDE

TypeScript provides highly-productive development tools for JavaScript IDE like WebStrom, Visual Studio Code, Visual Studio, Atom, Brackets, Sublime, Eclipse, Vim etc. These tools support static type checking and code refactoring while developing your JavaScript applications using TypeScript.

TypeScript Tools And IDE

To get started with TypeScript make sure you have TypeScript Supported IDE. In this book, 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.

  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.

Command Prompt

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.

Visual Studio 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:

TSPrograms Visual Studio Code

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.

tsconfig.json TSPrograms Visual Studio Code

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

TypeScript tsconfig.json

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

tasls.json File in .vscode

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

Running Code using Node

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

Command Prompt

Node hello

For more help refer the given link https://goo.gl/PbJNsh

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.

TypeScript Compilation

TypeScript is compiled into JavaScript and JavaScript is an implementation of the ECMAScript standard. Version 4 of the ECMAScript specification was abandoned, so technically it does not exist.

You can compile your TypeScript code into three versions of ECMAScript – ES3, ES5 and ES6. When you deal with browsers, you should know the browsers supports for all these ECMAScript standards.

ES3 ES5 ES6/ECMAScript 6

ECMAScript 3 (ES3)

ECMAScript 3 standard was published in 1999 and it is widely supported by all the browsers available in market. If you are targeting ES3 compilation for your TypeScript file, limited number of TypeScript features are supported. But it offers the widest support for your code in all the browsers.

ECMAScript 5 (ES5)

ECMAScript 5 standard was published in Dec, 2009 and it is widely supported by all the latest browsers available in market. If you are targeting ES5 compilation for your TypeScript file, maximum number of TypeScript features are supported. ES5 is supported in the following browsers:

  1. Chrome 7 or higher

  2. FF 4 or higher

  3. IE 9 or higher

  4. Opera 12 or higher

  5. Safari 5.1 or higher

ECMAScript 6 (ES6)

ECMAScript 6 standard was published in June, 2015 and its features are only supported by the latest browsers. If you are targeting ES6 compilation for your TypeScript file, all the TypeScript features are supported but your code might not work in older browsers like IE7, IE8, IE9 and IE10. ES6 is supported in the following browsers:

  1. Chrome 30 or higher

  2. FF 22 or higher

  3. IE 11, Edge 12 or higher

  4. Opera 15 or higher

  5. Safari 7 or higher

For detailed analysis of ES5 and ES6 features support by the browsers, please refer the given link: https://goo.gl/YmLnMl

What do you think?

I hope you will enjoy the TypeScript while developing your web app. 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.

Accept cookies & close this