TypeScript与Angular中如何访问嵌套对象内部属性

TypeScript/JavaScript 是大小写严格敏感的语言，你访问失败的核心原因是属性名大小写不匹配：接口返回的employee对象下的主键字段是全小写的id，你代码中写的是大写开头的Id，属性名无法对应自然拿不到值。response.employee能正常获取，是因为这一层的属性名employee和返回字段的大小写完全一致。

• 基础访问：严格匹配接口返回的字段名（大小写完全一致），通过链式调用取值即可，常用取值示例：

// 获取员工id
const empId = response.employee.id;
// 获取员工角色名称
const roleName = response.employee.role.name;
// 获取员工手机号
const mobile = response.employee.mobileNumber;

• 安全访问（防报错）：多层嵌套时如果某一层数据可能为null/undefined，直接链式调用会触发Cannot read properties of undefined报错，推荐使用TS的可选链操作符?.做安全取值：

// 任意一层为空时不会抛错，直接返回undefined
const roleDesc = response?.employee?.role?.description;

• TS类型约束最佳实践：在Angular + TS开发场景下，建议提前定义接口返回值的类型结构，属性名写错时TS会在编译阶段直接标红报错，提前规避这类大小写问题：

// 定义嵌套数据对应类型
interface Role {
  id: number;
  name: string;
  description: string;
}

interface Employee {
  id: number;
  serialNumber: number;
  firstName: string;
  lastName: string;
  role: Role;
  email: string;
  mobileNumber: string;
  country: string;
  // 其余字段可根据业务需要按需补充
}

interface InvoiceDetailResp {
  id: number;
  serialNumber: number;
  status: string;
  createdDate: string;
  employee: Employee;
  invoiceHistories: any[];
  deleted: boolean;
  employeeId: number;
}

// 接口请求时指定返回类型
this.http.get<InvoiceDetailResp>('你的业务接口地址').subscribe(response => {
  // 此处如果误写为response.employee.Id，TS会直接提示该属性不存在，无需等到运行时才发现问题
  const empId = response.employee.id;
})

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