Typescript: compile to more than one .js file in Visual Studio 2013

Question

I have some projects with large code base written in TypeScript. For several reasons, I would like to compile some .ts files of the same project into few .js files. I cannot find a way to do it, but only the 2 well-known project settings: compile each .ts file into one .js file, and compile all .ts files into a single .js file.

As an example, let's say I have A.ts, B.ts, C.ts, D.ts and want to produce ABC.js and CD.js

Is there a way to do this with VS 2013 or any add-in tool?

Answer 1

Not possible with a visual studio option or an existing add-in. You can do this however externally using something like grunt : https://github.com/TypeStrong/grunt-ts having 2 seperate build targets.

Answer 2

I struggled with it long time. My solution is to delete all your

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

form your files (that way all typescript files in project can see each other).

Then enable option to compile each typescript separately. Next use grunt-concat (unfortunately you must provide order of your folders for this to work) and concat each js file from your module file into one.

You can use grunt watch to concat each module if file changes so you don't have to compile all of your project never any more :)

Also Visual Studio Typescript Tools will display any errors in directly in Visual Studio Error List.

My example grunt configuration:

 module.exports = function (grunt) { grunt.initConfig({ concat: { options: { separator: '\\n', }, app: { src: [ 'Src/Application/Modules/**/*.js', 'Src/Application/Config/*.js', 'Src/Application/*.js' ], dest: 'Scripts/App/App.js' }, ui: { src: ['Src/UI/**/*.js'], dest: 'Scripts/App/UI.js' } }, watch: { app: { files: ['Src/Application/**/*.js'], tasks: ['concat:app'], options: { nospawn: true } }, ui: { files: ['Src/UI/**/*.js'], tasks: ['concat:ui'], options: { nospawn: true } } } }); grunt.loadNpmTasks('grunt-contrib-concat'); grunt.loadNpmTasks('grunt-contrib-watch'); }; 

Reffering to basarat response I like to point out that if you use grunt-ts you must provide references in your files and that references will be automatically resolve . That means if your module A have a reference to files in module B that files will be included in your out file A.js

Answer 3

here is how i did it

1) create a _references.ts in your project root folder 
2) include references of your ts files in the order you want compilation by the ///<reference syntax
3) go to your typescript project properties -> typescript build option and check the combine javascript output file and mention the file name 
4) done