`?` 在某些对象属性之前是什么意思？ 为什么我的 ts 文件不接受它？

Question

当我有一个可能未定义的对象或所需对象以外的对象时，我总是在 angular *ngIf指令中使用这种行为显示

<div *ngIf="object?.foo">
  ...
</div>

我知道这有效，但不知道为什么...

但是，当我尝试在我的TypeScript文件中的 if 上使用它时，如以下 angular 向我抛出两个不同的错误TS1005, TS1109 ，在我尝试使用此行为的每一行上交替出现。

if(object?.foo){} // error TS1109
if(object?.foo){} // error TS1005
if(object?.foo){} // error TS1109
if(object?.foo){} // error TS1005

我在这个项目中使用 Angular 7.3.9

Answer 1

它在您的模板中工作的原因是因为 angular 会将其计算为以下表达式：

<div *ngIf="object && object.foo">

如果对象为空，这将防止在对象上调用属性的错误。

文档链接： https : //angular.io/guide/template-syntax#the-safe-navigation-operator----and-null-property-paths

它在组件的打字稿部分不起作用，因为打字稿不支持它。

唯一的用途? 打字稿中的变量是指定方法的参数是可选的：

function myFunc(mandatoryParam: any, optionalParam?: any) {
    ...
}

myFunc('hello'); // Will work
myFunc('hello', 'world'); // Will work too

正如对此答案的评论中所述，TypeScript 将在 3.7 版本中添加对 angular 模板语法的支持： https : //www.typescriptlang.org/docs/handbook/release-notes/typescript-3-7.html#可选链

Answer 2

Typescript 3.7+ 具有可选链接（ https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-7.html#optional-chaining ）

有了这个，表达式if (object?.foo) {}是有效的语法 - 如果object未定义或为空，条件将解析为未定义。

检查您的打字稿版本。