Articles Software

How To “Completely” Set-Up TypeScript in Visual Studio 2012

So for the past couple days, I’ve been deep into TypeScript, which is a super-set of the Javascript language that adds optional typing, classes, and module support in addition to standard Javascript.  I’d recently been checking out Dart, from Google, as a way to write Javascript-intensive applications in a way that multiple humans can write code and eliminate a lot of the errors that come along with the dynamic typing.  See, dynamic typing is powerful.  You can do a whole lot of cool things when you can do anything you want.  The issue comes when the app gets so big you can’t keep everything in your head, or you have someone else working with you.  Then, you need a way to know what methods are accepting and returning without having to crack open that method and read the code (that’s why we HAVE classes so we can write something once, and then forget about the specifics of it and only care about the passed argument and return value).  Typescript’s beauty is that it adds all this extra stuff, while still keeping the syntax of Javascript intact.  In fact, Javascript is valid Typescript!  That means you can add types, classes and coolness right alongside regular Javascript code!  Don’t need type checking or anything? – Just use Javascript.  Getting into some really hairy Javascript that you need to make sure what you’re passing around is a valid object? – Add in some classes, interfaces, and types. Once you’ve done that, Visual Studio or the command line compiler will check all the code for errors like it would a typed language, and spit out the plain Javascript for it.  So, at it’s core, it’s not so much a new language as it is sugar for letting tools have something more concrete to check against.  You can even create a definition file for libraries like jQuery to get checking from them as well.  In future versions there’ll be a generator that you can point to an existing Javascript file and generate a definition file.  Pretty sweet!

I tried setting it up in Visual Studio, but had a hard time getting it to compile on build.  I was still having to run the command line compiler (this was on an existing project, so that may have had something to do with it).

Here are the steps to get it working to compile your Typescript files on build in Visual Studio 2012:

  1. Download and Install the Typescript plugin for Visual Studio
  2. Download and Install the Web Essentials 2012 plugin for Visual Studio
  3. In Visual Studio, go to TOOLS > Options
  4. Select Web Essentials
  5. Change the Option for Compile all TypeScript files on build to True.
That’s all you need to get you going!  Plus, Web Essentials has a lot of other handy features included as well, like minifying your JavaScript to improve performance.  Pretty nice!
Have you used TypeScript yet?  What do you think about it?  If you don’t like it, what are some good alternatives for building large-scale, JavaScript-intensive applications and keeping them human readable and more easily debuggable?
TypeScript Settings