如何将可选链接与数组和函数一起使用？

Question

我正在尝试将可选链接与数组而不是对象一起使用，但不确定如何执行此操作：

这是我正在尝试做的 myArray.filter(x => x.testKey === myTestKey)?[0] 。还尝试用一个函数做类似的事情：

 let x = {a: () => {}, b: null}
console.log(x?b());

但它给出了一个类似的错误——我如何将可选链接与数组或函数一起使用？

原文由 Black Mamba 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您需要在 . 之后放置 ? 以使用可选链接：

 myArray.filter(x => x.testKey === myTestKey)?.[0]

游乐场链接

仅使用 ? 会使编译器认为您正在尝试使用条件运算符（然后它会抛出错误，因为它稍后看不到 : ）

可选链接不仅仅是 TypeScript 的事情——它也是 纯 JavaScript 中 完成的提案。

它可以与上面的括号表示法一起使用，但也可以与点表示法属性访问一起使用：

 const obj = {
  prop2: {
    nested2: 'val2'
  }
};

console.log(
  obj.prop1?.nested1,
  obj.prop2?.nested2
);

以及函数调用：

 const obj = {
  fn2: () => console.log('fn2 running')
};

obj.fn1?.();
obj.fn2?.();

原文由 CertainPerformance 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

在 官方文档 的新页面上稍微搜索后才找到它

使用数组的正确方法是在 . ?

所以它会像

myArray.filter(x => x.testKey === myTestKey)?.[0]

我想进一步说明我的上述问题案例到底发生了什么。

 myArray.filter(x => x.testKey === myTestKey)?[0]

转译为

const result = myArray.filter(x => x.testKey === myTestKey) ? [0] : ;

由于它抛出错误，因为在 : 之后缺少一些东西，你可能不希望你的代码被转译到这个。

感谢 Certain Performance 的回答，我学到了关于打字稿的新知识，尤其是工具 https://www.typescriptlang.org/play/index.html 。

原文由 Black Mamba 发布，翻译遵循 CC BY-SA 4.0 许可协议