Typescript compile to single file on save

Question

I'm using TypeScript 0.8.3 and trying to get compile on save to work.

I have mine set up just a little different but it should really work. Keep in mind it works fine when I build the project, just not on save:

Obviously the first thing: Tools > Options > Text Editor > TypeScript > Project > Compile on Save set to "Automatically compile TypeScript files which are part of the project"

Then in my .csproj file

  <PropertyGroup Condition="'$(Configuration)' == 'Debug'">
    <TypeScriptTarget>ES5</TypeScriptTarget>
    <TypeScriptSourceMap>true</TypeScriptSourceMap>
    <TypeScriptIncludeComments>true</TypeScriptIncludeComments>
    <TypeScriptGeneratesDeclarations>false</TypeScriptGeneratesDeclarations>
    <TypeScriptModuleKind>AMD</TypeScriptModuleKind>
    <TypeScriptOutFile>application.js</TypeScriptOutFile>
  </PropertyGroup>

  <PropertyGroup Condition="'$(Configuration)' == 'Release'">
    <TypeScriptTarget>ES5</TypeScriptTarget>
    <TypeScriptSourceMap>false</TypeScriptSourceMap>
    <TypeScriptIncludeComments>false</TypeScriptIncludeComments>
    <TypeScriptGeneratesDeclarations>false</TypeScriptGeneratesDeclarations>
    <TypeScriptModuleKind>AMD</TypeScriptModuleKind>
    <TypeScriptOutFile>application.js</TypeScriptOutFile>
  </PropertyGroup>

  <!-- this imports the code below from Microsoft.Typescript.targets -->
  <Import Project="$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\TypeScript\Microsoft.TypeScript.targets" />

And I changed Microsoft.TypeScript.targets as follows:

<Target Name="CompileTypeScript">
   <Message Text="Compiling TypeScript files" />
   <Message Text="Creating response file typescriptcompiler.input" />
   <WriteLinesToFile
      File="typescriptcompiler.input"
      Lines="&quot;C:\MyProject\MyProject.Web\Scripts\_references.ts&quot;" <!-- recursively gets individual file paths referenced therein -->
      Overwrite="true"
      Encoding="Unicode"/>

  <Message Text="Executing tsc $(TypeScriptBuildConfigurations) @typescriptcompiler.input" />
  <Exec Command="tsc $(TypeScriptBuildConfigurations) @typescriptcompiler.input" />
  <Delete Files="typescriptcompiler.input"/>
</Target>

And yet I still have to REBUILD the project to generate my single application.js. Saving a single file does not work.

Note: I had to change Microsoft.Typescript.targets to go around a buffer bug in the WScript library used by tsc when trying to compile too many files at once. Basically the workaround is to write to a file then pass to compiler.

Any ideas why it doesn't recompile on save?

There is this linein the Microsoft.Typescript.targets but it doesn't seem to do anything I tried removing both condition so its always true and there is still no compile on save. What is this supposed to do? :

<TypeScriptCompileOnSaveEnabled Condition="'$(TypeScriptEnableCompileOnSave)' != 'false' and '$(TypeScriptOutFile)' == ''">true</TypeScriptCompileOnSaveEnabled>

Answer 1

You can work around this current limitation of TypeScript IDE integration, enforcing the IDE to call you build target when save some files or a specific file.

Step by step:

1. In Visual Studio/Solution Explorer select a .ts file that should trigger an action when saved;

2. Click the properties panel (F4);

3. Set the "Custom Tool" property to "**MSBuild:***NameOfYourMSBuildTarget*;

4. For this example we can use the existing CompileTypeScript target, defined in the file Microsoft.TypeScript.targets, as long as this file is imported into the project file;

5. So the value of the property will be MSBuild:CompileTypeScript, as you can see in the image below:

In this example I have defined this property only in the file _references.ts, that is the one mentioned in your question. But you can specify the custom tool in any file that you wish, is up to you.

I would just suggest you to avoid specify the same custom tool in more than one file, as this will be redundant and slow down your TypeScript compilation process.

After that, every time you save this file, the action specified in the Custom Tool property will be triggered.

This setup will work regardless of your TypeScript compiler settings in Tools/Options/Text Editor/TypeScript and also independent of WebEssentials.

I hope this helps you!

Answer 2

The current implementation of Compile-On-Save does not support having an output file name specified. once you have an output file name, the feature is disabled. if you look at the .targets file there is a statement that conveys the same meaning.

<TypeScriptCompileOnSaveEnabled Condition="'$(TypeScriptEnableCompileOnSave)' != 'false' and '$(TypeScriptOutFile)' == ''">true</TypeScriptCompileOnSaveEnabled>

This is a limitation in the current implementation, and should be lifted in future versions. I have logged a bug to track this: http://typescript.codeplex.com/workitem/854