Angular中Safe Navigation Operator（?.）未按预期工作问题求助

问题代码 #

task = {
    title: 'Review applications',
    assignee: null
};
test = this.task.assignee?.name;

报错信息 #

TS2339: Property 'name' does not exist on type 'never'.

当前环境 #

• Angular CLI: 17.3.8
• Node: 20.13.1
• Package Manager: npm 10.5.2
• Typescript: 5.4.2

问题说明 #

已找到旧版TypeScript的类似问题案例，但当前使用的新版本本应无此问题。官方在线示例中，在模板里对nullItem = null;使用{{nullItem?.name}}可正常运行，但自己在组件TypeScript代码中使用可选链却报错。

解决方案 #

1. 显式声明类型（推荐） #

TypeScript自动推断assignee的类型为null（并非null | {name: string}），导致访问assignee?.name时触发类型错误。需明确task的类型定义：

interface Assignee {
  name: string;
}

task: {
  title: string;
  assignee: Assignee | null;
} = {
    title: 'Review applications',
    assignee: null
};
test = this.task.assignee?.name; // 类型推断为string | undefined，无报错

2. 类型断言（快速临时方案） #

若不想定义完整接口，可通过类型断言告知TypeScriptassignee的可能类型：

task = {
    title: 'Review applications',
    assignee: null as { name?: string } | null
};
test = this.task.assignee?.name;

3. 区分模板与组件代码的差异 #

注意官方示例是在Angular模板中使用安全导航操作符，而你的代码是在组件TypeScript代码中使用可选链。模板语法的安全导航由Angular处理，TypeScript代码中的可选链则受TS类型检查约束，二者逻辑不同，需确保组件变量类型定义符合预期。

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