TypeScript

TypeScript and Building with your Visual Studio Project

Leave a comment

TypeScript is great, and it is in Preview from Microsoft.  One of the first issues I had was how to get TypeScript to build your JavaScript files every time you build your Visual Studio project.

Steps to achieve this:

  1. Open your project file using editor (so you can see the xml definition)
  2. Search for import of Microsoft.Common.targets tag
         <Import Project=”$(MSBuildBinPath)\Microsoft.Common.targets” />
  3. If you have not found this reference in your project include it, it can be added after <Project *>
    This will enable for you to have BeforeBuild and AfterBuild events.
<Target Name="AfterBuild">
        <Message Text="After Build" Importance="high" />
</Target>
<Target Name="BeforeBuild">  
        <Message Text="Before Build" Importance="high" />  
</Target>

Put following xml under first PropertyGroup. This will introduce variables that we are using later on.Note: make sure you have correct version of typescript installed

<PropertyGroup>  
 <TypeScriptVersion>0.8.1.1</TypeScriptVersion>
 <CompileTypeScript>true</CompileTypeScript>
</PropertyGroup>

Now we are ready to introduce our implementation.The following can be inserted in Project tag, its best to add it in the end of the file.

<Project ToolsVersion="4.0" DefaultTargets="Build"    xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
<!-- omitted code -->
<!-- Insert your implementation -->
</Project>
Following tag will get all files from project directory that ends with .ts
<ItemGroup> 
 <TypeScriptCompile Include="$(ProjectDir)\**\*.ts" />
</ItemGroup>
Update before build event to call our custom target

<Target Name="BeforeBuild">  
  <Message Text="Before Build" Importance="high" />  
  <CallTarget Targets="TypeScriptBuild"/>
</Target>

And our implementation of build for every TypeScript build for every single file.

<Target Name="TypeScriptBuild"  Inputs="@(TypeScriptCompile)" Outputs="%
    (Identity).Dummy" Condition="'$(CompileTypeScript)'=='true'" >
 <Message Text="Building typescript file - @(TypeScriptCompile)"  Importance="high" />  
<Exec Command=""$(MSBuildProgramFiles32)\Microsoft SDKs\TypeScript\$(TypeScriptVersion)\tsc" -target ES5 "@(TypeScriptCompile)"" />
</Target> 

Thanks for Pavel Svarc for find this out