I’m poking around with TypeScript and the word on the street was that a recent addition to the plugin for VS2012 (v. 0.8.x) added the ability to do compilation from TypeScript to JavaScript when saving.  I discovered it doesn’t actually work quite right out of the box.  There are two things you need to do:

1. Enable compile on save in the Tools –> Options menu.
2. Add a <PropertyGroup> to your .csproj file to configure the TypeScript compiler.

To enable compile-on-save, do the following:

1. Navigate to Tools –> Options.
2. On the left side, expand Text Editor and find TypeScript, and then the Project sub-node.
3. Check the “Automatically compile TypeScript files which are part of a project”
4. Click OK to save changes.

Next, you need to update your project that you are using to contain the appropriate properties to configure the build target for the TypeScript compiler.  Add this XML to your .csproj (first, unload the project and then edit the .csproj file manually):

<PropertyGroup Condition="'$(Configuration)' == 'Debug'">
  <TypeScriptTarget>ES5</TypeScriptTarget>
  <TypeScriptIncludeComments>true</TypeScriptIncludeComments>
  <TypeScriptSourceMap>true</TypeScriptSourceMap>
  <TypeScriptModuleKind>amd</TypeScriptModuleKind>
</PropertyGroup>
<PropertyGroup Condition="'$(Configuration)' == 'Release'">
  <TypeScriptTarget>ES5</TypeScriptTarget>
  <TypeScriptIncludeComments>false</TypeScriptIncludeComments>
  <TypeScriptSourceMap>false</TypeScriptSourceMap>
  <TypeScriptModuleKind>amd</TypeScriptModuleKind>
</PropertyGroup>

Notice that you can set various compiler options here that you normally set as a command-line parameter when using the tsc compiler program.  In this case, I added the <TypeScriptModuleKind> element which tells the compiler how to generate the module requiring code.  Here, I’ve set mine up to use AMD rather than CommonJS (which is the default).  My Target is also “ES5” so it will target ECMAScript 5 rather than the default ECMAScript 3. 

Categories: Visual Studio

Tags: TypeScript