asp.net-mvc 如何将打字稿添加到现有的 Asp.Net MVC 项目？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12680486/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I add typescript to an existing Asp.Net MVC project?
提问by Richicoder
I love the idea behind typescript, but can't seem to figure out how to include it in an ASP.Net MVC project. I've already installed the Visual Studio extension, but I can't seem to find an example or documentation on how to add *.tsfiles which compile into *.jsfiles.
我喜欢打字稿背后的想法，但似乎无法弄清楚如何将它包含在 ASP.Net MVC 项目中。我已经安装了 Visual Studio 扩展，但我似乎找不到关于如何添加*.ts编译成*.js文件的文件的示例或文档。
Edit: Actually, should I replicate the way that the Win8 example .jsprojincludes and handles .tsfiles? Or will that only work for HTML/JS Win8 projects?
编辑：实际上，我应该复制 Win8 示例.jsproj包含和处理.ts文件的方式吗？还是只适用于 HTML/JS Win8 项目？
采纳答案by Richicoder
Warning:This answer is now fairly dated, as both Typescript and MVC has changed significantly since this answer. I'll try an update later. - Richcoder
警告：这个答案现在已经过时了，因为自这个答案以来，Typescript 和 MVC 都发生了显着变化。我稍后会尝试更新。- Richcoder
Thanks to Sohneefor the answer.
感谢Sohnee的回答。
You can add TypeScript files to an existing project using the Add > New Item dialog.
Please note that the 'Typescript File' item doesn't reside under the Web group but under it's parent in this case Visual C#.
您可以使用 Add > New Item 对话框将 TypeScript 文件添加到现有项目。
请注意，“Typescript File”项不在 Web 组下，而是在它的父项下，在这种情况下，Visual C#。
This should add a TypeScript file and Visual Studio will do the rest.
这应该添加一个 TypeScript 文件，Visual Studio 将完成剩下的工作。
Then you need to add these lines to the project file:
然后你需要将这些行添加到项目文件中：
<ItemGroup>
<AvailableItemName Include="TypeScriptCompile" />
</ItemGroup>
<ItemGroup>
<TypeScriptCompile Include="$(ProjectDir)\**\*.ts" />
</ItemGroup>
<Target Name="BeforeBuild">
<Exec Command=""$(PROGRAMFILES)\Microsoft SDKs\TypeScript<ItemGroup>
<TypeScriptCompile Include="$(ProjectDir)\**\*.ts" />
</ItemGroup>
<Target Name="TypeScriptCompile" BeforeTargets="Build">
<Message Text="Compiling TypeScript files" />
<Exec Command=""$(PROGRAMFILES)\Microsoft SDKs\TypeScriptforfiles /S /P $(ProjectDir) /m *.ts /c "cmd /c tsc @file"
.8.0.0\tsc" -target ES5 @(TypeScriptCompile ->'"%(fullpath)"', ' ')" />
</Target>
.8.0.0\tsc" -target ES5 @(TypeScriptCompile ->'"%(fullpath)"', ' ')" IgnoreExitCode="true" />
</Target>
It worked perfectly for me, but please comment if you run into any issues.
它对我来说非常有效，但如果您遇到任何问题，请发表评论。
回答by mohamed hegazy
That is correct. all you need is the ms build target to build the .ts files into .js files. The Win8 example shows a beforeBuild target to call tsc on all files belonging to itemGroup TypeScriptCompile, which is defined as $(ProjectDir)***.ts (or all .ts files in your project).
那是正确的。您所需要的只是将 .ts 文件构建为 .js 文件的 ms 构建目标。Win8 示例显示了一个 beforeBuild 目标，用于对属于 itemGroup TypeScriptCompile 的所有文件调用 tsc，该文件定义为 $(ProjectDir)***.ts（或项目中的所有 .ts 文件）。
Replicating this pattern should work in any msbuild project, and not only Win8 projects.
复制此模式应该适用于任何 msbuild 项目，而不仅仅是 Win8 项目。
Here is a sample of what I am talking about: Add this to any msbuild project, and you should be compiling any .ts file into the equivialnt .js file when your build starts..
这是我正在谈论的示例：将它添加到任何 msbuild 项目，并且您应该在构建开始时将任何 .ts 文件编译到等效的 .js 文件中。
tsc $(ProjectDir)MyScripts/myfile.ts
回答by scottt732
I threw together a nuget package that adds an msbuild targets file to your project. It will run the tsc compiler and clean up its output so that you can double click on the errors in Visual Studio and jump to the file/line/column.
我拼凑了一个 nuget 包，将 msbuild 目标文件添加到您的项目中。它将运行 tsc 编译器并清理其输出，以便您可以双击 Visual Studio 中的错误并跳转到文件/行/列。
https://www.nuget.org/packages/Sholo.TypeScript.Build
https://www.nuget.org/packages/Sholo.TypeScript.Build
You need to set the Build Action in the properties Window to 'TypeScriptCompile' for anything that you want tsc to compile. From a few days of tinkering with TypeScript, I've found that the .ts files that are doing the referencing should be set to TypeScriptCompile, but the files that are only being referenced should not, but ymmv. Also, you may need to Show All Files and add the original .js file. If you want to group related .ts/.js/.d.ts files together, take a look at the VsCommands extension. Workflow is also pretty nice with NetDemon/similar extensions.
对于您希望 tsc 编译的任何内容，您需要将属性窗口中的构建操作设置为“TypeScriptCompile”。经过几天对 TypeScript 的修补，我发现进行引用的 .ts 文件应该设置为 TypeScriptCompile，但只被引用的文件不应该，而是 ymmv。此外，您可能需要显示所有文件并添加原始 .js 文件。如果要将相关的 .ts/.js/.d.ts 文件组合在一起，请查看 VsCommands 扩展名。NetDemon/类似扩展的工作流程也很不错。
回答by Wouter Devinck
If you are using Bundling and Minification, I have just released an implementation of IBundleTransform that compiles TypeScript to Javascript. It is on GitHuband NuGet (Install-Package TypeScriptBundleTransform). If you are not yet using Bundling and Minification, it is worth a look!
如果您正在使用Bundling 和 Minification，我刚刚发布了一个 IBundleTransform 的实现，它将 TypeScript 编译为 Javascript。它位于GitHub和 NuGet (Install-Package TypeScriptBundleTransform) 上。如果您还没有使用 Bundling 和 Minification，那么值得一看！
回答by enko
update:
更新：
Just install Web Essentials 2012plugin, you will have automatic compilation on save - for both .js and .min.js and a neat split view to see the JavaScript output next to your TypeScript code.
只需安装Web Essentials 2012插件，您将在保存时自动编译 - 对于 .js 和 .min.js 以及一个整洁的拆分视图，以查看 TypeScript 代码旁边的 JavaScript 输出。
This is a crude method I've been using:
这是我一直在使用的粗略方法：
Right click your Project > Properties > Build Events
右键单击您的项目 > 属性 > 构建事件
PreBuild box paste this (recursively builds all .ts files in project):
PreBuild 框粘贴此内容（递归构建项目中的所有 .ts 文件）：
##代码##For building specific entry file:
用于构建特定的入口文件：
##代码##I am sure there is a better way of doing it.
我相信有更好的方法来做到这一点。
回答by Andrey Taritsyn
If you are using the Microsoft ASP.NET Web Optimization Framework(aka Bundling and Minification), then try to use the Bundle Transformerwith installed module BundleTransformer.TypeScript. In addition to the compiling of TypeScript-code to JS, you can also produce minification of the generated JS-code by using other modules of the Bundle Transformer: BundleTransformer.MicrosoftAjax, BundleTransformer.Yui, BundleTransformer.Closure, BundleTransformer.JsMin, BundleTransformer.UglifyJsand BundleTransformer.Packer.
如果您使用的是Microsoft ASP.NET Web 优化框架（又名 Bundling 和 Minification），请尝试使用安装了模块BundleTransformer.TypeScript的Bundle Transformer。除了将 TypeScript 代码编译为 JS 之外，您还可以使用 Bundle Transformer 的其他模块对生成的 JS 代码进行缩小：BundleTransformer.MicrosoftAjax、BundleTransformer.Yui、BundleTransformer.Closure、BundleTransformer.JsMin、BundleTransformer。 UglifyJs和BundleTransformer.Packer。
