How to use optional chaining with array or functions?
You need to put a .
after the ?
to use optional chaining:
myArray.filter(x => x.testKey === myTestKey)?.[0]
Using just the ?
alone makes the compiler think you're trying to use the conditional operator (and then it throws an error since it doesn't see a :
later)
Optional chaining isn't just a TypeScript thing - it is a finished proposal in plain JavaScript too.
It can be used with bracket notation like above, but it can also be used with dot notation property access:
const obj = { prop2: { nested2: 'val2' }};console.log( obj.prop1?.nested1, obj.prop2?.nested2);
And with function calls:
const obj = { fn2: () => console.log('fn2 running')};obj.fn1?.();obj.fn2?.();
Just found it after a little searching on the what's new page on official documentation
The right way to do it with array is to add .
after ?
so it'll be like
myArray.filter(x => x.testKey === myTestKey)?.[0]
I'll like to throw some more light on what exactly happens with my above question case.
myArray.filter(x => x.testKey === myTestKey)?[0]
Transpiles to
const result = myArray.filter(x => x.testKey === myTestKey) ? [0] : ;
Due to which it throws the error since there's something missing after : and you probably don't want your code to be transpilled to this.
Thanks to Certain Performance's answer I learned new things about typescript especially the tool https://www.typescriptlang.org/play/index.html .
ECMA 262 (2020) which I am testing on Edge Chromium 84 can execute the Optional Chaining operator without TypeScript transpiler:
// All result are undefinedconst a = {};console.log(a?.b);console.log(a?.["b-foo-1"]);console.log(a?.b?.());// Note that the following statements throw exceptions:a?.(); // TypeError: a is not a functiona?.b(); // TypeError: a?.b is not a function