Angular14中如何为接口内对象属性设可选并避免undefined报错？

Angular 14.2.0版本下，你定义了如下User接口，其中address为可选对象属性：

export interface User {
  firstName: string;
  lastName: string;
  age?: number;
  address?: {
    street?: string;
    city?: string;
    state?: string;
  };
  isActive?: boolean;
  registered?: any;
  hide?: true;
}

在users.component.html中访问address的子属性时，因address可能为undefined会触发类型错误。以下是几种无需取消address可选性的解决方法：

• 可选链操作符（?.）
  在模板中访问address子属性时使用可选链，当address为undefined时会直接返回undefined而不报错，示例：

  {{ user.address?.street }}
  {{ user.address?.city }}
  

• 空值合并操作符（??）
  配合可选链使用，在address或其子属性为undefined时提供默认值：

  {{ user.address?.street ?? '未填写街道' }}
  {{ user.address?.city ?? '未填写城市' }}
  

• *ngIf 提前判断
  通过*ngIf先确认address存在，再批量渲染相关内容：

  <div *ngIf="user.address; let addr">
    <p>街道：{{ addr.street }}</p>
    <p>城市：{{ addr.city }}</p>
    <p>州/省：{{ addr.state }}</p>
  </div>
  

• 组件类中设置默认空对象
  获取到User数据后，在组件内为address赋值默认空对象，避免后续访问时出现undefined：

  user: User = { firstName: 'John', lastName: 'Doe' };
  
  ngOnInit(): void {
    this.user.address = this.user.address || {};
  }
  

• 接口中允许address为空对象
  修改接口定义，让address允许为空对象，确保未赋值时也不会是undefined：

  export interface User {
    firstName: string;
    lastName: string;
    age?: number;
    address?: {
      street?: string;
      city?: string;
      state?: string;
    } | {};
    isActive?: boolean;
    registered?: any;
    hide?: true;
  }
  

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