Cannot compile TypeScript files in Visual Studio 2012

Question

I downloaded and installed TypeScript extension for VS 2012, I got my first sample compiles by manually dragging the ts file onto the tsc.exe file! because no other way to compile the file will work.

I don't want to manually do this everytime I want to debug a page! I have read about 5 articles on the web and none of the solutions work. I've tried adding TypeScript compiler to PATH in Windows, I've tried downloading and installing via Nuget Package Manager the Sholo thing, I've tried these pages:

And not a single solution has worked.

I have even downloaded and installed the Web Essentials plugin for Visual Studio and gone to Options menu, then selected "Compile all TypeScript files on Build = True" and "Compile TypeScript on Save = True" - but nothing works.

I've read the entire TypeScript website, the specification, and even their discussion tab on the codeplex site.

How can I get TypeScript to compile when I save changes to the .ts file or when I press F5/Debug/Build?

*I don't really want any third-party scripts/plugins, etc unless it's absolutely necessary. I've seen a couple of them and it's just ... there's no point. I might as well just write pure JavaScript.

Can you create TypeScript projects in Visual Studio? Does it appear as an option when creating a new project? — Matt Burland, Oct 24 '12 at 14:43
@MattBurland The only option in the New Project dialog is `HTML Application with TypeScript`. But `.cshtml` files or Razor-code don't work in this project. I tried adding all the WebMatrix/Razor-based referenced and the bin folder to this project type. But yes, that option does work, the only problem with it is that I cannot get any of the server-side code files to work. Weird. — Arrow, Oct 24 '12 at 14:45
I'm keeping this question updated as there seem to be many others experiencing this same issue, but not a single solution seems to work for everyone. As of 25/10/12 I am still experiencing this issue. So if anybody has any ideas or possible solutions I would appreciate your help! — Arrow, Oct 25 '12 at 09:33
@Nikos: I did not find a workable solution for this, so I ended up writing a little app that you can download freely, which sends any of your typescript files to the compiler which in turn are compiled into javascript files. http://onthefly.codeplex.com/ It's not **the** solution, but it's the best one I have come up with, and it works. I hope it helps. If you try it out and need any help, let me know and I'll do my best. — Arrow, Dec 12 '12 at 16:37
We struggled with odd behavior with this that was resolved by importing TypeScript.targets right after CSharp.targets file. BCL Build targets or something was interfering with the process. — Marko Lahma, Sep 25 '13 at 06:00

score 11 · Answer 1 · answered Mar 21 '13 at 12:21

You have to ensure that the BuildAction must be TypeScriptCompile for your .ts files. I've added these lines to end of the (.csproj) project file. (Before closing Project tag) And It seems working.

 <PropertyGroup Condition="'$(Configuration)' == 'Debug'">
<TypeScriptTarget>ES3</TypeScriptTarget>
<TypeScriptIncludeComments>true</TypeScriptIncludeComments>
<TypeScriptSourceMap>true</TypeScriptSourceMap>
<TypeScriptModuleKind>AMD</TypeScriptModuleKind>
 </PropertyGroup>
<PropertyGroup Condition="'$(Configuration)' == 'Release'">
<TypeScriptTarget>ES3</TypeScriptTarget>
<TypeScriptIncludeComments>false</TypeScriptIncludeComments>
<TypeScriptSourceMap>false</TypeScriptSourceMap>
<TypeScriptModuleKind>AMD</TypeScriptModuleKind>
</PropertyGroup>
 <Import Project="$(VSToolsPath)\TypeScript\Microsoft.TypeScript.targets" />

score 5 · Answer 2 · answered Oct 24 '12 at 14:48

5

I had a similar problem when I renamed my .js files to .ts. You have to right click and add a new TypeScript File to your project in order for your .csproj to recognize that the TypeScript compiler should be used on this .ts file.

You will know it is correct when you see the arrow to expand the .ts file.

enter image description here

answered Oct 24 '12 at 14:48

ryan

6,541
5
43
68

