ES6模块语法和Typescript模块语法之间的混淆

Question

所有：

我对ES6和TypeScript还是很陌生，但是现在我正在并行学习和比较它们。

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

我想知道是否有人可以给我关于它们的用法的简短比较摘要 。

我也想知道Typescript和ES6之间是否存在关系 ？

谢谢

Answer 1

这个问题可能更适合StackExchange的“ 程序员”部分 ，但在这里开始。

---

Typescript中有两种类型的模块 ，内部模块（命名空间）和外部模块。 后者的语法等效于ES6模块的语法。

内部模块

也称为名称空间。 内部模块用于在项目中编译模块时使用，它主要是用于解决分离问题的工具，这与C＃中使用命名空间非常相似。 使用TypeScript编译器进行编译时，内部模块将放入闭包中（通过自调用函数）。

我的应用程式

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，或在本地ES6 RequireJS）在运行时间期间。 没有顶层模块声明，因为顶层导出或导入语句本身将指示编译器该文件本身是一个模块，应相应地进行编译。

使用TypeScript编译器进行编译时，外部模块将包装到选定的模块语法中。 当前支持的是ES5平台上的AMD，CommonJS，UMD，System，以及ES6平台上的本机语法。

我的应用程式

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中，并在功能上完全相同 。