Introduction to TypeScript

Introduction

Of course I am sure you have all noticed that javascript has gone through explosive growth over the last five years.We have gotten much better JavaScript execution environments like the Chakra engine and IE9 and IE10,Google’s V8. We have got HTML5 that actually has made the UI really be a very full fledged programming platform.But the fact remains that writing application scale JavaScript is very hard. JavaScript was really never designed to be a programming language for big applications.It’s a scripting language.It doesn’t have static typing,but more importantly perhaps it lacks some of the structuring mechanisms that you need in large applications like classes and modules and perhaps interfaces.We have noticed that a lot of people in the industry in order to write large JavaScript apps use tools like may be Google’s GWT or Script sharp which is an open source project that uses C#.

TypeScript is a language for application scale JavaScript development.More Detail TypeScript is a typed super set of JavaScript that compiles to plain JavaScript A compiler and a compile code work in any browser on any OS in any host and the compiler and all of the libraries everything is all opensource.
Basically all Typescript code is JavaScript code. All JavaScript libraries like Node, jQuery,underscore,backbone etc etc work directly with Typescript because it is just JavaScript.Those additions are optional static types,classes and modules.Those things are missing ,when you are writing large apps and trying to structure them and maintain them ans so forth.But the beauty of this is that it’s zero cost.All of those additional features compiled away in the resulting JavaScript.

Creating your first TypeScript application

Here i am using Visual studio 2012 for the demo application. You can download TypeScript for Visualstudio 2012 from here

https://visualstudiogallery.msdn.microsoft.com/fa041d2d-5d77-494b-b0ba-8b4550792b4d

After downloading Open VisualStudio 2012 and then navigate to File >> Open >> NewProject and then select TypeScript template

1

It will create a basic folder structure with a sample TypeScript file app.ts

2

How to create a new TypeScript File?

Right the project and add new TypeScript file

3

It will create a filename.ts Typescript file and also a mapping file and js file when we build the project. Here i am created demo.ts , So my mapping file and js will look like below

4

You can write TypeScript code in demo.ts file. I am going to create a new class named Animal with an constructor and method which display a message.

5

C# equivalent to the above TypeScript Code

6

Open index.html file and add a demo.js file . All the TypeScript code is converted to Javascript code at runtime.

Go and Run the index.html, It will pop up an alert message by displaying Cat as a message.

Converted Javascript code

8

Hope everyone understand how to create a basic TypeScript application

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s