Customizing the specific output files for various Typescript input files - visual-studio-2012

Question

I've got a web project using TypeScript that has some reasonably complex requirements for the compiled output files. So for instance, I need all the *.ts files in one directory to compile down to one single .js file, and all the *.ts files in another directory to compile down to a different .js file. (It's more complex than that, but you get the idea.)
I've been able to get this working using the tsc.exe command-line, using input files and what-not, but I'd like to be able to use MSBuild .targets files - among other things, using tsc.exe from the command-line seems to be pretty poorly supported on continuous integration servers, where it can be located who-knows-where, and certainly isn't likely to be in the path.
According to this answer here, it seems like I should be able to do this using custom build targets. So I've created a custom version of Microsoft.TypeScript.targets, and in addition to the default "CompileTypeScript" target, I've created a second one, "PayboardApiV10", so that the relevant part looks like so:
<Target Name="CompileTypeScript" Condition="'$(BuildingProject)' != 'false'">
<Message Text="Compiling TypeScript files normally" Importance="high"/>
<VsTsc
ToolPath="$(TscToolPath)"
ToolExe="$(TscToolExe)"
Configurations="$(TypeScriptBuildConfigurations)"
FullPathsToFiles="#(TypeScriptCompile)"
YieldDuringToolExecution="$(TscYieldDuringToolExecution)"
OutFile="$(TypeScriptOutFile)"
OutDir="$(TypeScriptOutDir)"
>
<Output TaskParameter="GeneratedJavascript" ItemName="GeneratedJavascript" />
</VsTsc>
</Target>
<Target Name="PayboardApiV10" Condition="'$(BuildingProject)' != 'false'">
<Message Text="Compiling TypeScript files for Payboard API v1.0" Importance="high" />
<VsTsc
ToolPath="$(TscToolPath)"
ToolExe="$(TscToolExe)"
Configurations="$(TypeScriptBuildConfigurations)"
FullPathsToFiles="#(TypeScriptCompile)"
YieldDuringToolExecution="$(TscYieldDuringToolExecution)"
OutFile="Payboard.js"
OutDir="$(ProjectDir)api\v1.0\"
>
<Output TaskParameter="GeneratedJavascript" ItemName="GeneratedJavascript" />
</VsTsc>
</Target>
And then I've specified a "CustomTool" in my project configuration for the specific files that I'd like to get picked up by the "PayboardApiV10" build target, like so:
I should note that I have no idea if I'm doing this bit correctly. I can't seem to find any documentation on it, and the only examples I've been able to find are from that previous answer. And more to the point, when I run my builds, all the TS files in my project get caught up in the first build target, including the ones for which I've specified "MSBuild:PayboardApiV10" for the custom tool. The "PayboardApiV10" tool never seems to get run, i.e., I never see the message "Compiling TypeScript files for Payboard API v1.0".
So two questions:
(1) Is there a better way to do what I'm trying to do?
(2) If this is generally the right way to do it, any ideas as to what I'm doing wrong?

Answer 1

The direction you're going is the optimal way (on save). In the meantime you can use post-build events to transform the typescript. Right click on your project and select properties. Select Build Events and in the Post-Build area you can specify command line parameters to use tsc.exe.
On the direction you're going (compile on save) I think the project file may be missing the following on each file you want compiled:
<TypeScriptCompile Include="app.ts" />
The configuration is also likely missing the environment settings.
<PropertyGroup Condition="'$(Configuration)' == 'Debug'">
<TypeScriptTarget>ES5</TypeScriptTarget>
<TypeScriptIncludeComments>true</TypeScriptIncludeComments>
<TypeScriptSourceMap>true</TypeScriptSourceMap>
</PropertyGroup>
More information on both methods is available at this TypeScript wiki page.

Answer 2

I ended up asking this same question over on the TypeScript forums (https://typescript.codeplex.com/discussions/455781). The conclusions I drew from the conversation there:
There isn't a great way to do it now.
The best hacky way to do it now is probably the way that I was doing it, namely, with batch files, post-build events, and checking the compiled files into source. Other folks recommended Grunt, or the ASP.NET MVC bundling mechanism (the latter won't work in my scenario); I've also used the r.js minifier in the past. And these will work; but to reiterate, none of these are really very good solutions.
The best way to do it in the future will be to create "library projects" of TypeScript files, so that all TS files in a given project get compiled together; and then you can reference the library TS projects from your main Web project, and will automatically get the compiled files merged into your main ~/Scripts folder. But that will require support from the TS team - which Jon Turner basically indicated would be coming, though he didn't say when. (See also https://typescript.codeplex.com/workitem/571.)