你需要放一个。之后?使用可选链接:

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

操场上的链接

只使用?单独使用会让编译器认为你在尝试使用条件操作符(然后它会抛出一个错误，因为它没有看到a: later)

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

在官方文档的新页面上搜索了一下就找到了

使用数组的正确方法是添加。后吗?

所以就像

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

我想更清楚地说明上面这个问题的情况到底发生了什么。

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

Transpiles to

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

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

多亏了Certain Performance的回答，我学到了typescript的新知识，尤其是工具https://www.typescriptlang.org/play/index.html。

好吧，即使我们找到了正确的语法，代码对我来说没有多大意义。

上面代码中的可选链接确保myArray的结果。filter(x => x. testkey === myTestKey)不是空的，也不是undefined(你可以看看TS的输出)。但无论如何这是不可能的，因为filter方法的结果总是一个数组。因为JavaScript不会抛出“数组边界超出”，所以当你试图访问任何索引时，你总是安全的——如果这个元素不存在，你会得到undefined。

再举个例子说明一下:

const myArray: string[] = undefined
console.log(myArray.filter(x => x)?.[0]) //throws Cannot read property 'filter' of undefined

//in this example the optional chaining protects us from undefined array
const myArray: string[] = undefined
console.log(myArray?.filter(x => x)[0]) //outputs "undefined"

我在Edge Chromium 84上测试的ECMA 262(2020)可以在没有TypeScript转译器的情况下执行可选的链接操作符:

// All result are undefined
const 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 function
a?.b(); // TypeError: a?.b is not a function

CanIUse: Chrome 80+， Firefox 74+

函数不一定在对象内部，你也可以像这样使用可选链接运行函数:

someFunction?.();

如果someFunction存在，它将运行，否则它将跳过执行并且不会出错。

这种技术实际上非常有用，特别是当您使用可重用组件时，而某些组件可能没有此功能。

在官方文档的新页面上搜索了一下之后，它被发现了。

你需要放一个。之后?使用可选链接。

所以就会这样，

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

只使用?使编译器认为您正在尝试使用条件操作符(然后它会导致一个错误，因为它没有看到:稍后)