混淆 ES6 模块语法和 TypeScript 模块语法

Question

大家好：

我对ES6和TypeScript都比较新，但现在正在学习并进行比较。

首先让我感到困惑的是它们之间存在很多相似重叠之处，例如命名空间和模块方面（如import/from/export等）：

我想知道有没有人能够给我简短的比较总结，介绍它们的用法。

我还想知道TypeScript和ES6之间是否有关系？

谢谢

- Kuan

---

@JohnWhite 谢谢，首先需要澄清的是，你所说的所有概念都是指 TypeScript 而不是 ES6，对吗？ - Kuan

@JohnWhite 非常感谢。最好能提供一个关于如何学习它们的路线图。 - Kuan

Answer 1

这个问题可能更适合在StackExchange的程序员版块提问，但我们还是来解答吧。

---

在TypeScript中，有两种模块，分别是内部模块（命名空间）和外部模块。后者的语法等同于ES6模块的语法。

内部模块

也称为命名空间。当模块需要与项目一起编译时，使用内部模块，主要用于分离关注点，类似于C#中使用命名空间。在TypeScript编译器编译时，内部模块被放到闭包中（通过自执行函数实现）。

MyApp.ts

namespace MyApp {
    export class MyClass { }
}

...当编译成ES5时，就会变成以下可怕的东西：

MyApp.js

// ES5 compatible
var MyApp;
(function (MyApp) {
    var MyClass = (function () {
        function MyClass() { }
        return MyClass;
    })();
    MyApp.MyClass = MyClass;
})(MyApp || (MyApp = {}));

编译成ES6后，代码会变得更简洁，因为有类的本地语法支持：

MyApp.js

// ES6 compatible
var MyApp;
(function (MyApp) {
    class MyClass { }
    MyApp.MyClass = MyClass;
})(MyApp || (MyApp = {}));

当你将整个代码库编译为单个输出文件时，内部模块特别有用。

---

外部模块

外部模块是单独编译的（每个文件），需要在运行时使用模块加载系统（如ES5中的RequireJS或ES6中的本地方式）进行加载。没有顶级模块声明，因为顶级导出或导入语句本身将指示编译器该文件本身是一个模块，并应相应地进行编译。

TypeScript编译器编译外部模块时，会将其包装成所选的模块语法。目前支持的有AMD、CommonJS、UMD、ES5平台上的System和ES6平台上的本地语法。

MyApp.ts

export class MyClass { }

当编译成ES5时，比如使用UMD，它会变成以下的亵渎：

MyApp.js

// ES5 compatible
(function (deps, factory) {
    if (typeof module === 'object' && typeof module.exports === 'object') {
        var v = factory(require, exports); if (v !== undefined) module.exports = v;
    } else if (typeof define === 'function' && define.amd) {
        define(deps, factory);
    }
})(["require", "exports"], function (require, exports) {
    var MyClass = (function () {
        function MyClass() { }
        return MyClass;
    })();
    exports.MyClass = MyClass;
});

当编译成ES6时，由于TypeScript模块语法基于（等同于）ES6模块语法，因此生成的代码变得非常干净。

MyApp.js

// ES6 compatible
export class MyClass { }

然而，ES6平台目前还没有得到广泛支持，因此我建议使用ES5编译。这将带来额外生成的样板代码的开销，但除了略微增加的带宽外，没有其他副作用：相同的代码库可以编译成ES5和ES6，功能上是完全相同的结果。

- John Weisz

---

谢谢，所以这都是关于TypeScript而不是ES6，对吗？ - Kuan

@Kuan 我对我的答案进行了广泛的编辑，因为我犯了一些错误（现在对我来说更清楚了，哈哈）。 - John Weisz

我喜欢包含像“可恶”和“亵渎”这样的适当术语。它确实让我发笑了。 - StorymasterQ