TypeScript をプロジェクトビルド時にコンパイルする MSBuild 設定

※保存時にコンパイルする方法はこちらTypeScript を保存時にコンパイルする - kaji_3's blog
knockout.js で利用する ViewModelをTypeScriptで作ろうとしてます。しかし ASP.NET MVC プロジェクトにTypeScriptのファイルを追加して内容を変更しても、JavaScriptファイルにコンパイルしてくれません。Web Essentialの設定で保存時にコンパイルするようにしてもだめでした。
なので、ビルド後にコンパイルするように仕込みます。

環境

• TypeScript for Visual Studio 2012 version 0.8.1
• Visual Studio 2012

設定

TypeScriptプラグインをインストールするとTypeScriptを利用したHTMLプロジェクトを作成できます。このプロジェクトではTypeScriptファイルは変更後、ビルドするとTypeScriptがコンパイルされJavaScriptファイルが作成されます。

プロジェクトファイルを参照すると、BeforeBuild が設定されていました。

• TypeScriptHTMLApp1.csproj

  <PropertyGroup Condition="'$(Configuration)' == 'Debug'">
    <TypeScriptSourceMap> --sourcemap</TypeScriptSourceMap>
  </PropertyGroup>
  <Target Name="BeforeBuild">
    <Message Text="Compiling TypeScript files" />
    <Message Text="Executing tsc$(TypeScriptSourceMap) @(TypeScriptCompile ->'&quot;%(fullpath)&quot;', ' ')" />
    <Exec Command="tsc$(TypeScriptSourceMap) @(TypeScriptCompile ->'&quot;%(fullpath)&quot;', ' ')" />
  </Target>

ここがビルド時にTypeScriptファイルに対し tsc を実行する設定です。
これを ASP.NET MVC のプロジェクトファイル の以下の場所と置換します。

  <PropertyGroup>
    <PreBuildEvent>
    </PreBuildEvent>
  </PropertyGroup>
  <!-- To modify your build process, add your task inside one of the targets below and uncomment it. 
       Other similar extension points exist, see Microsoft.Common.targets.
  <Target Name="BeforeBuild">
  </Target>
  <Target Name="AfterBuild">
  </Target> -->

これでオッケー。
ASP.NET MVC アプリケーションビルド時にTypeScriptファイルがコンパイルされます。

TypeScript プラグインのバージョンが上がれば改善されそうですがまずはこれで。