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

Question

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>