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

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?

score 25 · Accepted Answer · edited May 23 '17 at 12:02

25

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

edited May 23 '17 at 12:02

Community

1
1

answered Oct 02 '12 at 23:38

Richicoder

864
1
8
14

6

Another alternative is doing the first step, but installing the excellent extension Web Essentials 2012. It give's you the option to compile on save and compile, and largely takes care of everything for you. – Richicoder Oct 18 '12 at 14:35
1

Note: Web Essentials no longer supports debugging (I've tried). They've moved the support for .map files into Web Tools here: http://www.microsoft.com/en-us/download/details.aspx?id=36053 – James Wilkins Jul 09 '13 at 16:41
Didn't work for me. This did... http://stackoverflow.com/a/18787231/221683 – Ian Warburton Mar 06 '14 at 16:15

mohamed hegazy · Answer 2 · 2012-10-01T22:35:29.123

19

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>

edited Oct 01 '12 at 22:35

answered Oct 01 '12 at 22:14

mohamed hegazy

9,191
4
30
21

1

I get this error `Error 1 The command ""C:\Program Files (x86)\Microsoft SDKs\TypeScript\0.8.0.0\tsc" -target ES5 "E:\Projects\Labs\RS\Proj1\Proj1.Web\Proj1.Web\Scripts\jquery.d.ts" "E:\Projects\Labs\RS\Proj1\Proj1.Web\Proj1.Web\Scripts\lib.d.ts" "E:\Projects\Labs\RS\Proj1\Proj1.Web\Proj1.Web\Scripts\TestScript.ts"" exited with code 1.` – Richicoder Oct 01 '12 at 23:45
Hmm.. would be nice if this kept the comments in-place. As it is, it makes it a bit difficult to integrate with something else that depends on those reference comments (like Cassette) – eoleary Oct 02 '12 at 18:05
can you run the same command: ""C:\Program Files (x86)\Microsoft SDKs\TypeScript\0.8.0.0\tsc" -target ES5 "E:\Projects\Labs\RS\Proj1\Proj1.Web\Proj1.Web\Scripts\jquery.d.ts" "E:\Projects\Labs\RS\Proj1\Proj1.Web\Proj1.Web\Scripts\lib.d.ts" "E:\Projects\Labs\RS\Proj1\Proj1.Web\Proj1.Web\Scripts\TestScript.ts"" in a consol window and share the error message you get from the compiler? – mohamed hegazy Oct 02 '12 at 20:30
The TypeScriptCompile tags would not persist in the project file for me (and instead would cause the .ts file entries get duplicated). Converting .js files to .ts is the source of the problem. Instead create new ts files using the add new item wizard (which creates the dependent js file too), and exclude manually adding the TypeScriptCompile tag (let VS do it). – Brent Oct 14 '12 at 12:19
I removed \0.8.0.0 from the above suggestion as this folder didn't exist on my install of typescript (version 0.8.3 I think) – Robert Brooker Mar 01 '13 at 02:59

score 7 · Answer 3 · answered Oct 04 '12 at 00:55

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.

score 4 · Answer 4 · answered Oct 07 '12 at 22:51

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!

answered Oct 07 '12 at 22:51

Wouter Devinck

63
3

3

But then you deploy the ts files to the webserver and compile them there. Then you are completely missing the designtime compilation information, which is one of the key points of TypeScript in my opinion. – Jaap Oct 25 '12 at 07:47
could you give an example of such designtime compilation information? – Wouter Devinck Oct 26 '12 at 20:25
Of course you can compile the typescript on the server (but you need the compiler on the server then), but during development you want also to have a compilation. That is the strength of TypeScript, type checking and so on. – Jaap Oct 27 '12 at 11:26
Sure, but if the compilation is done on the server you can still run typechecking during development. If you are using ASP with Bundling and Minification, you are most likely using Visual Studio, so you can use the official typescript tools. You never have to manually run the compiler, but you still get notified of errors (underlined and listed in the "Error List" window). On top of that, the solution I have suggested by default throws an exception if an error was found (so you will know as soon as you hit F5, during development) or it can optionally write the errors to the browser console. – Wouter Devinck Oct 27 '12 at 15:20

enko · Answer 5 · 2013-04-07T00:39:11.627

3

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.

edited Apr 07 '13 at 00:39

answered Oct 02 '12 at 01:10

enko

615
6
20

1

Note: Web Essentials no longer supports debugging (I've tried). They've moved the support for .map files into Web Tools here: http://www.microsoft.com/en-us/download/details.aspx?id=36053 – James Wilkins Jul 09 '13 at 16:42

score 1 · Answer 6 · answered Oct 19 '12 at 16:43

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.

But then you deploy the ts files to the webserver and compile them there. Then you are completely missing the designtime compilation information, which is one of the key points of TypeScript in my opinion. — Jaap, Oct 25 '12 at 07:48

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

6 Answers6

Linked