Compile-on-Save

With TypeScript 0.8.2, we've enabled the ability to compile a project when source files in the project are saved, circumventing the usual manual compile step.

For this to work, you need to enable the global setting in Tools->Options->Text Editor->TypeScript->Project. Specifically, enable "Automatically compile TypeScript files which are part of a project".

Next, you need to make sure your Visual Studio project uses the new TypeScript targets file. You can do this in one of two ways. New projects created with the TypeScript 0.8.2 release will automatically include a link to this targets file (as will the new version of the Windows 8 sample in the samples directory). For projects made with previous versions, you will need to edit the project file by right-clicking the project, selecting "Unload Project", right-clicking the project, selecting "Edit", and updating the project XML with the following:

For each TypeScript file in your project, change the build action to 'TypeScriptCompile':
<TypeScriptCompile Include="app.ts" />

Then additionally add (or replace if you had an older PreBuild action for TypeScript) the following at the end of your project file to include TypeScript compilation in your project.

For JavaScript projects (.jsproj):
<Import Project="$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\TypeScript\Microsoft.VisualStudio.$(WMSJSProject).targets" />
  <PropertyGroup Condition="'$(Configuration)' == 'Debug'">
    <TypeScriptTarget>ES5</TypeScriptTarget>
    <TypeScriptIncludeComments>true</TypeScriptIncludeComments>
    <TypeScriptSourceMap>true</TypeScriptSourceMap>
  </PropertyGroup>
  <PropertyGroup Condition="'$(Configuration)' == 'Release'">
    <TypeScriptTarget>ES5</TypeScriptTarget>
    <TypeScriptIncludeComments>false</TypeScriptIncludeComments>
    <TypeScriptSourceMap>false</TypeScriptSourceMap>
  </PropertyGroup>
  <Import Project="$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\TypeScript\Microsoft.TypeScript.targets" />

For C#-style projects (.csproj):
  <PropertyGroup Condition="'$(Configuration)' == 'Debug'">
    <TypeScriptTarget>ES5</TypeScriptTarget>
    <TypeScriptIncludeComments>true</TypeScriptIncludeComments>
    <TypeScriptSourceMap>true</TypeScriptSourceMap>
  </PropertyGroup>
  <PropertyGroup Condition="'$(Configuration)' == 'Release'">
    <TypeScriptTarget>ES5</TypeScriptTarget>
    <TypeScriptIncludeComments>false</TypeScriptIncludeComments>
    <TypeScriptSourceMap>false</TypeScriptSourceMap>
  </PropertyGroup>
  <Import Project="$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\TypeScript\Microsoft.TypeScript.targets" />

Last edited Jan 23, 2013 at 4:34 PM by LukeH, version 7

Comments

Nightking Dec 12, 2013 at 11:04 AM 
Pls add the schema settings to this post or add nvivo's comment (path) to the post. I overlooked it a few times!

DanielPamich Sep 19, 2013 at 10:10 AM 
I added the following(got it from a working TS project) to the bottom of my project file and typescript compile on save started working.

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

robertlevy Sep 15, 2013 at 7:12 PM 
@nicholasjgreen - good catch re: being startup project. I've been banging my head for hours on why things suddenly stopped working :(

tysonofyork Sep 13, 2013 at 1:22 PM 
one thing to check is your declaration files and make sure you don't have any syntax errors in them. I was stuck on this error because I had a declaration file using bool instead of boolean.

nicholasjgreen Sep 12, 2013 at 10:33 PM 
Something I think I've just stumbled on is that the "Compile on Save" functionality only seems to work if your Web project is marked as the Startup project.

I've been working on an Azure project so the Azure cloud service had been set as the startup and the TS files were not compiling on save. When I did "Set as startup project" on my web project in the solution my TS files then started compiling when I saved them.

Anyway, I hope this helps anyone else who is having problems with it

kainazzzo Sep 11, 2013 at 7:08 PM 
Ok... what I was referring to was the fact that new projects don't work out of the box. One might expect this of a quality framework. The above instructions work for me, though I am not sure how publishing is going to work seeing as how the files are not in the project.

kainazzzo Sep 11, 2013 at 7:03 PM 
I just installed typescript 0.9.1.1 today and this is not working for me for new projects at all.

nvivo Sep 11, 2013 at 12:59 PM 
Works for 0.9.1.1. For those wondering which settings can be applied, just open the targets file, usually on C:\Program Files (x86)\MSBuild\Microsoft\VisualStudio\v11.0\TypeScript

MartinFr Sep 1, 2013 at 10:10 PM 
For me, new projects are not automatically created with the correct settings as shown here.

PulsarBlow Aug 29, 2013 at 9:55 PM 
This procedure is still up to date and works perfectly with release 0.9.1.1

Ata_S Aug 27, 2013 at 3:30 PM 
Did exactly as suggested. All .ts files set to TypeScriptCompile. I get this:
"...\Microsoft.TypeScript.targets(71,5): error MSB6006: "tsc.exe" exited with code 1."
At 71st line the <VsTsc is opening in that file. Any suggestions?

MovGP0 Jul 31, 2013 at 10:34 AM 
how does it work in "web site" projects, when no solution file is available?

middlewest Apr 24, 2013 at 8:14 PM 
this feature doesn't work in 0.9 anymore

coolmuse Feb 7, 2013 at 9:05 PM 
I found that my project has too many .ts files to be properly processed on the tsc command line. I replaced the <Target Name="CompileTypeScript"> in Microsoft.TypeScript.targets to use a response file:

<Target Name="CompileTypeScript">
<Message Text="Compiling TypeScript files" />
<Message Text="Creating response file tscompile.rsp" />
<WriteLinesToFile File="tscompile.rsp" Lines="@(TypeScriptCompile)" Overwrite="true" />
<Message Text="Executing tsc $(TypeScriptBuildConfigurations) @tscompile.rsp" />
<Exec Command="tsc $(TypeScriptBuildConfigurations) @tscompile.rsp" />
<Delete Files="tscompile.rsp" />
</Target>

xmehaut Jan 31, 2013 at 1:39 PM 
hello,
which directive to compile everything into a single file (--out)?
best regards
Xavier

muzza Jan 22, 2013 at 9:41 PM 
typo "Automatically compile TypeScript files which care part of a project"