將async/await編譯到 ES3/ES5 (外部幫助庫)
使用非同步函式
下面是一個簡單的函式，它在給定的毫秒數之後解析一個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 環境中成功執行，需要提供Promisepolyfill，因為Promise只在 ES2015 中引入。另外，你必須讓TypeScript知道在執行時，它可以找到Promise函式。這在上一章TypeScript 2.0:內建型別宣告 有講過了。
有了它，async/await在所有 JS 引擎中都可以執行。
接下來，來看看如何避免在編譯中的每個 TypeScript 檔案一遍又一遍地將這些輔助函式寫入。
TypeScript 中的外部幫助庫
在某些情況下，TypeScript 編譯器會將幫助函式注入到在執行時呼叫的生成輸出程式碼中。每個這樣的幫助函式都模擬編譯目標(target) (ES3、ES5、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 團隊提出了一個更好的解決方案。
資源搜尋網站大全 https://www.renrenfan.com.cn 廣州VI設計公司https://www.houdianzi.com
--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函式。這樣，每個幫助函式僅在程式中包含一次，完美。