如何将typescript添加到现有的Asp.Net MVC项目中？

Question

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

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

Answer 1

警告：这个答案现在相当过时，因为这个答案后，Typescript和MVC都发生了重大变化。我稍后会尝试更新。 - Richcoder

感谢Sohnee的答案。

您可以使用Add＆gt;将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="&quot;$(PROGRAMFILES)\Microsoft SDKs\TypeScript\0.8.0.0\tsc&quot; -target ES5 @(TypeScriptCompile ->'&quot;%(fullpath)&quot;', ' ')" IgnoreExitCode="true" />
 </Target>

它对我来说非常合适，但如果您遇到任何问题，请发表评论。

Answer 2

这是正确的。您只需要将.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="&quot;$(PROGRAMFILES)\Microsoft SDKs\TypeScript\0.8.0.0\tsc&quot; -target ES5 @(TypeScriptCompile ->'&quot;%(fullpath)&quot;', ' ')" />
</Target>

Answer 3

我把一个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 /类似扩展的工作流程也很不错。

Answer 4

如果您正在使用Bundling and Minification，我刚刚发布了一个将TypeScript编译为Javascript的IBundleTransform实现。它位于GitHub和NuGet（Install-Package TypeScriptBundleTransform）上。如果你还没有使用捆绑和缩小，那么值得一看！

Answer 5

<强>更新

只需安装Web Essentials 2012插件，您将在保存时自动编译 - 对于.js和.min.js以及整齐的拆分视图，以查看TypeScript代码旁边的JavaScript输出。

---

这是我一直在使用的粗略方法：

右键单击您的项目＆gt;属性＆gt;建立活动

PreBuild框粘贴它（以递归方式构建项目中的所有.ts文件）：

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

用于构建特定的条目文件：

tsc $(ProjectDir)MyScripts/myfile.ts

我确信有更好的方法。

Answer 6

如果您使用Microsoft ASP.NET Web Optimization Framework（又名捆绑和缩小），请尝试使用已安装模块Bundle Transformer的BundleTransformer.TypeScript。除了将TypeScript代码编译为JS之外，您还可以使用Bundle Transformer的其他模块来生成生成的JS代码的缩小：BundleTransformer.MicrosoftAjax，BundleTransformer.Yui，BundleTransformer.Closure， BundleTransformer.JsMin，BundleTransformer.UglifyJs和BundleTransformer.Packer。