Typescript module as namespace

Question

If I have one file with two types in two different namespaces. The generated order matters.

export module Shapes {

    export module Weird{
        export class weirdshape extends Normal.normalshape{
            public x = 3;
        }
    }
    export module Normal{
        export class normalshape {
            public y = 4;
        }
    }
}

This will generate

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 __();
};
define(["require", "exports"], function(require, exports) {
    (function (Shapes) {
        (function (Weird) {
            var weirdshape = (function (_super) {
                __extends(weirdshape, _super);
                function weirdshape() {
                    _super.apply(this, arguments);
                    this.x = 3;
                }
                return weirdshape;
            })(Normal.normalshape);
            Weird.weirdshape = weirdshape;
        })(Shapes.Weird || (Shapes.Weird = {}));
        var Weird = Shapes.Weird;
        (function (Normal) {
            var normalshape = (function () {
                function normalshape() {
                    this.y = 4;
                }
                return normalshape;
            })();
            Normal.normalshape = normalshape;
        })(Shapes.Normal || (Shapes.Normal = {}));
        var Normal = Shapes.Normal;
    })(exports.Shapes || (exports.Shapes = {}));
    var Shapes = exports.Shapes;
});

In this order this will fail. Because the Shapes.Normal.normalshape has not yet been defined.

Is there a proper way to do this in typescript where modules can be used as proper namespaces?

I believe TypeScript tries to be as close to JavaScript as possible, which means that code which is supposed to crash under normal JavaScript (i.e. your code above) will continue to crash in TypeScript instead of having TypeScript introduce some non-JavaScript-like behavior. It really is all about adding strong typing and other ES6 features, but does not do any flow control analysis. — Stephen Chung
– Stephen Chung, Commented Jul 28, 2013 at 14:28
For your situation, it is much better to separate the two classes into separate modules and use a module loader. Module loaders are invented exactly to solve your problem. — Stephen Chung
– Stephen Chung, Commented Jul 28, 2013 at 14:30

Fenton · Accepted Answer · 2013-07-29 08:35:44Z

So if the question is "how do I make this code run", the answer is to do this:

export module Shapes {
    export module Normal{
        export class normalshape {
            public y = 4;
        }
    }

    export module Weird{
        export class weirdshape extends Normal.normalshape{
            public x = 3;
        }
    }
}

This isn't really a limitation of TypeScript - it is a limitation of JavaScript. If you use something before it is declared, you get problems.

You could argue that TypeScript should sort out the order for you, given it could work out the dependency. In actual fact, it will do this if you have separate files. For example, if Normal is in Normal.ts and Weird is in Weird.ts, the generated output will be ordered correctly for you.

Complete example:

Weird.ts

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

module Shapes {
    export module Weird {
        export class weirdshape extends Shapes.Normal.normalshape {
            public x = 3;
        }
    }
}

Normal.ts

module Shapes {
    export module Normal {
        export class normalshape {
            public y = 4;
        }
    }
}

app.ts

/// <reference path="Weird.ts" />
/// <reference path="Normal.ts" />

var weird = new Shapes.Weird.weirdshape();

Compiled using --out final.js - resulting final.js:

var Shapes;
(function (Shapes) {
    (function (Normal) {
        var normalshape = (function () {
            function normalshape() {
                this.y = 4;
            }
            return normalshape;
        })();
        Normal.normalshape = normalshape;
    })(Shapes.Normal || (Shapes.Normal = {}));
    var Normal = Shapes.Normal;
})(Shapes || (Shapes = {}));
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 Shapes;
(function (Shapes) {
    (function (Weird) {
        var weirdshape = (function (_super) {
            __extends(weirdshape, _super);
            function weirdshape() {
                _super.apply(this, arguments);
                this.x = 3;
            }
            return weirdshape;
        })(Shapes.Normal.normalshape);
        Weird.weirdshape = weirdshape;
    })(Shapes.Weird || (Shapes.Weird = {}));
    var Weird = Shapes.Weird;
})(Shapes || (Shapes = {}));
var weird = new Shapes.Weird.weirdshape();

Collectives™ on Stack Overflow

Typescript module as namespace

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related