Angular中TypeScript访问嵌套对象属性报TS2532错误

问题复现 #

基于Angular + TypeScript开发时，定义多层嵌套可选接口、初始化实例数据后，在模板中通过属性链访问深层值触发编译错误。

相关代码 #

export interface adress{
  city?: string;
  neighborhood?: string; 
}


export interface programming{
  backend?: string;
  frontend?: string;
}

export interface nestedObject{
    firstName?: string;
    lastName?: string;
    completeAdress?: Array<adress>
    fullStackKnowledge?: Array<programming>
}


this.exple=[
      // 第一个用户
      { 
        
        firstName: 'Msaddak',
        lastName: 'Rouabeh',
        
        
        completeAdress: [
          {
            city: 'Gafsa',
            neighborhood: 'Cité Hached Lalla',
          },
          {
            city: 'Monastir',
            neighborhood: 'Skanes',
          }
        ],
        fullStackKnowledge: [
          {
            backend: 'Express js',
            frontend: 'Angular',
          },
          {
            backend: 'Spring boot',
            frontend: 'React js',
          }
        ]
      },
      // 第二个用户
      {
        firstName: 'Houssem',
        lastName: 'Ilahi',
        completeAdress: [
          {
            city: 'Tunis',
            neighborhood: 'Bardoo',
          },
          {
            city: 'Nabeul',
            neighborhood: 'Mrezka',
          }
        ],
        fullStackKnowledge: [
          {
            backend: '.net',
            frontend: 'Vue js',
          },
          {
            backend: 'Express js',
            frontend: 'React js',
          }
        ]
      }
    ]

触发报错的模板代码 #

Last name: {{exple[0].completeAdress[0].city}}</div>

完整报错 #

src/app/nested-objectt/nested-objectt.component.html:6:36 - error TS2532: Object is possibly 'undefined'

报错根因 #

TypeScript严格空值校验模式下，所有带?修饰的可选属性、通过数组下标访问的返回值，都会被判定为可能是undefined。你写的访问链exple[0].completeAdress[0].city里，exple本身、exple[0]、completeAdress属性、completeAdress[0]这几个节点都有可能为空，TS无法确认每一级都有有效值，直接访问下一级属性存在运行时空指针风险，因此阻断编译。

修复方法 #

• 方法1：模板可选链（最简便，推荐）
  Angular模板原生支持可选链操作符，在所有可能为空的节点后加?即可，访问到空值时会自动终止，不会抛出错误：

  Last name: {{exple?.[0]?.completeAdress?.[0]?.city}}</div>
  

• 方法2：*ngIf前置非空判断
  在渲染内容前先判断所有层级的非空性，确认值存在后再访问属性，适合需要做空状态兜底的场景：

  <div *ngIf="exple?.[0]?.completeAdress?.[0] as addr">
    Last name: {{addr.city}}
  </div>
  

• 方法3：关闭严格空值校验（不推荐）
  若项目不需要严格空值检查，可修改tsconfig.json配置，关闭后TS不再校验空值风险，但会丢失类型系统的空值防护，容易引发线上问题：

  {
    "compilerOptions": {
      "strictNullChecks": false
    }
  }
  

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