Using optional chaining operator for object property access

javascript typescript optional-chaining
Golo Roden picture Golo Roden · Nov 9, 2019 · Viewed 12.1k times · Source

TypeScript 3.7 now supports the optional chaining operator. Hence, you can write code such as:

const value = a?.b?.c;

I.e., you can use this operator to access properties of an object, where the object itself may be null or undefined. Now what I would like to do is basically the same, but the property names are dynamic:

const value = a?[b]?.c;

However, there I get a syntax error:

error TS1005: ':' expected.

What am I doing wrong here? Is this even possible?

PS: The proposal seems to imply that this is not possible 😕 (but maybe I get the syntax examples wrong).

Answer

Nicholas Tower picture Nicholas Tower · Nov 9, 2019

When accessing a property using bracket notation and optional chaining, you need to use a dot in addition to the brackets:

const value = a?.[b]?.c;

This is the syntax that was adopted by the TC39 proposal, because otherwise it's hard for the parser to figure out if this ? is part of a ternary expression or part of optional chaining.

The way I think about it: the symbol for optional chaining isn't ?, it's ?.. If you're doing optional chaining, you'll always be using both characters.

Related questions

How to use optional chaining with array or functions?

I'm trying to use optional chaining with an array instead of an object but not sure how to do that: Here's what I'm trying to do myArray.filter(x => x.testKey === myTestKey)?[0]. Also trying similar thing with a function: …

Read More
How can I combine destructuring assignment and optional chaining?

I have a TypeScript interface with some optional fields and a variable of that type: interface Foo { config?: { longFieldName?: string; } } declare let f: Foo; I'd like to put longFieldName in a variable of the same name. If config weren't optional, …

Read More
Can't bind to 'ngModel' since it isn't a known property of 'input'

I've got the following error when launching my Angular app, even if the component is not displayed. I have to comment out the <input> so that my app works. zone.js:461 Unhandled Promise rejection: Template parse errors: Can't …

Read More