typescript - 混淆 ES6 模块语法和 Typescript 模块语法

Question

全部:

我对 ES6 和 TypeScript 都很陌生，但我现在正在同时学习和比较它们。

首先让我感到困惑的是有很多相似之处重叠，例如，在 namespace 和模块方面(如 import/from/export 等):

不知道有没有人可以给我一个简短的比较总结关于它们的用法。

我也想知道 Typescript 和 ES6 之间有没有关系？

谢谢

Answer 1

这个问题可能更适合 Programmers section StackExchange，但我们开始吧。

---

modules有两种类型在 Typescript、内部模块(命名空间)和外部模块中。后者的语法等同于ES6模块语法。

内部模块

也称为命名空间。当模块要与项目一起编译时使用内部模块，并且主要是分离问题的工具，非常类似于 C# 中 namespace 的使用。当使用 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 中的 native )加载。没有顶级模块声明，因为顶级导出或导入语句本身会指示编译器文件本身是一个模块，应该相应地进行编译。

当使用 TypeScript 编译器编译时，外部模块被包装到选定的模块语法中。目前支持ES5平台上的AMD、CommonJS、UMD、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 中，具有功能相同的结果。 p>