Angular 5：嵌套JSON无法访问问题求助

这个坑我之前踩过！明明控制台能看到employee对象有address属性，代码里却提示找不到，本质是TypeScript的静态类型检查在起作用——运行时数据确实存在，但编译时TypeScript不知道这个属性的存在。

问题原因 #

HttpClient.get()默认返回Observable<Object>，TypeScript只知道这是个对象，但不知道它具体有哪些属性。所以你用employee.address的时候，TypeScript会认为这个属性不存在，直接报错，哪怕运行时它其实是有的。

解决方案 #

方案1：定义类型接口（推荐，类型安全）

给返回的员工数据定义一个明确的接口，让TypeScript知道它的结构：

首先创建一个接口（可以单独放文件里，也可以在service里定义）：

// 如果address是对象，先定义Address接口
interface Address {
  street: string;
  city: string;
  // 补充你实际用到的地址属性
}

// 再定义Employee接口
interface Employee {
  address: Address;
  // 可以加上员工的其他属性，比如id、name等
}

然后在service的getEmployees方法里，给http.get()指定泛型类型：

getEmployees() {
  this.http.get<Employee>('你的接口地址').subscribe((employee) => {
    console.log(employee);
    this.addresses.push(employee.address); // 现在TypeScript能识别address属性了
  });
}

方案2：临时绕过类型检查（适合快速测试）

如果不想定义接口，也可以用类型断言或者方括号访问属性来绕过TypeScript的检查：

// 类型断言方式
this.addresses.push((employee as any).address);

// 方括号访问方式
this.addresses.push(employee['address']);

不过这种方法会失去TypeScript的类型安全优势，不建议在正式项目里多用。

为什么控制台能看到属性？ #

控制台打印的是运行时的JS对象，JS是动态类型语言，只要对象有这个属性就能访问；而TypeScript是静态类型，编译时就会检查属性是否存在，所以会出现“运行时存在，编译时报错”的情况。

内容的提问来源于stack exchange，提问作者Michael Niño