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

javascript arrays function typescript optional-chaining

2022-08-30 01:28:27

我正在尝试使用数组而不是对象的可选链接，但不确定如何做到这一点：

这就是我正在努力做的事情。还尝试使用函数进行类似操作：myArray.filter(x => x.testKey === myTestKey)?[0]

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

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

答案 1

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

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

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

可选链接不仅仅是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?.();

答案 2

在官方文档的新页面上进行了一些搜索后才找到它

使用数组执行此操作的正确方法是在.?

所以它会像

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

我想进一步阐明我上面的问题案例究竟发生了什么。

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

转译至

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

由于它，它会抛出错误，因为在之后缺少一些东西：并且您可能不希望您的代码被转译为此。

多亏了Something Performance的答案，我学到了关于typescript的新东西，特别是工具 https://www.typescriptlang.org/play/index.html。