Can you explain TypeScript 3.7 Optional Chaining?

Question

In TypeScript 3.7.2 I can use Optional Chaining.

requests?.requestsCount

Can you explain how it works?

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

I see compiled version of my code.

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

Can you explain void 0 ? In release docs it should be undefined.

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

May I use this syntactic sugar safely?

What do you mean, *exactly*? Which parts *do* you understand? That's not a line, it's an assignment expression. — jonrsharpe, Nov 08 '19 at 16:59
Because if you take it away `_a` will definitely still be `undefined`? — jonrsharpe, Nov 08 '19 at 17:01
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/202067/discussion-between-polrk-and-jonrsharpe). — polRk, Nov 08 '19 at 17:02
No, thank you. I've linked you to an explanation of `void 0`; if you have another *specific, answerable* question, please [edit] to ask it. — jonrsharpe, Nov 08 '19 at 17:03

georg · Accepted Answer · 2019-11-09T07:18:34.677

This compiled code

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

does the following

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

Why void 0 and not just undefined? Because the name undefined is not reserved in javascript and can be (in older engines at least) overwritten to something else. void 0 or void whatever is a bullet-proof way to obtain the undefined value.

Why the temporary variable _a and not just requests? Because the compiler has to ensure that the argument is evaluated exactly once. Imagine:

someFunc()?.someProp

Without the temporary variable this would call someFunc three times, which is not acceptable. In the same vein, for longer chains like x?.y?.z... the compiler will allocate more temporary variables _b, _c etc.

I hope this answers your questions.

Thank you! `Why the temporary variable _a and not just requests?` - I had not known about this until your answer) — polRk, Nov 09 '19 at 12:01

Can you explain TypeScript 3.7 Optional Chaining?

1 Answers1