--out not respecting variable order


I have file controllers.ts :
var controllers = angular.module('controllers',[])
and another main.ts:
var app = angular.module('demoApp',[controllers.name]);
The generated javascript with --out parameter come out as :
var app = angular.module('demoApp', [controller.name]);
var controllers = angular.module('controllers', [])
I think it should be :
var controllers = angular.module('controllers', []);
var app = angular.module('demoApp', [controller.name]);
The same way classes / modules are automatically ordered by typescript.

Tested in
Closed Jul 15, 2013 at 4:46 PM by RyanCavanaugh
TypeScript doesn't re-order anything based on semantics. The output is ordered according to the order you passed them on the command line, plus ordering according to dependencies inferred from reference tags.


basarat wrote Jul 14, 2013 at 7:51 AM

Similarly if I have a module definition split between files a:
module Directives{
    export var mod =  angular.module('directives', []);        
and b:
module Directives {
    export function progressbarDirective(){       
    mod.directive('progressbar', progressbarDirective);
Typescript does not ensure that the compiled js for a is before b

basarat wrote Jul 14, 2013 at 8:25 AM

Update: Having an explicit /// <reference to the file you want js-compiled before your file seems to do the trick. Is this behaviour planned or a lucky coincidence?

basarat wrote Jul 14, 2013 at 8:28 AM

lucky coincidence. /// <reference ordering does not force the generated js order.

basarat wrote Jul 15, 2013 at 11:26 PM

You are right and I am surprised, if I have a.ts:
class A{}
and b.ts:
class B extends A{}
The following command line:
tsc b.ts a.ts --out out.js
Generates incorrect JS and doesn't give any compiler errors
var __extends = this.__extends || function (d, b) {
    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
    function __() { this.constructor = d; }
    __.prototype = b.prototype;
    d.prototype = new __();
var B = (function (_super) {
    __extends(B, _super);
    function B() {
        _super.apply(this, arguments);
    return B;
var A = (function () {
    function A() {
    return A;

PSP2 wrote Aug 26, 2013 at 2:47 PM

It is a pity that this is being closed as feature.

In the manual ( there multiple lines that suggest otherwise:

Chapter 11.1
When a TypeScript program is compiled, all of the program’s source files are processed together. Statements and declarations in different source files can depend on each other, possibly in a circular
"Implementation .. source files ... form the single global module."
Chapter 11.1.1
"The TypeScript compiler automatically determines a source file’s dependencies and includes those
dependencies in the program being compiled."

This causes a lot of source file re-ordering headache and SHOULD definitiely be fixed in the compiler.

basarat wrote Aug 26, 2013 at 4:08 PM

Since I raised this issue, I have come to agree with the compiler's implementation. Although I agree that the documentation is a bit misleading. Perhaps a single sentence about "does not do symantic ordering" or "orders by the order the files are provided to the compiler + reference comments" would be useful.

@PSP2 I am actually using grunt to order my files and avoid any headaches : https://github.com/basarat/grunt-ts#javascript-generation-and-ordering

PSP2 wrote Aug 27, 2013 at 5:50 AM

@basarat Very nice. Does your grunt plugin do actual dependency tree analysis or just simply concatenate every file as <reference>? (Where can we continue this discussion?)

basarat wrote Aug 27, 2013 at 6:18 AM

@PSP2 simply concatenates each file in the order specified by reference.ts.

Actually its the typescript compiler that does this. If you pass tsc it just one file that contains just a bunch of ///<reference comments and also pass in the --out argument, it will generate one js file whose contents are merged + ordered ( by the reference comments ).

Questions welcome here : https://github.com/basarat/grunt-ts/issues?state=open