Cannot compile TypeScript files in Visual Studio 2012

14
votes

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:

  1. Using TypeScript in cshtml files
  2. Visual Studio TypeScript Options
  3. Debugging TypeScript code with Visual Studio
  4. Cannot compile typescript using tsc node module
  5. TypeScript - Visual Studio - d3
  6. Visual Studio 2012 TypeScript project ignoring two files during compile
  7. TypeScript / Visual Studio 2012 / Compilation parameters
  8. Using TypeScript in an existing Visual Studio Web Site project
  9. Visual Studio TypeScript Options
  10. Compile generated files in Visual Studio

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.

7
c#javascriptvisual-studiovisual-studio-2012typescript
Can you create TypeScript projects in Visual Studio? Does it appear as an option when creating a new project? - Matt Burland
@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
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
I also have the same issue :( - Nikos
@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. 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

7 Answers

11
votes

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" />
5
votes

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

4
votes

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.

1
votes

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.

1
votes

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

0
votes

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

0
votes

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.