TypeScript開發系列（二）——VS讓普通工程自動編譯TypeScript

      在用Visual Studio 開發TypeScript時,如此係列（一）中所作的那樣，只有建立一個Type Application 工程，在此工程中添加的.ts(TypeScript文件格式)腳本在編譯時纔會自動被編譯。若是咱們想要在普通的asp.net web工程中使用TypeScript。當咱們檢索並添加一個.ts文件並做修改編譯，此時TypeScript不會被自動編譯並生成對應的js文件。

     經過一些探索，我發現TypeScript的自動編譯功能是直接添加到項目文件的一段代碼。這是咱們須要手動修改咱們的項目文件並添加TypeScript自動編譯代碼進去以後再編譯，普通的asp.net web項目也能自動編TypeScript了。具體操做看下面：

• 新建一個web 應用程序（我用的是VS2012），在此命名爲CanAutoBuildTSProj
  
  
• 在此工程中添加一個TypeScript文件（若是找不着，能夠使用vs2012的搜索功能，很好用），這裏命名爲file1.ts,此時它爲自動生成一個file1.js的文件： 
  
  
• 此時咱們修改file1.ts文件，給他聲明一個新的變量，var dist1= p.getDist();  而後選擇項目，點擊編譯，你會發現file1.ts並無被編譯，file1.js沒有被重寫：
  
  
• 解決此問題，讓TypeScript文件在項目編譯時被自動編譯。咱們能夠經過修改項目工程文件來實現。想要在vs中修改項目文件，首先須要在解決方案中unload（卸載）該項目，而後右鍵項目選擇「編輯xxxx項目.csproj」：
  
  
  
• 在最後一行代碼（</project>）前面添加下面這段代碼：
    <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被成功編譯了！
  
  

      怎麼樣？很酷吧！