如何将打字稿添加到现有的Asp.Net MVC项目?

我喜欢typcript背后的想法,但似乎无法弄清楚如何将其包含在ASP.Net MVC项目中。 我已经安装了Visual Studio扩展,但似乎无法find如何添加*.ts文件编译为*.js文件的示例或文档。

编辑:其实,我应该复制的Win8例如.jsproj包括和处理.ts文件的方式? 或者只能用于HTML / JS Win8项目?

警告:现在这个答案已经过时了,因为从这个答案开始,Typescript和MVC都发生了很大的变化。 我稍后再尝试更新。 – Richcoder

感谢Sohnee的答案。

您可以使用Add> New Item对话框将TypeScript文件添加到现有项目中。 exampleImage 请注意,“Typescript文件”项不驻留在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> 

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

那是对的。 所有你需要的是构build.ts文件到.js文件的ms build目标。 Win8示例显示了一个beforeBuild目标,用于调用属于itemGroup TypeScriptCompile(定义为$(ProjectDir)***。ts(或项目中的所有.ts文件))的所有文件的tsc。

复制这个模式应该可以在任何msbuild项目中工作,而不仅仅是Win8项目。

下面是我正在谈论的一个示例:将其添加到任何msbuild项目中,并且在构build开始时应该将任何.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> 

我扔了一个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 /类似的扩展工作stream也非常好。

如果你正在使用Bundling和Minification ,那么我刚刚发布了一个将TypeScript编译成Javascript的IBundleTransform实现。 它在GitHub和NuGet(Install-Package TypeScriptBundleTransform)上。 如果你还没有使用捆绑和缩小,那么值得一看!

更新:

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


这是我一直在使用的粗糙方法:

右键单击您的项目>属性>生成事件

PreBuild框粘贴(recursion地在项目中生成所有的.ts文件):

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

对于build立特定的入口文件:

 tsc $(ProjectDir)MyScripts/myfile.ts 

我相信有一个更好的方法来做到这一点。

如果您使用的是Microsoft ASP.NET Web Optimization Framework (也称为Bundling and Minification),那么尝试使用Bundle Transformer和已安装的模块BundleTransformer.TypeScript 。 除了将TypeScript代码编译为JS之外,还可以使用Bundle Transformer的其他模块( BundleTransformer.MicrosoftAjax , BundleTransformer.Yui , BundleTransformer.Closure , BundleTransformer.JsMin , BundleTransformer)来生成生成的JS代码的缩小。 UglifyJs和BundleTransformer.Packer 。