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>

jfoliveira jfoliveira · Accepted Answer · 2013-05-21T00:44:59

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:

In Visual Studio/Solution Explorer select a .ts file that should trigger an action when saved;
Click the properties panel (F4);
Set the "Custom Tool" property to "**MSBuild:***NameOfYourMSBuildTarget*;
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;
So the value of the property will be MSBuild:CompileTypeScript, as you can see in the image below:

enter image description here

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!

Typescript compile to single file on save

2 Answers