Typescript 模块作为命名空间

Question

如果我在两个不同的命名空间中有一个包含两种类型的文件。生成的顺序很重要。

export module Shapes {

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

这会产生

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;
});

按照这个顺序，这将失败。因为尚未定义 Shapes.Normal.normalshape。

在 typescript 中是否有适当的方法可以将模块用作适当的命名空间？

Answer 1

所以如果问题是“我如何让这段代码运行”，答案是这样做:

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

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

这并不是 TypeScript 的真正限制——它是 JavaScript 的限制。如果在声明之前使用某些东西，就会出现问题。

你可能会争辩说 TypeScript 应该为你整理顺序，因为它可以解决依赖关系。实际上，如果您有单独的文件，它就会这样做。例如，如果 Normal 在 Normal.ts 中，而 Weird 在 Weird.ts 中，则生成的输出将为您正确订购。

完整示例:

奇怪的.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();

使用 --out final.js 编译 - 生成的 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();