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