如何將打字稿添加到現有的Asp.Net MVC項目中？

我喜歡typcript背後的想法，但似乎無法弄清楚如何將其包含在ASP.Net MVC項目中。我已經安裝了Visual Studio擴展，但我似乎無法找到如何添加*.ts文件編譯爲*.js文件的示例或文檔。如何將打字稿添加到現有的Asp.Net MVC項目中？

編輯：其實，我是否應該複製Win8示例.jsproj包含並處理.ts文件的方式？或者只能用於HTML/JS Win8項目？

來源

2012-10-01 Richicoder

警告：現在這個答案已經過時了，因爲從這個答案開始，Typescript和MVC都發生了很大的變化。稍後我會嘗試更新。 - Richcoder

感謝Sohnee爲答案。

您可以使用Add> New Item對話框將TypeScript文件添加到現有項目。 exampleImage 請注意'Typescript File'項目不駐留在Web組下，而是在它的父項下，在這種情況下是Visual C＃。

這應該添加一個TypeScript文件，Visual Studio將完成剩下的工作。

然後，你需要將這些行添加到項目文件：

<ItemGroup> 
    <AvailableItemName Include="TypeScriptCompile" /> 
</ItemGroup> 
<ItemGroup> 
    <TypeScriptCompile Include="$(ProjectDir)\**\*.ts" /> 
</ItemGroup> 
<Target Name="BeforeBuild"> 
    <Exec Command="&quot;$(PROGRAMFILES)\Microsoft SDKs\TypeScript\0.8.0.0\tsc&quot; -target ES5 @(TypeScriptCompile ->'&quot;%(fullpath)&quot;', ' ')" IgnoreExitCode="true" /> 
</Target>

它的工作完美的我，但如果您遇到任何問題，請評論。

來源

2012-10-02 23:38:13 Richicoder

另一種方法是完成第一步，但安裝優秀的擴展Web Essentials 2012.它爲您提供了在保存和編譯時進行編譯的選項，並在很大程度上爲您處理所有事情。 – Richicoder

注意：Web Essentials不再支持調試（我試過）。他們已經將對.map文件的支持移到了Web工具中：http://www.microsoft.com/en-us/download/details.aspx?id=36053 –

對我來說沒有任何作用。這樣做... http://stackoverflow.com/a/18787231/221683 –

這是正確的。所有你需要的是構建.ts文件到.js文件的ms build目標。 Win8示例顯示了一個beforeBuild目標，用於調用屬於itemGroup TypeScriptCompile（定義爲$（ProjectDir）***。ts（或項目中的所有.ts文件））的所有文件的tsc。

複製這種模式應該可以在任何msbuild項目中工作，而不僅僅是Win8項目。

這裏是一個什麼樣我談論：一下添加到任何MSBuild項目，你應該編譯任何的.ts文件到equivialnt .js文件您的構建開始時..

<ItemGroup> 
    <TypeScriptCompile Include="$(ProjectDir)\**\*.ts" /> 
</ItemGroup> 


<Target Name="TypeScriptCompile" BeforeTargets="Build"> 
    <Message Text="Compiling TypeScript files" /> 
    <Exec Command="&quot;$(PROGRAMFILES)\Microsoft SDKs\TypeScript\0.8.0.0\tsc&quot; -target ES5 @(TypeScriptCompile ->'&quot;%(fullpath)&quot;', ' ')" /> 
</Target>

來源

2012-10-01 22:14:39

謝謝！我現在就試試看！ – Richicoder

我收到此錯誤 '錯誤命令「」C：\ Program Files（x86）\ Microsoft SDKs \ TypeScript \ 0.8.0.0 \ tsc「-target ES5」E：\ Projects \ Labs \ RS \ Proj1 \ Proj1.Web \ Proj1.Web \ Scripts \ jquery.d.ts「」E：\ Projects \ Labs \ RS \ Proj1 \ Proj1.Web \ Proj1.Web \ Scripts \ lib.d.ts「」E：\ Projects \ Labs \ RS \ Proj1 \ Proj1.Web \ Proj1.Web \ Scripts \ TestScript.ts「」用代碼1退出。' – Richicoder

嗯..如果這樣保留了評論就好了。事實上，它與其他依賴於這些參考評論的其他內容（如Cassette）的集成有點困難 – eoleary

更新：

只要安裝Web Essentials 2012插件，你將有保存自動編譯 - 兩者的.js和.min.js和一個整潔的拆分視圖旁邊看到您的打字稿代碼JavaScript的輸出。

這是一個粗略的方法我已經使用：

右鍵點擊你的項目>屬性>生成事件

預生成框粘貼（遞歸建立在項目中的所有.ts文件）：

forfiles /S /P $(ProjectDir) /m *.ts /c "cmd /c tsc @file"

爲構建特定條目文件：

tsc $(ProjectDir)MyScripts/myfile.ts

我相信有更好的方法來做到這一點。

來源

2012-10-02 01:10:52 enko

注意：Web Essentials不再支持調試（我試過了）。他們已經將對.map文件的支持移到了Web工具中：http://www.microsoft.com/en-us/download/details.aspx?id=36053 –

我扔在一起的nuget包，添加一個msbuild目標文件到您的項目。它將運行tsc編譯器並清理其輸出，以便雙擊Visual Studio中的錯誤並跳轉到文件/行/列。

https://www.nuget.org/packages/Sholo.TypeScript.Build

您需要設置在屬性窗口中「TypeScriptCompile」生成操作爲您要TSC編譯任何東西。從修改TypeScript的幾天後，我發現正在做引用的.ts文件應該被設置爲TypeScriptCompile，但是僅被引用的文件不應該，而是ymmv。另外，您可能需要顯示所有文件並添加原始.js文件。如果您想將相關的.ts/.js/.d.ts文件組合在一起，請查看VsCommands擴展。 NetDemon /類似的擴展工作流也非常好。

來源

2012-10-04 00:55:15 scottt732

如果您使用Bundling and Minification，我剛剛發佈了一個將TypeScript編譯爲Javascript的IBundleTransform實現。它在GitHub和NuGet（Install-Package TypeScriptBundleTransform）上。如果您還沒有使用捆綁和縮小，那麼值得一看！

來源

2012-10-07 22:51:18

但是，然後你將ts文件部署到網絡服務器並在那裏編譯它們。然後你完全錯過了設計時編譯信息，這是我認爲的TypeScript的關鍵之一。 – Jaap

你能舉一個這樣的設計時編譯信息的例子嗎？ –

當然，您可以在服務器上編譯打字稿（但是您需要在服務器上安裝編譯器），但在開發過程中，您還需要編譯。這就是TypeScript的強項，類型檢查等等。 – Jaap

如果您使用的是Microsoft ASP.NET Web Optimization Framework（又名捆綁和縮小），則嘗試使用安裝模塊BundleTransformer.TypeScript的Bundle Transformer。除了將TypeScript代碼編譯爲JS外，您還可以使用Bundle Transformer的其他模塊生成縮小的JS代碼：BundleTransformer.MicrosoftAjax,BundleTransformer.Yui,BundleTransformer.Closure,BundleTransformer.JsMin,BundleTransformer.UglifyJs和BundleTransformer.Packer。

來源

2012-10-19 16:43:16

但是，然後你將ts文件部署到網絡服務器並在那裏編譯它們。然後你完全錯過了設計時編譯信息，這是我認爲的TypeScript的關鍵之一。 – Jaap

如何將打字稿添加到現有的Asp.Net MVC項目中？

回答

相關問題