14

When I add a new TypeScript file to my solution, the system nicely gives me a (prefilled) .ts file with the .js file just below. This configuration makes me think that the conversion from TypeScript to JavaScript is automatic. This assumption is strengthened by the fact that the .ts file has a Build Action 'TypeScriptCompile'. However, regardless of what I do (save a changed ts, compile the project ...), nothing really happens.

I know I can add prebuild steps to the project but I would really like the TypeScriptCompile build action to automatically kick in so that I just need to save the file for the .js file to be regenerated. What do I need to do to make 'TypeScriptCompile' from working as expected/desired ?

2
  • What build event do you currently have?
    – Fenton
    Oct 2, 2012 at 10:07
  • I also had the same issue auto-compiling my sources into javascript. I wrote a little app that takes care of this for you: onthefly.codeplex.com - Just click a button whenever you want to compile and it's done.
    – Arrow
    Oct 26, 2012 at 10:16

5 Answers 5

9

I had the same problem when trying to use TypeScript in an MVC4 project, but resolved the problem!

Put the following lines into your project file using your favorite text editor. There is a commented out BeforeBuild section usually already there at the end of the proj file, which you can replace with these lines. Reload the project and you are good to go. The .js files will now be generated during compilation.

<Target Name="BeforeBuild">
  <Exec Command="&quot;$(PROGRAMFILES)\Microsoft SDKs\TypeScript\0.8.0.0\tsc&quot; @(TypeScriptCompile ->'&quot;%(fullpath)&quot;', ' ')" />
</Target>

Have a good look at the exact path though, it may differ (e.g. if you have a different version of the Typescript SDK). Similarly, if tsc.exe is already in your PATH environment variable, you can use a version-agnostic command:

<Target Name="BeforeBuild">
  <Exec Command="&quot;tsc&quot; @(TypeScriptCompile ->'&quot;%(fullpath)&quot;', ' ')" />
</Target>

Finally, as noted in the comments, you might want to add -c to preserve comments to the command line. This allows tools like cassette & asp.net's resource bundling to retrieve the references and render things in the correct order.

7
  • 2
    You'll probably want to add -c to preserve comments to the command line. This allows tools like cassette & asp.net's resource bundling to retrieve the references and render things in the correct order
    – eoleary
    Oct 2, 2012 at 18:25
  • I can't get this to work, what is TypeScriptCompile, is that supposed to be a filename? (reading the tsc help), only way I get it to work is if I add my app.ts file name explicitly
    – joeriks
    Oct 2, 2012 at 19:22
  • From the question title, seems TypeScriptCompile is a build action. Oct 2, 2012 at 19:31
  • 1
    If you install the TypeScript Visual Studio Extension then you will get a project template named "HTML Application with TypeScript". Within that project file, you will find the lines I posted above. And they work fine for me at least.
    – Per Brage
    Oct 3, 2012 at 6:14
  • Also note that you may have to change the tsc command path to reflect its location on your system. Mine (from default installation for VS2012 c. 02/2013) is at 'C:\Program Files (x86)\Microsoft SDKs\TypeScript\tsc'. If your path to tsc is incorrect, the tsc compile command will exit with error code 3
    – dpb
    Mar 15, 2013 at 15:46
1

If you still have problems compiling typescript files, you might want to check out an app I just released. You can compile the files with just 1 click of a button.

1
  • Thanks for this, I did adjust it to process directories recursively and wait for the tsc.exe process to complete before starting the next.
    – Jesse
    Dec 5, 2013 at 13:05
0

A few people have had this issue, including myself. The fix is to manually install the typescript visual studio extension.

The installer is here:

"C:\Program Files (x86)\Microsoft SDKs\TypeScript\0.8.0.0\TypeScriptLanguageService.vsix"

or here on x86 machines:

"C:\Program Files\Microsoft SDKs\TypeScript\0.8.0.0\TypeScriptLanguageService.vsix"

0

Ok, I have reinstalled everything, including the vsix file. Apparently when I "run" my project now, the .ts file is automatically converted into a .js file (without custom build actions). That's ok for now. It would have been better if these files follow other code generators in that they compile when the source file gets saved. I would write my own SingleFileGenerator implementation for it but I do not yet know how to call the .js from c#.

1
  • 1
    But that's not what you wanted -> you complained that "When I set Build Action to compile, and do a build, it doesn't get compiled".. Then you fixed it, so now you're saying when you build it DOES get compiled, but you're now complaining that "when I SAVE the file it doesn't get compiled" .. Yes, because it's "Build" that causes the compile, not "Save" ?!
    – Caius Jard
    Mar 21, 2017 at 10:07
0

If you use Visual Studio 2013 with latest TypeScript 1.5, you may need to install TypeScript tools for Visual Studio. I also recommed to install Web Essentials which will invoke .ts script file compilation on save (besides many more other useful features).

Then follow the steps Visual Studio makes for new web projects in .csproj file.

1) Import MSBuild TypeScript properties by adding following element under root Project element:

<Import Project="$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\TypeScript\Microsoft.TypeScript.Default.props" Condition="Exists('$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\TypeScript\Microsoft.TypeScript.Default.props')" />

2) Import MSBuild TypeScript build target

<Import Project="$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\TypeScript\Microsoft.TypeScript.targets" Condition="Exists('$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\TypeScript\Microsoft.TypeScript.targets')" />

3) Configure target TypeScript version under Project/PropertyGroup element

<TypeScriptToolsVersion>1.5</TypeScriptToolsVersion> 

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.