Typescript 可选链接错误：Expression expected.ts(1109)

Question

我正在尝试在 Typescript + React Native 中进行可选链接。

假设我有以下接口：

interface Bar {
  y: number
}

interface Foo {
  x?: Bar
}

我尝试运行以下命令：

 const test: Foo = {x: {y: 3}};
 console.log(test.x?.y);

VSCode 将?.在以下语句下显示错误：Expression expected.ts(1109)

您知道为什么会发生这种情况或我应该如何解决吗？谢谢。

Answer 1

TypeScript 3.7 已经发布，但稳定的 VS Code 使用的是旧版本。

尝试?+ Shift+p和选择Select TypeScript Version。如果不是 3.7+，那就是问题所在。最简单的解决方法是安装ms-vscode.vscode-typescript-next扩展。它将提供一个夜间 TypeScript 版本供 VS Code 使用（可能需要重新启动 VS Code 仅供参考）。

当 VS Code 默认获得 TypeScript 3.7+ 时，您需要记住删除扩展。

有关更多详细信息，请参阅https://code.visualstudio.com/docs/typescript/typescript-compiling#_using-newer-typescript-versions。

Answer 2

对于那些想知道的人，自?2019 年 10 月起，TypeScript 3.7（测试版）现在可以使用可选链（运算符）。您可以通过运行以下命令来安装该版本：

npm install typescript@beta

这就是您可以使用运算符的方式，如发行说明中所述。

let x = foo?.bar.baz();

这相当于

let x = (foo === null || foo === undefined) ?
    undefined :
    foo.bar.baz();

除了 Optional Chaining 之外，其他有趣的功能包括 Nullish Coalescing（??操作符）。

更新（2019 年 11 月）

TypeScript 的可选链接现已正式可用。安装最新版本的 typescript 应该允许您访问很酷的新功能。

npm install typescript

对于那些使用VS Code 的人，请参考Austin关于让它与新的 TypeScript 版本一起工作的优秀答案。

对于那些使用WebStorm 的人，您需要配置 TypeScript 以使用您的项目已安装的 TypeScript 版本。

Preferences -> Languages & Frameworks -> TypeScript

此外，如果您使用的是旧版本的 WebStorm，则在尝试使用 Nullish Coaslescing 运算符 ( ??)时可能会遇到错误/警告。要解决此问题，您需要安装WebStorm 2019.2.4或任何比上述更新的版本。