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