模块合并 - 它是如何工作的？答案

【问题标题】：Module merging - how it works?模块合并 - 它是如何工作的？
【发布时间】：2015-09-16 21:23:01
【问题描述】：

我创建了简单的打字稿文件 - playground link。

module Animals {
    export class Zebra { }
}
module Animals {
    export interface Legged { numberOfLegs: number; }
    export class Dog { }
}

在我看来，它相当于：

module Animals {
    export class Zebra { }
    export interface Legged { numberOfLegs: number; }
    export class Dog { }
}

并且应该生成：

var Animals;
(function (Animals) {
    var Zebra = (function () {
        function Zebra() {
        }
        return Zebra;
    })();
    Animals.Zebra = Zebra;
    var Dog = (function () {
        function Dog() {
        }
        return Dog;
    })();
    Animals.Dog = Dog;
})(Animals || (Animals = {}));

但在 Playground 中，您可以看到它生成了两个 Animals 变量，即将其视为单独的命名空间。

正确吗？根据handbook应该合并...

编辑

根据定义文件 (d.ts) 的旁注 - 当我使用 --declaration 开关运行 tsc 时，会生成以下定义。模块动物包括两次。这是对的吗？

declare module Animals {
    class Zebra {
    }
}
declare module Animals {
    interface Legged {
        numberOfLegs: number;
    }
    class Dog {
    }
}

【问题讨论】：

标签： javascript typescript

【解决方案1】：

但在 Playground 中，您可以看到它生成了两个 Animals 变量，即将其视为单独的命名空间。

它确实生成了两个变量（请参阅“为什么生成两个函数而不是一个”link 了解原因）。然而，它仍然是一个单一命名空间（注意Animals || (Animals = {} 表示如果可用，它会继承之前的值）。

根据手册应该合并

它们被合并了。生成的代码确保（使用Animals || (Animals = {}）Animals 从第一个模块声明继续。手册没有说明它如何管理这种合并 (this does)。

【讨论】：

看来我误解了模块合并的工作原理。但这对我来说仍然很奇怪。如果我在一个模块中有 100 多个文件，那么变量将重复 100 次怎么办？
另外，当我尝试从我的所有文件中生成定义时，单个 d.ts 文件包含多个具有相同名称的模块，并且 VSCode 指出这是一个错误
好的，关闭问题。此外，@basarat 感谢您在打字稿方面所做的工作

【解决方案2】：

虽然 typescript 编译器会合并这两个模块的类型，但这些类型在编译后的 javascript 中不再存在（从类型安全的角度来看）。在 javasript 中，只有模块的实现很重要，所以实现的合并发生在运行时。

两个var Animals 声明不冲突，每个向Animals 模块添加成员的函数都使用(Animals || (Animals = {}) 调用。这将使用Animals 变量的当前值，或者将Animals 设置为一个新的空对象，然后使用它。

这发生在运行时这一事实很重要，因为它允许您扩展在您正在处理的文件之外创建的对象。例如，您可以使用相同的语法扩展内置对象。查看 this playground example 了解它如何与内置对象进行合并。

【讨论】：