【TypeScript 演化史 -- 5】將 async/await 編譯到 ES3/ES5 (外部幫助庫)

時間  2019-11-26
標籤 typescript 演化 async await 編譯 es3 es5 外部 幫助 欄目 Java 简体版
原文   原文鏈接

做者：Marius Schulzhtml

譯者：前端小智前端

來源：Marius Schulzreact

阿里雲最近在作活動，低至2折，真心以爲很划算了，能夠點擊本條內容或者連接進行參與： promotion.aliyun.com/ntms/yunpar…git

騰訊雲最近在作活動，百款雲產品低至 1 折，能夠點擊本條內容或者連接進行參與github

爲了保證的可讀性，本文采用意譯而非直譯。typescript

自2015年11 發佈1.7版以來，TypeScript 已支持 async/await 關鍵字。編譯器使用 yield 將異步函數轉換爲生成器函數。這意味着我們沒法針對 ES3 或 ES5，由於生成器僅在 ES6 中引入的。npm

TypeScript 2.1 如今支持將異步函數編譯爲 ES3 和 ES5。與生成的其他代碼同樣，它們在全部 JS 環境中運行。(這甚至包括IE6，固然不建議在去兼容這麼古老的瀏覽器了)promise

使用異步函數

下面是一個簡單的函數，它在給定的毫秒數以後解析一個 Promise 。使用內置的 setTimeout 函數在 ms 毫秒事後調用 resolve 回調:瀏覽器

function delay(ms: number) {
  return new Promise<void>(function(resolve) {
    setTimeout(resolve, ms)
  })
}
複製代碼

delay 函數返回一個 promise，調用時可使用 await 來等待這個 promise，以下所示：微信

function delay(ms: number) {
  return new Promise<void>(function(resolve) {
    setTimeout(resolve, ms);
  })
}

async function asyncAwait () {
  console.log('開始執行...');

  await delay(1000);

  console.log('1 秒事後')

  await delay(1000);

  console.log('過 2 秒後執行完成');
}
複製代碼

如今，若是調用 asyncAwait 函數，在控制檯會看到三個消息，一個接一個，每一個消息之間都有一個暫停。

asyncAwait();
// 開始執行...
// 1 秒事後
// 過 2 秒後執行完成
複製代碼

如今，來看一下針對 ES2017，ES2016/ES2015 和 ES5/ES3 時 TypeScript 生成的 JS 代碼。

編譯 async/await 到 ES2017

異步函數是一種JavaScript語言功能，在 ES2017 中進行標準化。

所以，在面向 ES2017 時，TypeScript 編譯器無需將 async/await 重寫爲其餘某種構造，由於兩個異步函數均已被原生支持。生成的 JS 代碼與 TypeScript 代碼相同，除了已除去全部類型註釋和空白行：

function delay(ms) {
  return new Promise(function(resolve) {
    setTimeout(resolve, ms);
  })
}

async function asyncAwait () {
  console.log('開始執行...');

  await delay(1000);

  console.log('1 秒事後')

  await delay(1000);

  console.log('過 2 秒後執行完成');
}
複製代碼

這裏沒什麼可說的，這是我們本身編寫的代碼，只是沒有類型註釋。

編譯 async/await 到 ES2015/ES2016

針對 ES2015，TypeScript 編譯器使用生成器函數和 yield 關鍵字重寫 async/await。它還會生成__awaiter 幫助方法做爲異步函數的運行程序。以上 asyncAwait 函數的結果編譯成 JS 代碼以下所示：

var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
    return new (P || (P = Promise))(function (resolve, reject) {
        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
        function step(result) { result.done ? resolve(result.value) : new P(function (resolve) { resolve(result.value); }).then(fulfilled, rejected); }
        step((generator = generator.apply(thisArg, _arguments)).next());
    });
};
function delay(ms) {
    return new Promise(function (resolve) {
        setTimeout(resolve, ms);
    });
}
function asyncAwait() {
    return __awaiter(this, void 0, void 0, function* () {
        console.log('開始執行...');
        yield delay(1000);
        console.log('1 秒事後');
        yield delay(1000);
        console.log('過 2 秒後執行完成');
    });
}
複製代碼

輔助代碼的 generated 能夠忽略不計，可是也不錯。若是想在 Node 6.x 或 7.x 應用程序中使用 async/await，須要的配置中設置target 爲 ES2015 或 ES2016。

請注意，ES2016 標準化的唯一特性是求冪運算符和 Array.prototype.includes 方法，這裏兩個方法都不使用。所以，針對 ES2016 生成的 JS 代碼與針對 ES2015 生成的代碼相同。

