Invoking the TypeScript compiler when a project builds

If you’re using TypeScript, it’s good to set up your .csproj file so that it builds all the TypeScript files and compiles them to JS files. This makes sure that when someone else checks in a .TS file, you’ll get the corresponding .JS file without having to regenerate them manually, and that means you can avoid checking the .JS files into source control.

Here’s what you need to do to set up TypeScript for both developers and your build server.

1) Install the TypeScript VS2012/2013 extension from http://www.typescriptlang.org/#Download. All your developers need to do this because the changes in this post make the TS compiler run every time the project builds.

2) If your developers or your build server use VS2012, or a mix of VS2012 and VS2013, you’ll need to edit your .csproj file to include some defaults. (We currently develop in VS2013 but the build server is VS2012.) Open the .csproj file in a text editor and insert the following segment. It goes very near the top of the file — in our project, it goes on line 5, after the <Import> elements, before all the other <PropertyGroup> elements.

<PropertyGroup Condition="!Exists('$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\TypeScript\Microsoft.TypeScript.Default.props')">
 <!-- These are the defaults introduced in VS2013, duplicated here for VS2012 builds -->
 <TypeScriptRemoveComments>false</TypeScriptRemoveComments>
 <TypeScriptNoImplicitAny>false</TypeScriptNoImplicitAny>
 <TypeScriptNoResolve>false</TypeScriptNoResolve>
 <TypeScriptGeneratesDeclarations>false</TypeScriptGeneratesDeclarations>
 <TypeScriptModuleKind>amd</TypeScriptModuleKind>
 <TypeScriptOutFile>
 </TypeScriptOutFile>
 <TypeScriptOutDir>
 </TypeScriptOutDir>
 <TypeScriptSourceMap>true</TypeScriptSourceMap>
 <TypeScriptMapRoot>
 </TypeScriptMapRoot>
 <TypeScriptSourceRoot>
 </TypeScriptSourceRoot>
 <TypeScriptTarget>ES5</TypeScriptTarget>
 <TypeScriptAdditionalFlags>
 </TypeScriptAdditionalFlags>
 <TypeScriptEnableCompileOnSave>true</TypeScriptEnableCompileOnSave>
 </PropertyGroup>

2) Near the end, after <Import Project=”$(MSBuildBinPath)\Microsoft.CSharp.targets” />, insert this;

<Import Project="$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\TypeScript\Microsoft.TypeScript.targets" />

3) If you have a build server set up, you’ll need to install the TypeScript compiler on the build server. Otherwise, your build server is going to fail to generate the JS files. So head to your machine at either

For a VS2012 build server: C:\Program Files (x86)\MSBuild\Microsoft\VisualStudio\v11.0\TypeScript
For a VS2013 build server: C:\Program Files (x86)\MSBuild\Microsoft\VisualStudio\v12.0\TypeScript

And copy the TypeScript folder to the same location on the build server. This installs the compiler into the location mentioned in the <PropertyGroup> element from Step 2.

This should do you. Save up the .csproj and reload it in Visual Studio. When you build the project, all the .JS files should be generated automatically every time you build. You may need to exclude the .JS files from source control.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

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