Please enable Javascript to correctly display the contents on Dot Net Tricks!

Environment Setup

Posted On : 03 Mar 2017
Updated On : 03 Mar 2017
Total Views : 1729

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:

Hello.ts

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.

tsconfig.json

{
 "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 Getting Stated 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.



+