TypeScript Up & Running

In this blog I will walk you through setting up TypeScript in your Visual Studio. Please check my other blogs on TypeScript for more information on TypeScript

As of now TypeScript 0.9.1.1 is supported only in VS 2012 and VS 2013. If you are using Visual Studio 2013, TypeScript is already installed. Hence skip the below installation steps and go directly to the next steps below.

VS 2012 developers download the TypeScript plugin from the below link

http://www.microsoft.com/en-us/download/details.aspx?id=34790

Running the setup file bring the below screens.

Follow the instructions and complete the setup.

Fire up the Visual Studio to start your first TypeScript application. You can create a Html Application using TypeScript by using the “HTML Application with TypeScript” template as shown below.

The above template creates a javascript project.

If you want to use TypeScript in your ASP.NET application, create the MVC project using your favorite template such as “ASP.NET MVC 4 Web Application” and add a TypeScript file by choosing adding New Item as shown below. I prefer to keep my TypeScritpt files under Scripts/app folder.

On the Add New Item Dialog choose the “TypeScript File” under the Visual C# as shown in the below screenshot

When you click Add you will be presented by another dialog asking about adding TypeScript Typings from NuGet package. The TypeScript Typings will add tooling support for popular Javascript files, such as JQuery, to your project.

You can search and add these typing files now or add them as needed by using the context sensitive menu. For now click “No”. This create a sample TypeScript file as shown the below screenshot

You can also add a TypeScript file using the context sensitive menu as shown below

By the above two options you can add a TypeScript file to your project.

Now as needed you can add TypeScript Typings for your favorite JavaScript files. I will walkthrough on how to add one for JQuery. On the Solution explorer right click on your JavaScript file and choose “Search for TypeScript Typings” menu option.

This will popup the NuGet package manager and performs search for the TypeScript Typings for the JavaScript file you selected (in our case it is jquery).

As you see above all the TypeScript Typings are packaged by DefinitelyTyped. Instead of NuGet packages you can also download these typings from the DefinitelyType GitHub site using the below link

https://github.com/borisyankov/DefinitelyTyped

The Typings from NuGet will be added as shown below.

Once we add all the necessary Typings we are up & running with TypeScript in our project.

Please go to my TypeScript blog series for other blogs in TypeScript.