Learn more about underscore (and other js libs) by using Typescript

Inspired by Shawn Wildermuths recent post about using Underscore I wanted to write a short post about how using Typescript can help you learn more about that library and others.

It might sound unnessesary to use Typescript for some small simple javascript scripts for an ordinary web site, but I think the intellisense you get with it, especially with a good definition file actually can make it worth while. You will simply get help to get your jquery, underscore (or whatever library code you are using) right.

First install Typescript itself. It’s a compiler aswell as a Visual Studio plugin that adds intellisense and some nice features for managing the Typescript files to Visual Studio. Also install WebEssentials plugin to be able to handle Typescript easier outside projects made with the Typescript application project template.

Now open your web project, I just created a standard MVC4 one. And then open up the Package Manager Console.

Now check out the nuget packages matching “underscore” by typing underscore and hitting tab:

typescriptvs

Install-Package underscore.js

for the plain library. It will install itself in /scripts.

and

install-package underscore.TypeScript.DefinitelyTyped

for the Typescript definitions. It will install itself in /scripts/typings/underscore

Next, write your javascript. Err Typescript. Add a new file, select a Typescript template. Delete all sample content (don’t know why they insist having it there).

Now, add a reference to the underscore definition file, for example by dragging the file from the solution tree to the editor. Or by writing it manually:

/// <reference path="typings/underscore/underscore.d.ts" />

Now you get underscore intellisense:

typescriptvs

Cool huh? I learned much I did not know about underscore just by playing around with the code and the syntax this way.

There are typescript definition files easily available for pretty much every commonly used javascript library via Nuget from the great open source project DefinatelyTyped.

Now after adding some code, click save, and WebEssentials should run the Typescript compiler and show you the javascript:

compiled

See the difference? No, neihter do I. It’s just because Typescript allows Javascript just as is, adding type information on top. Of course you can go ahead and use classes, interfaces and even generics if you like. But that’s another story.

Note: Currently Typescript is at version 0.91, still an Alpha version. Use it at your own risk. Read the discussions and info on the codeplex site for up to date information.

Advertisements

One thought on “Learn more about underscore (and other js libs) by using Typescript

Leave a Reply

Please log in using one of these methods to post your comment:

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