TypeScript IntelliSense in VS2015

I love everything about being a front-end JavaScript developer; the flexibility of a dynamic language, the JavaScript syntax, the immediate result, etc. But I do have to admit there a couple of 'pains', especially when making application wide changes on huge projects. And I how do I miss IntelliSense support, like you get with C# or Java.

But there are a couple of things you can do to minimize that pain. You could switch to TypeScript, which -as a typed superset of JavaScript that compiles to plain JavaScript- allows for almost the same type of tooling experience you are used to when using Visual Studio with C#.

But, there ain't no such thing as a free meal. Learning TypeScript can be tough. Or you could just be working on a 'legacy' project that was written in plain old JavaScript and migrating to TypeScript just isn't in the budget or there isn't enough know-how in the team. But there is a middle ground, that is very simple to take, and that many developers don't know about.

Using DefinitelyTyped with plain JavaScript

The guys over at DefinitelyType created a repository for high quality TypeScript type definitions. Which basically means that they host a 'TypeScript definition file' -or a 'd.ts file'- for almost every commonly used JavaScript library. And when I say 'almost every', I mean almost every! You'll find ts files for Knockout, Angular, jQuery, Moment, Jasmine, PNotify and many, many more.

Should you be able to load these files into Visual Studio, you would get the same type of IntelliSense that you are used to with C#. True, this IntelliSense will only be for the definition files you include, but at the end of the day, that is still a HUGE win. And if you are working on big legacy projects, you can benefit from these type definitions without any changes to your code base.
So it's a gain without a pain.

Loading the AngularJS TypeScript definition file in VS2015

You'll be amazed by how easy this is.

Install VS TypeScript tools

First of all you'll need to install the VS TypeScript tools. I'm not entirely sure this step is absolutely necessary, but let's dot it all the same. Go to 'Tools' > 'Extenstions and Updates' and type in 'typescript' in the search box. Install the first one you find, which is at time of writing 'TypeScript 1.8.4 for Visual Studio 2015'.

Install the AngularJS TypeScript Nuget package

We'll take AngularJS as an example.
If you are working on an angular project in Visuals Studio, in plain old JavaScript, without any trips and tricks, your IntelliSense will look something like below.

No IntelliSense what-so-ever. You could learn the complete AngularJS API by heart and work like that, or you could make it yourself a whole lot easier.

Start by installing the Nuget package displayed below in your web project (if you search for 'typescript'):

Installing this Nuget will add the necessary .d.ts files in your web project. You'll find them in the 'Scripts/typings' folder.

Visual Studio will automatically pick these files up and provide IntelliSense if possible. So our previous example now looks like this:

And that's what you get, just by installing a Nuget package! I was really amazed by how easy this is :). You can find almost every corresponding TypeScript definition file you need, right there on Nuget.

Happy Coding !