I just went to Add New Item, then scrolled down the list, and there is no TypeScript file there :( - and there should be, too, 'cause I installed the TypeScript TypeScriptLanguageService (which I read somewhere that is supposed to install the file extension so it shows in the list) thing inside the `...SDKs/TypeScript/` folder. – Arrow Oct 24 '12 at 14:54
Thanks. That was the first thing I downloaded lastnight when I found out about TypeScript. :) – Arrow Oct 24 '12 at 15:00
I just managed to get this working! Thanks to your answer, it made me think... Even though I couldn't add a new TypeScript file from the Add New Item dialog, I did change the filename of my current TypeScript file, and then changed it back to the original filename, then I right-clicked my project name and clicked Build, and now it's compiling, just like in your pic. Thanks @ryan – Arrow Oct 24 '12 at 15:02
Sorry @ryan, after following your advice last night it worked. But them again today, it just wouldn't compile the ts files, so I followed your steps again, and it still won't compile. Any other ideas as to what may be causing this? – Arrow Oct 25 '12 at 09:31
Nope lol. It just doesn't even try to compile (I'm guessing, since I have nothing else to go by, that I know of.) – Arrow Oct 25 '12 at 11:54
Not sure what to say unless you want to provide a download of your project. – ryan Oct 25 '12 at 13:23
Whenever I want to add a new .ts file I just right-click the solution, add, add javascript file, change the extension from .js to .ts. And they all compile. – localhost Apr 03 '13 at 22:13

score 4 · Answer 3 · answered Oct 24 '12 at 16:36

4

If you change a .js file into a .ts file, you can go to the properties panel in Visual Studio and change the Build Action to TypeScriptCompile. This is what is missing when you change a file. This can save you from deleting and re-adding files.

answered Oct 24 '12 at 16:36

Fenton

241,084
71
387
401

1

You may also need to update your project file: http://www.stevefenton.co.uk/Content/Blog/Date/201210/Blog/Adding-TypeScript-To-An-Existing-Visual-Studio-Project/ – Fenton Oct 25 '12 at 09:30
I just read the link, which project file is this? I have `packages.config`, `web.config`, and I also have the Visual Studio Solution file. My website is a "website" not a "project" - there is a difference, I would assume, since both types generate different files. – Arrow Oct 25 '12 at 09:42
1

Ah yes! The website won't actually have a project file. I'm not sure what else you need to do for websites to get it working other than using the TypeScriptCompile property. – Fenton Oct 25 '12 at 09:53
Damn. It's looking like I'll have to use a 3rd party solution while MS rolls out better support for ts. Thanks for your help @Sohnee! – Arrow Oct 25 '12 at 10:03
1

No problems... you might just want to spin up the compiler yourself, maybe have a little batch file you can double click that does all the files you are working on: `tsc MyFile.ts` – Fenton Oct 25 '12 at 10:46
Thanks for the interesting suggestion. I think I will prefer a batch file. I wonder, could I specify Visual Studio to run the batch file when I hit F5/Debug/Build? – Arrow Oct 25 '12 at 10:49
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/18573/discussion-between-sohnee-and-james-kent) – Fenton Oct 25 '12 at 10:55

Volodymyr · Answer 4 · 2012-10-30T11:31:55.760

1

I had the same problem. I couldn't add new .ts file to the project. After renaming from .js to .ts file was not compiled. It even was not compiled using tsc in command line.

BUT! After recreating the file in windows explorer it was compiled successfully. And after manually creating file in windows explorer (not Visual Studio) in Scripts folder and including it to the project - all WORKS. I couldn't detect changes between these two files. But if you create text file in explorer, rename it to .ts and after that include in project and set file's Build Action to TypeScriptCompile - it works.

edited Oct 30 '12 at 11:31

answered Oct 30 '12 at 11:25

Volodymyr

508
1
8
16

1

Glad you found a workaround for such an annoying problem. :-) I wrote a little app (http://onthefly.codeplex.com/) which sends your files to the Compiler with just 1 click of a button. It just seemed like the most logical thing to do since I couldn't figure out any other way of making it compile. But, thanks for your answer. Good to know there are still other ways around this problem. :) – Arrow Oct 30 '12 at 11:29

score 1 · Answer 5 · answered May 03 '13 at 12:27

1

plug

I create a NuGet package that adds a afterbuild target to your project so all the included ts files are compiled to js.

Install-Package TypeScript.Compile

answered May 03 '13 at 12:27

Gluip

2,917
4
37
46

score 0 · Answer 6 · answered Mar 08 '13 at 12:50

0

I had the same problem. I updated web essentials extention and problem is solved. If you have web essentials extention, you can try that.

answered Mar 08 '13 at 12:50

Yasin Kilicdere

426
6
17

score 0 · Answer 7 · answered Jan 22 '14 at 12:23

Please check if you have invalid TypeScript. There are some TypeScript errors that don't show up in the Error List, but they prevent TypeScript Compile-On-Save and show a Output generation failed message in the Visual Studio status bar.

These are the TypeScript errors that can cause this:

exporting a class which is not inside of a module (v 0.9.5).

Please let me know if there are more such errors, I'll add them here.

Cannot compile TypeScript files in Visual Studio 2012

7 Answers7

Linked