TypeScript编译模块在自动调用函数之前声明var

Question

我正在将现有的AngularJS（1.x）项目移植到TypeScript，到目前为止代码正在运行，但我想知道为什么会发生这种情况。

在JavaScript中我声明一个这样的模块：

(function() {
    'use strict';
    angular.module('myModule', []);
})();

在这样的Typescript中：

module myModule {
    'use strict';
    angular.module('myModule', []);
}

编译到这个：

var myModule;
(function (myModule) {
    "use strict";
    angular.module("myModule", []);
})(myModule || (myModule = {}));

我几乎没有怀疑：

1. 添加到全局范围var myModule是不是错了？
2. 为什么myModule被传递给匿名函数？
3. 由于添加了var myModule ，我想知道是否应该避免覆盖。 我将模块声明与控制器分开。 我想知道，当我声明控制器时，我应该使用不同的module名称吗？

换句话说，我可以为第二个模块重用相同的名称，就像这样

module myModule {
    angular
      .module('myModule')
      .controller('myController');
}
// which will "overwrite" the preexisting var myModule

或者更好的是为模块使用另一个名称，如下所示：

module myModuleController {
    angular
      .module('myModule')
      .controller('myController');
}
// which will generate another var myModule

我已经看到代码同样正常，但我确信在这件事上我应该知道某些事情。

Answer 1

它正在这样做，因此您将能够从其他地方访问此模块，例如：

module ModuleA {
    export var num = 4;
}

module ModuleB {
    export function log() {
        console.log(ModuleA.num);
    } 
}

然后，您还可以向同一模块添加更多内容：

module ModuleA {
    export var num = 4;
}

module ModuleA {
    export var str = "string";
}

console.log(ModuleA.num); // 4
console.log(ModuleA.str); // string

在您的示例中编译的js正在传递myModule ，以便新的定义将添加到现有模块（如果有），或者{}如果没有。
我（第二）示例中编译的js是：

var ModuleA;
(function (ModuleA) {
    ModuleA.num = 4;
})(ModuleA || (ModuleA = {}));
var ModuleA;
(function (ModuleA) {
    ModuleA.str = "string";
})(ModuleA || (ModuleA = {}));

正如您在第二次看到的那样， ModuleA不会为空，因此添加str变量将在之前定义的模块上完成。

请注意，只有在不使用模块系统时才会出现此行为，例如：

export module ModuleA {
    export var num = 4;
}

编译成：

define(["require", "exports"], function (require, exports) {
    "use strict";
    var ModuleA;
    (function (ModuleA) {
        ModuleA.num = 4;
    })(ModuleA = exports.ModuleA || (exports.ModuleA = {}));
});

（使用默认模块系统）