我喜欢 typescript 背后的想法，但似乎无法弄清楚如何将它包含在 ASP.Net MVC 项目中。我已经安装了 Visual Studio 扩展，但我似乎找不到关于如何添加*.ts编译成*.js文件的文件的示例或文档。
编辑：实际上，我应该复制 Win8 示例.jsproj包含和处理.ts文件的方式吗？还是仅适用于 HTML/JS Win8 项目？
问问题
38390 次
6 回答
25
警告：这个答案现在已经过时了，因为自从这个答案以来，Typescript 和 MVC 都发生了很大的变化。我稍后会尝试更新。- Richcoder
感谢Sohnee的回答。
您可以使用 Add > New Item 对话框将 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>
它对我来说非常有效，但是如果您遇到任何问题，请发表评论。
于 2012-10-02T23:38:13.750 回答
19
那是对的。您所需要的只是将 .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>
于 2012-10-01T22:14:39.563 回答
7
我拼凑了一个 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/类似扩展的工作流程也很不错。
于 2012-10-04T00:55:15.907 回答
4
如果您正在使用Bundling 和 Minification，我刚刚发布了 IBundleTransform 的实现，它将 TypeScript 编译为 Javascript。它在GitHub和 NuGet (Install-Package TypeScriptBundleTransform) 上。如果您还没有使用 Bundling and Minification，那么值得一看！
于 2012-10-07T22:51:18.887 回答
3
更新：
只需安装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
我确信有更好的方法来做到这一点。
于 2012-10-02T01:10:52.793 回答
1
如果您使用的是Microsoft ASP.NET Web 优化框架（又名捆绑和缩小），请尝试将捆绑转换器与已安装的模块BundleTransformer.TypeScript 一起使用。除了将 TypeScript 代码编译为 JS 之外，您还可以使用 Bundle Transformer 的其他模块对生成的 JS 代码进行缩小：BundleTransformer.MicrosoftAjax、BundleTransformer.Yui、BundleTransformer.Closure、BundleTransformer.JsMin、BundleTransformer。 UglifyJs和BundleTransformer.Packer。
于 2012-10-19T16:43:16.740 回答