Thursday 27 December 2012

Typescript Visual Studio Plugin - getting started

So the Christmas break is here and i'm full of turkey and rather than watch some sort of BBC shrek creation or watch who dies this year in eastenders, i'd rather exercise the brain.  Been looking at a couple of bits of "newer" tech this period (take a look at the meteor framework with node.js, looks really promising) but i've also decided to use typescript in my latest project as i like the idea of simulating class typing in a dynamic language.. I also thought the breville maker was a great invention....

For those unfamiliar with typescript, it provides a bit of structure to javascript with the ability to create classes, define types etc.  It's the brain child of Anders, the man who brought you Delphi and our beloved C#

Anyways, there is a Visual Studio plugin available that allows us to write in typescript and handles calling the typescript compiler and giving us our javascript out the other end.

The plugin can be downloaded from the Typescript site

http://www.typescriptlang.org/Tutorial/

and once done, you can create a typescript file (i couldn't find it under the web templates, i found it under the Visual c# option instead)


So if you select typescript and add you file you will get a .ts file with its .js compiled equivilent underneath.  If you have downloaded the web essentials for visual studio, you can set some options to compile the typescript on build and show hide the preview pane etc:



I tried setting these whilst working on an existing project and could'nt get them to compile the typescript for me, so a bit of project file editing is necessary.  Unload your web project by right clicking the web project in the solution explorer and select "unload project".  Once done, right click the web project again and select edit project file

Down the bottom are examples of ms build targets.  We add the before build target and call the typescript compiler:


  <Target Name="BeforeBuild">
    <Exec Command="&quot;$(PROGRAMFILES)\Microsoft SDKs\TypeScript\0.8.1.1\tsc&quot; @(TypeScriptCompile ->'&quot;%(fullpath)&quot;', ' ')" />
  </Target>


You then can go ahead and start using Typescript !

A.