Convert JavaScript to TypeScript for Better Intellisense
Tuesday, March 26, 2013
Starting in late 2012, Microsoft has been putting their Agile practices to the test by moving to a 3-month update schedule for many of their products, including Visual Studio and ASP.NET. Last month, they shipped their ASP.NET and Web Tools Update 2012.2, which included lots of new features to Visual Studio's web tooling.
One of the lesser known new features is the support for new project templates to be installed via VSIX packages. This will allow third parties to produce project templates that we can install right into Visual Studio. One of the templates that has already come out is John Papa's HotTowel template for Single Page Applications (SPAs). It's a great starting point for building SPAs; and he even has a PluralSight course on how to build an app using this template. It uses many great frameworks such as jQuery, Twitter BootStrap, Knockout, Breeze; and they're all tied together with a fairly new framework called Durandal.
Within a few minutes of working with the HotTowel template, I quickly realized a shortcoming in Visual Studio. The project uses the Asynchronous Module Definition pattern for JavaScript via RequireJS, and the JavaScript intellisense in Visual Studio is basically useless for projects where AMD is used. ReSharper can add some hints to intellisense, but it's expensive and still isn't perfect. So I searched for a better and cheaper way to get intellisense.
Original JavaScript file (main.js) with no intellisense:
Coincidentally, another technology that I've been experimenting with is TypeScript - a superset of JavaScript from Anders Hejlsberg (the father of Turbo Pascal, Delphi, and C#) that aims to make JavaScript development suck a little less. One of the things it excels at is adding strong typing to JavaScript, which has a wonderful side effect of providing great intellisense in Visual Studio.
So as an experiment, I converted the core of the HotTowel project from JavaScript to TypeScript. I was pretty pleased with the results. It took almost no time at all. In addition to getting intellisense, the code was cleaner too!
New TypeScript file (main.ts) with intellisense:
Another file:
Before (logger.js):
After (logger.ts):
Starting in late 2012, Microsoft has been putting their Agile practices to the test by moving to a 3-month update schedule for many of their products, including Visual Studio and ASP.NET. Last month, they shipped their ASP.NET and Web Tools Update 2012.2, which included lots of new features to Visual Studio's web tooling.
One of the lesser known new features is the support for new project templates to be installed via VSIX packages. This will allow third parties to produce project templates that we can install right into Visual Studio. One of the templates that has already come out is John Papa's HotTowel template for Single Page Applications (SPAs). It's a great starting point for building SPAs; and he even has a PluralSight course on how to build an app using this template. It uses many great frameworks such as jQuery, Twitter BootStrap, Knockout, Breeze; and they're all tied together with a fairly new framework called Durandal.
Within a few minutes of working with the HotTowel template, I quickly realized a shortcoming in Visual Studio. The project uses the Asynchronous Module Definition pattern for JavaScript via RequireJS, and the JavaScript intellisense in Visual Studio is basically useless for projects where AMD is used. ReSharper can add some hints to intellisense, but it's expensive and still isn't perfect. So I searched for a better and cheaper way to get intellisense.
Original JavaScript file (main.js) with no intellisense:
Coincidentally, another technology that I've been experimenting with is TypeScript - a superset of JavaScript from Anders Hejlsberg (the father of Turbo Pascal, Delphi, and C#) that aims to make JavaScript development suck a little less. One of the things it excels at is adding strong typing to JavaScript, which has a wonderful side effect of providing great intellisense in Visual Studio.
So as an experiment, I converted the core of the HotTowel project from JavaScript to TypeScript. I was pretty pleased with the results. It took almost no time at all. In addition to getting intellisense, the code was cleaner too!
New TypeScript file (main.ts) with intellisense:
Another file:
Before (logger.js):
After (logger.ts):