你能解釋一下 TypeScript 3.7 可選鏈接嗎？

Question

在 TypeScript 3.7.2 中，我可以使用可選鏈接。

requests?.requestsCount

你能解釋一下它是如何工作的嗎？

// before
requests ? requests.requestsCount : 0
// after
requests?.requestsCount || 0

我看到了我的代碼的編譯版本。

"use strict";
var _a;
return {
    requests: ((_a = requests) === null || _a === void 0 ? void 0 : _a.requestsCount) || 0
};

你能解釋一下void 0嗎？ 在發布文檔中它應該是未定義的。

let x = (foo === null || foo === undefined) ? undefined : foo.bar.baz();

我可以安全地使用這種語法糖嗎？

Answer 1

這個編譯的代碼

var _a;
return {
    requests: ((_a = requests) === null || _a === void 0 ? void 0 : _a.requestsCount)
};

執行以下操作

_a = requests
if _a === null || _a === undefined
    return {requests: undefined}
else
    return {requests: _a.requestsCount}

為什么void 0而不僅僅是undefined ？ 因為undefined的名稱在 javascript 中沒有保留，並且可以（至少在舊引擎中）被覆蓋為其他名稱。 void 0或void whatever是獲得undefined值的防彈方法。

為什么臨時變量_a而不僅僅是requests ？ 因為編譯器必須確保參數只計算一次。 想象：

someFunc()?.someProp

如果沒有臨時變量，這將調用someFunc三次，這是不可接受的。 同樣，對於像x?.y?.z...這樣的較長鏈，編譯器將分配更多的臨時變量_b 、 _c等。

我希望這回答了你的問題。