TypeScript–Surprisingly Simple, Extraordinarily Powerful– Part 2

Configuring TypeScript in VS

TypeScript though created by Microsoft is an Open Source framework and is no way ties to Microsoft technologies. It can be used with other IDE’s as well like Sublime Text, Emacs including Visual Studio. In Visual Studio TypeScript is a first-class member and is available as a plugin. TypeScript compiler compiles code into JavaScript as and when we save the file at runtime. It provides a screen split (as shown below) which lets users see JavaScript being generated by the TS compiler. Visual Studio also provides live IntelliSense and syntax checking.

If you thought about browser compatibility then YES, TypeScript is compatible with any and all browsers because at end of the day TypeScript gets compiled as JavaScript only. We write code in a file with extension “*.ts”, and it creates a corresponding  JavaScript file “*.js” to be used on the web page.

The best feature of TypeScript in my opinion:

It’s a superset of JavaScript, it supports standard JavaScript code. If you have any existing JavaScript application, you can use TypeScript to write new code and it will work seamlessly with existing JavaScript code, no-frills required.  The best part is you can write JavaScript in a TypeScript file and it will work fine without any issues.

To be able to use TypeScript in Visual Studio we need to download the extension from http://www.typescriptlang.org/. You can download the plugin for VS 2012 as well as VS 2013. This website has all the required resources you need to get up and running with TypeScript starting with a playground where you can try TypeScript, Tutorials, Forums, and Blogs. I would definitely recommend spending some time on the website to learn more.

Once downloaded you would see TypeScript options in Visual Studio under Tools—Options

Once you have it installed, to start with TypeScript it's as easy as just to create a new file with extension “*.ts”.

Let's just do that:

Add a new TypeScript file in your Visual Studio project

Once you open this “*.ts” file you will see it in split format, on the left side is where we write our code and as soon as we save it, JavaScript gets generated and is seen on the right side. Also, a new “*.js” file with the same name gets created in the same folder which has the corresponding JavaScript code. We can include this js file directly on our web page.

Now, once we are done with Introduction and setup, in the next session we will start with the basics of TypeScript and then go further talking about various features available in TypeScript.