如何将打字稿添加到现有的Asp中。净MVC项目吗?(复制)

This question already has an answer here:

这个问题已经有了答案:

Using TypeScript in an existing Visual Studio Web Site project 8 answers
在现有的Visual Studio Web站点project 8中使用打字稿回答

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 *.ts files which compile into *.js files.

我喜欢打字稿背后的想法，但似乎无法理解如何在ASP中包含它。净MVC项目。我已经安装了Visual Studio扩展，但是我似乎找不到如何添加*的示例或文档。ts文件编译成*。js文件。

Edit: Actually, should I replicate the way that the Win8 example .jsproj includes and handles .ts files? Or will that only work for HTML/JS Win8 projects?

编辑:实际上，我应该复制Win8示例.jsproj包含和处理.ts文件的方式吗?还是只适用于HTML/JS Win8项目?

6 个解决方案

#1

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

警告:这个答案现在相当过时，因为打印稿和MVC自这个答案以来都发生了显著的变化。稍后我将尝试更新。——Richcoder

Thanks to Sohnee for the answer.

谢谢索内的回答。

You can add TypeScript files to an existing project using the Add > New Item dialog. 如何将打字稿添加到现有的Asp中。净MVC项目吗?(复制) 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文件”项并不位于Web组之下，而是在Visual c#的父目录下。

This should add a TypeScript file and Visual Studio will do the rest.

这将添加一个打字稿文件，剩下的将由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="&quot;$(PROGRAMFILES)\Microsoft SDKs\TypeScript\0.8.0.0\tsc&quot; -target ES5 @(TypeScriptCompile ->'&quot;%(fullpath)&quot;', ' ')" IgnoreExitCode="true" />
 </Target>

It worked perfectly for me, but please comment if you run into any issues.

这对我来说很完美，但是如果你遇到任何问题请评论。

#2

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).

这是正确的。您只需要ms构建目标就可以将.ts文件构建为.js文件。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文件编译成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>

#3

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

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.

您需要将properties窗口中的Build操作设置为“TypeScriptCompile”，以便编译tsc。经过几天对打字稿的修改，我发现正在进行引用的.ts文件应该设置为TypeScriptCompile，而被引用的文件不应该设置为，而应该设置为ymmv。此外，您可能需要显示所有文件并添加原始的.js文件。如果你想对相关的。ts/。js/。d进行分组。ts文件一起，看看VsCommands扩展名。使用NetDemon/类似的扩展，工作流也相当不错。

#4

If you are using Bundling and Minification, I have just released an implementation of IBundleTransform that compiles TypeScript to Javascript. It is on GitHub and NuGet (Install-Package TypeScriptBundleTransform). If you are not yet using Bundling and Minification, it is worth a look!

如果您正在使用绑定和缩小，我刚刚发布了IBundleTransform的实现，该实现将类型文件编译为Javascript。它在GitHub和NuGet上(Install-Package TypeScriptBundleTransform)。如果你还没有使用捆绑和缩小，这是值得一看的!

#5

update:

更新:

Just install Web Essentials 2012 plugin, 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插件，你就可以在save上自动编译。js和。min。js和一个简洁的分割视图，可以看到在您的打字稿代码旁边的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):

预构建框粘贴这个(递归地构建项目中的所有.ts文件):

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

For building specific entry file:

用于构建特定的输入文件:

tsc $(ProjectDir)MyScripts/myfile.ts

I am sure there is a better way of doing it.

我相信有更好的方法。

#6

If you are using the Microsoft ASP.NET Web Optimization Framework (aka Bundling and Minification), then try to use the Bundle Transformer with 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.UglifyJs and BundleTransformer.Packer.

如果你正在使用微软ASP。NET Web优化框架(又称捆绑和缩小)，然后尝试使用带有已安装模块BundleTransformer.TypeScript的BundleTransformer。除了将类型转换代码编译为JS之外，还可以使用BundleTransformer的其他模块(BundleTransformer)来生成生成生成的jsp代码。MicrosoftAjax BundleTransformer。Yui,BundleTransformer。关闭,BundleTransformer。一,BundleTransformer。UglifyJs BundleTransformer.Packer。

#1