How do I add typescript to an existing Asp.Net MVC project? [duplicate]

Question

This question already has answers here:

Using TypeScript in an existing Visual Studio Web Site project (8 answers)

Closed 5 years ago.

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.

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?

Answer 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

Thanks to Sohnee for the answer.

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

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

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.

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

Replicating this pattern should work in any msbuild project, and not only Win8 projects.

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

<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

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.

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.

Answer 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!

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

---

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

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.

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