編譯 async/await 到 ES3/ES5

有趣的地方是，使用 TypeScript 2.1，可讓編譯器將異步函數降級到 ES3 或 ES5，下面是我們以前的例子：

var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
    return new (P || (P = Promise))(function (resolve, reject) {
        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
        function step(result) { result.done ? resolve(result.value) : new P(function (resolve) { resolve(result.value); }).then(fulfilled, rejected); }
        step((generator = generator.apply(thisArg, _arguments || [])).next());
    });
};
var __generator = (this && this.__generator) || function (thisArg, body) {
    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
    function verb(n) { return function (v) { return step([n, v]); }; }
    function step(op) {
        if (f) throw new TypeError("Generator is already executing.");
        while (_) try {
            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
            if (y = 0, t) op = [op[0] & 2, t.value];
            switch (op[0]) {
                case 0: case 1: t = op; break;
                case 4: _.label++; return { value: op[1], done: false };
                case 5: _.label++; y = op[1]; op = [0]; continue;
                case 7: op = _.ops.pop(); _.trys.pop(); continue;
                default:
                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
                    if (t[2]) _.ops.pop();
                    _.trys.pop(); continue;
            }
            op = body.call(thisArg, _);
        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
    }
};
function delay(ms) {
    return new Promise(function (resolve) {
        setTimeout(resolve, ms);
    });
}
function asyncAwait() {
    return __awaiter(this, void 0, void 0, function () {
        return __generator(this, function (_a) {
            switch (_a.label) {
                case 0:
                    console.log('開始執行...');
                    return [4 /*yield*/, delay(1000)];
                case 1:
                    _a.sent();
                    console.log('1 秒事後');
                    return [4 /*yield*/, delay(1000)];
                case 2:
                    _a.sent();
                    console.log('過 2 秒後執行完成');
                    return [2 /*return*/];
            }
        });
    });
}
asyncAwait();
複製代碼

裏面有不少幫助代碼。除了前面已經看到的 __awaiter 函數以外，編譯器還注入了另外一個名爲generator的幫助函數，它使用一個狀態機來模擬一個能夠暫停和恢復的生成器函數。

注意，爲了讓各位的代碼在 ES3 或 ES5 環境中成功運行，須要提供Promise polyfill，由於 Promise 只在 ES2015 中引入。另外，你必須讓TypeScript知道在運行時，它能夠找到 Promise 函數。這在上一章TypeScript 2.0:內置類型聲明 有講過了。

有了它，async/await 在全部 JS 引擎中均可以運行。

接下來，來看看如何避免在編譯中的每一個 TypeScript 文件一遍又一遍地將這些輔助函數寫入。

TypeScript 中的外部幫助庫

在某些狀況下，TypeScript 編譯器會將幫助函數注入到在運行時調用的生成輸出代碼中。每一個這樣的幫助函數都模擬編譯目標(target) (ES三、ES五、ES2015) 自己不支持的特定語言特性的語義。

目前，TypeScript 中有如下幫助函數

  • __extends 用於繼承
  • __assign 用於擴展對象屬性
  • _rest 用於表示對象的剩餘屬性
  • 還有一些裝飾器 __decorate, __param, __metadata
  • __awaiter 和 __generator 用於 async/await

帶有 extends 的 ES6 類的典型用例是以下所示的 React 組件：

import * as React from "react";

export default class FooComponent extends React.Component<{}, {}> {
  render() {
    return <div>Foo</div>;
  }
}
複製代碼

若是配置的 target 是ES5，那麼 TypeScript 編譯器將生成(emit )如下 JS 代碼，其中既不支持 class ，也不支持 extends ：

"use strict";
var __extends = (this && this.__extends) || function (d, b) {
    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
    function __() { this.constructor = d; }
    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
var React = require("react");
var FooComponent = (function (_super) {
    __extends(FooComponent, _super);
    function FooComponent() {
        return _super.apply(this, arguments) || this;
    }
    FooComponent.prototype.render = function () {
        return (React.createElement("div", null, "Foo"));
    };
    return FooComponent;
}(React.Component));
Object.defineProperty(exports, "__esModule", { value: true });
exports.default = FooComponent;
複製代碼

雖然這種方法對於這樣的簡單示例頗有效，可是它有一個很大的缺點:將 __extends 幫助函數代碼注入到使用帶有extends語句的類的每一個編譯文件中。也就是說，爲應用程序中每一個基於類的 React 組件觸發幫助函數。

對於一個包含數十個或數百個 React 組件的中型應用程序，對於__extends 函數來講是大量重複的代碼。大量重複的代碼也會增長包大小，因此下載時間也會隨之增長。

這個問題只會對於其它的幫助的函數也會存在，如開頭講的如何將 async/await 降級到 ES3/ES5 中的 __awaiter 和 __generator 幫助函數也很大。注意，它們被注入到每一個使用 async/await 關鍵字的文件中：

var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
    return new (P || (P = Promise))(function (resolve, reject) {
        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
        function step(result) { result.done ? resolve(result.value) : new P(function (resolve) { resolve(result.value); }).then(fulfilled, rejected); }
        step((generator = generator.apply(thisArg, _arguments)).next());
    });
};
var __generator = (this && this.__generator) || function (thisArg, body) {
    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t;
    return { next: verb(0), "throw": verb(1), "return": verb(2) };
    function verb(n) { return function (v) { return step([n, v]); }; }
    function step(op) {
        if (f) throw new TypeError("Generator is already executing.");
        while (_) try {
            if (f = 1, y && (t = y[op[0] & 2 ? "return" : op[0] ? "throw" : "next"]) && !(t = t.call(y, op[1])).done) return t;
            if (y = 0, t) op = [0, t.value];
            switch (op[0]) {
                case 0: case 1: t = op; break;
                case 4: _.label++; return { value: op[1], done: false };
                case 5: _.label++; y = op[1]; op = [0]; continue;
                case 7: op = _.ops.pop(); _.trys.pop(); continue;
                default:
                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
                    if (t[2]) _.ops.pop();
                    _.trys.pop(); continue;
            }
            op = body.call(thisArg, _);
        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
    }
};
複製代碼

--noEmitHelpers 標誌

在 1.5 版中，TypeScript 增長 --noEmitHelpers 標誌。當指定此編譯器選項時，TypeScript 不會在編譯後生成任何幫助函數。這樣，捆綁包的大小會減小不少。

下面是以前的 React 組件，用 --noEmitHelpers 標誌編譯:

"use strict";
var React = require("react");
var FooComponent = (function (_super) {
    __extends(FooComponent, _super);
    function FooComponent() {
        return _super.apply(this, arguments) || this;
    }
    FooComponent.prototype.render = function () {
        return (React.createElement("div", null, "Foo"));
    };
    return FooComponent;
}(React.Component));
Object.defineProperty(exports, "__esModule", { value: true });
exports.default = FooComponent;
複製代碼

注意，對 __extends 的調用仍然存在。畢竟，使 React 組件工做是必需的。若是我們使用 --noEmitHelpers 標誌，那麼我們就須要提供所需的所幫助函數，由於TypeScript 假設它們在運行時可用。

可是，手動跟蹤全部這些幫助函數很是麻煩。咱必須檢查應用程序須要哪些包，而後以某種方式使它們在包中可用。一點都很差玩了。還好，TypeScript 團隊提出了一個更好的解決方案。

--importHelpers 標誌和 tslib

TypeScript 2.1 引入了一個新的 --importHelpers 標誌，它使編譯器從tslib(一個外部幫助庫)導入幫助函數，而不是將它們內聯到每一個文件中。安裝 tslib 方式以下：

npm install tslib --save
複製代碼

再次編譯 Reac t組件，此次使用 --importHelpers 標誌:

"use strict";
var tslib_1 = require("tslib");
var React = require("react");
var FooComponent = (function (_super) {
    tslib_1.__extends(FooComponent, _super);
    function FooComponent() {
        return _super.apply(this, arguments) || this;
    }
    FooComponent.prototype.render = function () {
        return (React.createElement("div", null, "Foo"));
    };
    return FooComponent;
}(React.Component));
Object.defineProperty(exports, "__esModule", { value: true });
exports.default = FooComponent;
複製代碼

請注意第2行中的 require("tslib") 調用和第5行中的 tslib_1.__extends 調用。此文件中再也不內嵌幫助函數，而是從 tslib 模塊導入 __extends 函數。這樣，每一個幫助函數僅在程序中包含一次，完美。

編輯中可能存在的bug無法實時知道，過後爲了解決這些bug,花了大量的時間進行log 調試，這邊順便給你們推薦一個好用的BUG監控工具 Fundebug。

原文： mariusschulz.com/blog/extern… mariusschulz.com/blog/compil…

交流

乾貨系列文章彙總以下，以爲不錯點個Star，歡迎 加羣 互相學習。

github.com/qq449245884…

由於篇幅的限制，今天的分享只到這裏。若是你們想了解更多的內容的話，能夠去掃一掃每篇文章最下面的二維碼，而後關注我們的微信公衆號，瞭解更多的資訊和有價值的內容。

clipboard.png
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程