How to setup post build event in Visual Studio to combine multiple TypeScript files to one JavaScript file.

December 18, 2013

Hi interwebz and TypeScript users.

Just wanted to share this small idea/snippet I found on the web (the main reason to write this post was to let you skip my errors so you don’t have to find what to suffix after $(SolutionDir) and let tsc be happy with what VS is calling).

For example here : http://stackoverflow.com/questions/12926830/typescript-compiling-as-a-single-js-file

So, if you are using TypeScript and if you are wondering : “maybe I could stitch my 2-3-4 files together, that are used together in one .js file” , well that is of course possible.

Like this :

Make a post-build event, for each combined file you need to make one separate entry like this (with some sample project name and folder name here) :

tsc –out “$(SolutionDir)WebApplication1\TypeScript\Merged\two.js” “$(SolutionDir)WebApplication1\TypeScript\file1.ts” “$(SolutionDir)WebApplication1\TypeScript\file2.ts” –removeComments

Side note : Without specifying whole folder also after –out, tsc will output the combined file to bin, which is something you don’t want I presume.

And yes, you will also see errors if they happen in VS output window.

Another and maybe better take/steps would be to minify this combined .js or use Bundling and Minification built into .NET, but this is just another no code approach/tweak.

Enjoy….

AD:

I forgot to tell you about thing TypeScript added in later releases and that is , you can merge all JavaScript code to a single file in project properties here :

combined typescript js

However, I was not able to find any way to fine tweak and bind specific .ts files together so you can choose what you want in your project maybe event without any post build event. The path where VS stores the combined file is from the root of the project.

AD2: If you are using features from EcmaScript 5 in your TypeScript, than you need to pass also -t “ES5” parameter to the tsc, because otherwise build will fail. Small side note here, that ‘ES5’ doesn’t work, as they claim in help in the command line from tsc.exe itself.

AD3: You also should not forget to remove comments with –removeComments , since I presume you need this approach to minimize file size.

AD4: If you are extending some class in one of your file, you have to include this .ts file in the input files as well. (You will get exception that compiler cant find symbol – the class you inherit from, so you will know 🙂 )

Hope this helps.


Profile picture

Written by Dušan Roštár - the "mr edge case" guy
my twitter : rostacik, my linkedin : rostar, drop me an email : here