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中，功能上相同的結果。