Question

I’m working on TypeScript files with Visual Studio 2012 Express for Web. Since the Web Essentials addon doesn’t work with Express editions, and rebuilding the entire project every time I update a script is starting to take too long, I was hoping to convert the following build event (from the TypeScript project template) into an ‘External Tools’ command that I can place on my toolbar.

<Target Name="BeforeBuild">
  <Message Text="Compiling TypeScript files" />
  <Message Text="Executing tsc$(TypeScriptSourceMap) @(TypeScriptCompile ->'&quot;%(fullpath)&quot;', ' ')" />
  <Exec Command="tsc$(TypeScriptSourceMap) @(TypeScriptCompile ->'&quot;%(fullpath)&quot;', ' ')" />
</Target>

Unfortunately… this has kinda lost me. I can’t find any documentation on $(TypeScriptSourceMap), nor the @() and %() macros. It doesn’t seem to appreciate me copying the command directly either. (Even after converting the HTML entities.)

What could I enter into the External Tools dialog in order to mimic this build event?

I’ll try to write a PS script or some such as a workaround, but this would lack the functionality of only working on files with the ‘TypeScriptCompile’ build action.

Answer 1

$(TypeScriptSourceMap) comes from about 4 lines earlier in the project file. It’s simply " --sourcemap" when in the debug configuration and "" otherwise.

The @() syntax here basically means “For every project item whose build action is TypeScriptCompile, put its full path in double-quotes and join those resulting items by a space.

An emerging best practice for TypeScript projects is to have a “project.ts” file that looks like this:

project.ts

/// <reference path="file1.ts" />
/// <reference path="file2.ts" />
/// ... and so on

file1.ts

/// <reference path="project.ts" />

class alpha { ... }

file2.ts

/// <reference path="project.ts" />

class beta { ... }

With that setup, you can simply run tsc project.ts or tsc project.ts --out app.ts and the right thing will happen.