【发布时间】：2014-08-20 23:46:09
【问题描述】：
我喜欢 typescript 背后的想法，但似乎无法弄清楚如何将它包含在 ASP.Net MVC 项目中。我已经安装了 Visual Studio 扩展，但似乎找不到有关如何添加编译成 *.js 文件的 *.ts 文件的示例或文档。
编辑：实际上，我是否应该复制 Win8 示例 .jsproj 包含和处理 .ts 文件的方式？还是仅适用于 HTML/JS Win8 项目？
【问题讨论】：
【发布时间】：2014-08-20 23:46:09
【问题描述】：
警告：这个答案现在已经过时了，因为自从这个答案以来，Typescript 和 MVC 都发生了显着变化。我稍后会尝试更新。 - Richcoder
感谢Sohnee 的回答。
您可以使用“添加”>“新项目”对话框将 TypeScript 文件添加到现有项目。 请注意，“Typescript File”项目不在 Web 组下，而是在它的父级下，在本例中为 Visual C#。
这应该添加一个 TypeScript 文件，其余的由 Visual Studio 完成。
然后你需要将这些行添加到项目文件中：
<ItemGroup>
<AvailableItemName Include="TypeScriptCompile" />
</ItemGroup>
<ItemGroup>
<TypeScriptCompile Include="$(ProjectDir)\**\*.ts" />
</ItemGroup>
<Target Name="BeforeBuild">
<Exec Command=""$(PROGRAMFILES)\Microsoft SDKs\TypeScript\0.8.0.0\tsc" -target ES5 @(TypeScriptCompile ->'"%(fullpath)"', ' ')" IgnoreExitCode="true" />
</Target>
它对我来说非常有效，但如果您遇到任何问题，请发表评论。
【讨论】：
-
另一种选择是做第一步，但安装出色的扩展 Web Essentials 2012。它为您提供了在保存和编译时进行编译的选项，并在很大程度上为您处理一切。
-
注意：Web Essentials 不再支持调试（我试过了）。他们已将 .map 文件的支持移至此处的 Web 工具中：microsoft.com/en-us/download/details.aspx?id=36053
-
对我不起作用。这确实...stackoverflow.com/a/18787231/221683
没错。您所需要的只是将 .ts 文件构建为 .js 文件的 ms 构建目标。 Win8 示例显示了一个 beforeBuild 目标，用于对属于 itemGroup TypeScriptCompile 的所有文件调用 tsc，它被定义为 $(ProjectDir)***.ts（或项目中的所有 .ts 文件）。
复制此模式应该适用于任何 msbuild 项目，而不仅仅是 Win8 项目。
以下是我所说的示例： 将此添加到任何 msbuild 项目中，并且您应该在构建开始时将任何 .ts 文件编译到等效的 .js 文件中..
<ItemGroup>
<TypeScriptCompile Include="$(ProjectDir)\**\*.ts" />
</ItemGroup>
<Target Name="TypeScriptCompile" BeforeTargets="Build">
<Message Text="Compiling TypeScript files" />
<Exec Command=""$(PROGRAMFILES)\Microsoft SDKs\TypeScript\0.8.0.0\tsc" -target ES5 @(TypeScriptCompile ->'"%(fullpath)"', ' ')" />
</Target>
【讨论】：
-
我收到此错误
Error 1 The command ""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"" exited with code 1. -
Hmm.. 如果这将
cmets 保持在原位，那就太好了。事实上，它使得与依赖于那些参考 cmets 的其他东西（如 Cassette）集成有点困难 -
你能运行同样的命令吗：""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"" 在控制台窗口中分享你从编译器得到的错误信息？
-
TypeScriptCompile 标记不会保留在我的项目文件中（而是会导致 .ts 文件条目重复）。将 .js 文件转换为 .ts 是问题的根源。而是使用添加新项目向导（也创建依赖的 js 文件）创建新的 ts 文件，并排除手动添加 TypeScriptCompile 标记（让 VS 来做）。
-
我从上述建议中删除了 \0.8.0.0，因为我安装的 typescript 中不存在此文件夹（我认为是 0.8.3 版）
我拼凑了一个 nuget 包，它将一个 msbuild 目标文件添加到您的项目中。它将运行 tsc 编译器并清理其输出，以便您可以双击 Visual Studio 中的错误并跳转到文件/行/列。
https://www.nuget.org/packages/Sholo.TypeScript.Build
对于您希望 tsc 编译的任何内容，您需要将属性窗口中的 Build Action 设置为“TypeScriptCompile”。经过几天对 TypeScript 的修改，我发现进行引用的 .ts 文件应该设置为 TypeScriptCompile，但仅被引用的文件不应该设置为 ymmv。此外，您可能需要显示所有文件并添加原始 .js 文件。如果您想将相关的 .ts/.js/.d.ts 文件组合在一起，请查看 VsCommands 扩展。使用 NetDemon/类似扩展的工作流程也很不错。
【讨论】：
如果您使用的是Bundling and Minification，我刚刚发布了一个将 TypeScript 编译为 Javascript 的 IBundleTransform 实现。它位于GitHub 和 NuGet（安装包 TypeScriptBundleTransform）上。如果您还没有使用 Bundling and Minification，那么值得一看！
【讨论】：
-
但是您将 ts 文件部署到网络服务器并在那里编译它们。那么你就完全错过了设计时编译信息，这是我认为 TypeScript 的关键点之一。
-
你能举一个这样的设计时编译信息的例子吗？
-
当然你可以在服务器上编译打字稿（但是你需要服务器上的编译器），但是在开发过程中你也希望有一个编译。这就是 TypeScript 的强项，类型检查等等。
-
当然，但是如果编译是在服务器上完成的，你仍然可以在开发过程中运行类型检查。如果您使用 ASP 和 Bundling and Minification，您很可能使用 Visual Studio，因此您可以使用官方的 typescript 工具。您永远不必手动运行编译器，但您仍会收到错误通知（带下划线并在“错误列表”窗口中列出）。最重要的是，如果发现错误，我默认建议的解决方案会抛出异常（因此在开发过程中，您一按 F5 就会知道），或者它可以选择将错误写入浏览器控制台。
更新：
只需安装 Web Essentials 2012 插件，您将在保存时自动编译 - 用于 .js 和 .min.js 以及一个整洁的拆分视图以查看您的 TypeScript 代码旁边的 JavaScript 输出。
这是我一直在使用的粗略方法：
右键单击您的项目 > 属性 > 构建事件
PreBuild 框粘贴此（递归构建项目中的所有 .ts 文件）：
forfiles /S /P $(ProjectDir) /m *.ts /c "cmd /c tsc @file"
用于构建特定的入口文件：
tsc $(ProjectDir)MyScripts/myfile.ts
我相信有更好的方法。
【讨论】：
-
注意：Web Essentials 不再支持调试（我试过了）。他们已将 .map 文件的支持移至此处的 Web 工具中：microsoft.com/en-us/download/details.aspx?id=36053
如果您使用的是Microsoft ASP.NET Web Optimization Framework（又名捆绑和缩小），那么请尝试将Bundle Transformer 与已安装的模块BundleTransformer.TypeScript 一起使用。除了将 TypeScript 代码编译成 JS 之外，您还可以使用 Bundle Transformer 的其他模块对生成的 JS 代码进行缩小：BundleTransformer.MicrosoftAjax、BundleTransformer.Yui、BundleTransformer.Closure、BundleTransformer.JsMin、@987654328 @ 和BundleTransformer.Packer。
【讨论】：
-
但是您将 ts 文件部署到网络服务器并在那里编译它们。那么你就完全错过了设计时编译信息，这是我认为 TypeScript 的关键点之一。