你能解释一下 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 吗？在release docs 中它应该是未定义的。

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 等。

我希望这能回答你的问题。