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

Question

全部：

我对ES6和TypeScript都很新，但我现在正在学习和比较它们。

的第一件事混淆了我这么多，是有很多的相似性重叠，例如，在命名空间和模块方面（如进口/从/导出ETCS）：

我不知道是否有人能够给我关于它们的使用的简要比较摘要。

我还想知道Typescript和ES6之间是否存在？

感谢

Answer 1

这个问题可能是更适合StackExchange的Programmers section，但在这里我们去。

---

有两种类型的在打字稿modules，内部模块（命名空间）和外部模块。后者的语法等同于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编译器进行编译时，外部模块将被封装到选定的模块语法中。目前支持的是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时，生成的代码b ecomes无限清洁剂，因为打字稿模块的语法是基于（相当于）的ES6模块语法：

MyApp.js

// ES6 compatible 
export class MyClass { } 

然而，ES6平台没有被广泛尚不支持，所以我建议使用ES5编译。这带来了额外产生的样板代码的费用，但是除了边缘增加的带宽之外，没有附加的副作用：相同的代码库可以被编译到ES5和ES6中，功能上相同的结果。