Angular 14中为何ngIf校验后对象仍可能为undefined？

先看我们的代码场景：
我们定义了一个包含可选嵌套属性的TypeScript接口：

export interface Product {
  category?: {
    name?: string,
  }
}

想要实现的效果是：仅当category和name都已设置时，渲染<h1>元素，于是写了这样的模板代码：

<h1 *ngIf="product.category?.name">{{ product.category.name }}</h1>

但这会触发TypeScript编译错误：

TS2532: Object is possibly 'undefined'.

错误指向插值表达式里的product.category。

问题原因 #

核心在于TypeScript的类型收缩（类型窄化）机制在Angular模板中的局限性：

• *ngIf="product.category?.name"里的可选链?.只是运行时的安全访问语法，它能确保运行时只有当category和name都存在时才会进入渲染分支，但TypeScript编译器无法将这个判断的类型信息“同步”到插值表达式的上下文当中。
• 编译器依然认为product.category的类型是{name?: string} | undefined，所以直接访问product.category.name时，会提示category可能为undefined。

两种解决方法的原理 #

1. 插值表达式也使用可选链

<h1 *ngIf="product.category?.name">{{ product.category?.name }}</h1>

这里插值里的?.同样是运行时安全访问，同时符合TypeScript的类型检查规则，编译器不会再报错。

2. 在*ngIf中用逻辑与做类型收缩

<h1 *ngIf="product.category && product.category.name">{{ product.category.name }}</h1>

product.category && ...是TypeScript能识别的类型收缩操作：当这个条件为真时，编译器会明确推断出product.category肯定不是undefined，因此后续访问product.category.name时不会触发类型错误。

内容的提问来源于stack exchange，提问作者lampshade