Angular HTTP数据处理时TS7053、TS2345类型错误如何修复？

错误原因说明 #

• 第一个TS7053错误：Angular的HttpClient get方法默认返回值类型为Object，没有声明字符串索引签名，所以无法直接用字符串类型的key访问属性。同时你对接口返回结构的理解有误，/products.json返回的不是单个ProductData对象，而是以产品ID为键、ProductData为值的键值对集合。
• 第二个TS2345错误：语法错误，你把类型断言写在了RxJS map操作符的参数位置，map要求传入的是回调函数，你直接传入res as ProductData相当于把一个对象传给了要求函数类型的参数，类型不匹配。

修复步骤 #

1. 先定义匹配接口返回结构的类型，新增带索引签名的返回值类型
2. 给HttpClient get方法传入泛型参数声明返回值类型，不需要额外冗余断言
3. 可选补充：给Object.keys的返回值加类型断言，进一步避免隐式any报错

完整修复代码 #

首先调整类型定义：

export interface ProductData {
  date: string;
  info: string;
  photo: string;
  price: string;
  title: string;
  type: string;
}

// 新增：描述/products.json返回的键值对结构
export interface ProductResponse {
  [key: string]: ProductData;
}

然后修改getAll方法：

getAll() {
  // 给get方法传入泛型<ProductResponse>声明返回值类型
  return this.http.get<ProductResponse>(`${environment.fbDbUrl}/products.json`)
    .pipe( map ( res => {
      // 可选：给Object.keys返回值加类型断言更严谨
      return (Object.keys(res) as Array<keyof ProductResponse>)
        .map( key => ({
          ...res[key],
          id: key,
          date: new Date(res[key].date)
        }))
    }))
}

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