Angular 6 问题：类型'Object'不存在属性'map'的解决咨询

这个问题本质是TypeScript静态类型检查和运行时实际数据类型不匹配导致的：Angular的HttpClient.get()默认会把响应解析为Object类型，所以TypeScript编译时不知道你拿到的其实是一个数组，就会抛出这个错误；但运行时浏览器里的JavaScript是动态类型，实际数据确实是数组，所以map方法能正常工作，应用也能正常运行。

解决这个问题很简单，只需要给http.get()指定泛型类型，明确告诉TypeScript你期望的响应数据结构即可，具体步骤如下：

步骤1：（推荐）定义数据接口 #

先明确原始数据和转换后数据的类型，让代码更健壮、可读性更强：

// 定义API返回的原始数据结构
interface RawApiData {
  a: string;
  b: { id: string };
}

// 定义转换后你需要的数据结构
interface TransformedData {
  a: string;
  b: string;
}

步骤2：在http.get中指定泛型 #

修改你的请求代码，给get方法加上泛型<RawApiData[]>，表示响应是一个RawApiData类型的数组：

return this.http.get<RawApiData[]>(this.url).pipe(
  map(datas => {
    return datas.map(data => {
      return {
        a: data.a,
        b: data.b.id
      } as TransformedData;
    });
  })
);

简化方案（如果不想定义接口） #

如果只是快速解决错误，也可以直接用数组类型作为泛型，不用单独定义接口：

return this.http.get<{a: string, b: {id: string}}[]>(this.url).pipe(
  map(datas => {
    return datas.map(data => {
      return {
        a: data['a'],
        b: data['b']['id'],
      };
    })
  })
);

这样修改后，TypeScript就会明确知道datas是数组类型，map方法存在，编译错误就会消失，同时还能获得TypeScript的类型提示，让代码更可靠。

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