Ha ha,  sorry had to post a link bait title after reading this post by Scott Hanselman a few moments ago.  Anyway, I finally decided to take the plunge and dive into TypeScript after the recent 1.0 release.  

Since this is my first post in a planned series, I’ll cover the basics on getting TypeScript set up and also the tools I am using with Visual Studio 2013 to assist in development.  I’m actually two weeks into the plunge and way behind on posts so I’ll try not cover too much in a post.

To get Visual Studio 2013 in shape to do TypeScript development do the following.

Step 1 : Get Visual Studio 2013 Update 2 – this includes TypeScript 1.0.1, and TypeScript support is now officially part of VS 2013.

Step 2 : Get Web Essentials 2013 for VS 2013 Update 2 – admittedly this is buggy for me right now on some computers/projects, it seems to be crashing VS 2013 very frequently on save in those cases, so I keep it disabled most of the time right now and enable only when setting up script minification and doing actual builds.

Step 3 : Get a File Nesting extension like this one.  This makes things much more manageable in solution explorer, I use it to nest related JavaScript (.js) files under TypeScript (.ts) files,  minified JavaScript (.min.js, created by Web Essentials in my case) and also source map (.map) files under the JavaScript  files.  

When I have TypeScript file in my project, the TypeScript compiler automatically “trans-piles” the file to JavaScript on save.  However, I need to explicitly include the .js file in my project OR just select show all files in solution explorer and use the nesting tool to nest it appropriately, this has the side effect of including the file.  Then right click the .js file, select the WebEssentials menu and choose minify JavaScript file.   This is a one time setting so that on every save of the JavaScript file, WebEssentials will take the further step of generating minified JavaScript files.  After I include the files, I also nest them .  The end result for a TypeScript file  ‘Widget2.ts’ is as below :

My next post will cover the start of the ‘plunge’