TypeScript Tutorial
Tags
wpf C# interview reflection mvvm mvvm light interface generics arraylist hashtable using design patterns visitor template flyweight strategy memento mediator command wcf instance management application architecture ajax angularjs forms validations nested forms filters controllers directives bindings expressions ng-app ng-model environment setup threading synchronization rhino mocks test doubles oops app android linq testing nunit testcase typescript javascript abstract nodejs mysql CRUD dotnetcore mvc ftp python chmod linux golang variables uuid validator ExpressJS postgresql datatypes

TypeScript Environment Setup

TypeScript typescript javascript

There are two popular options available for writing TypeScript code:

  1. Use an online playground
  2. Use Visual Studio 2015 and above

Online Playground

Typescriptlang.org provides a web page where we can immediately write and see javascript output in a web page. You can click on Playground link.

TypeScript Playground

In the left section of page we can write our TypeScript code and right section automatically converts it into JavaScript code. For example, we declare a variable num1 as number datatype in left section and it automatically updated in right section in JavaScript code.

This page also provide examples of some features of TypeScript. Click on the dropdown above the left section and choose any example. 

TypeScript Examples

Visual Studio

Visual Studio 2015 and above has already TypeScript installed. Open New project and choose template "HTML Application with TypeScript" like shown below.

Visual Studio Template for TypeScript

In Visual Studio 2017 by default 'HTML Application with TypeScript' template is not available. You can search for online templates. Click on Online and write 'HTML Application with TypeScript' in search textbox and click on Install button.

By default using above template, these 4 files are created.

  1. app.ts
  2. app.css
  3. index.html
  4. web.config

'app.ts' file is our typescript code file where we write our typescript code. Just build the project and then click on 'Show All Files' link. Build will create two additional files:

  1. app.js
  2. app.js.map

TypeScript Javascript Files

app.js file contains the compiled javascript code from app.ts file and app.js.map file is a source map file. 

Source Map: In production, we mainly send compressed javascript files. A source map file provides mapping code between compressed file and uncompressed file and let you see the uncompressed code during debugging.

We'll learn more about source maps files later. 'app.js' is already linked with index.html file we don't need to do anything here.

Open app.ts file and remove all code and write below code.


var var1: number = 44;
console.log('Value: ' + var1);

Above code will declare a number variable named 'var1' and print its value into console window.

Build project and run the application in chrome. Open Developer Tools in chrome by pressing 'F12' and click on console tab. Result 44 is shown in console tab like shown below. 

Chrome Console Result

In the above section, we write some basic TypeScript code and run the application to check that our environment is setup or not. 

In our next posts, we shall learn more about TypeScript syntax and data types available in TypeScript.

Previous
Next