元素隐式具有“任何”类型，因为“字符串”类型的表达式不能用于索引“对象”类型 TS7053

Question

我在 Angular 上看 YouTube 上的培训视频，不管是什么代码，都会有很多错误。 下面是从服务器获取数据的方法。

  getAll() {
    return this.http.get(`${environment.fbDbUrl}/products.json`)
      .pipe( map ( res => {
        return Object.keys(res)
          .map( key => ({
            ...res[key],
            id: key,
            date: new Date(res[key].date)
          }))
      }))
  }

这里 res[key], 然后res[key].date 返回错误

TS7053: Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'Object'.   No index signature with a parameter of type 'string' was found on type 'Object'.

如何解决这个问题？ 本次请求要接收的json格式数据：

{
  "date" : "2021-11-11T13:46:32.056Z",
  "info" : "<h2>The main</h2><p>A type smartphone</p><p>Operating system Apple iOS</p><p>Operating system version iOS 13</p><p>Screen size 5.8\"</p><p>Screen resolution 1125x2436</p><p>RAM 3 GB</p><p>Flash memory 128 GB</p><p>Integrated camera 12MP + 12MP</p><p>Number of main cameras 2</p>",
  "photo" : "<p><img src=\"data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAAMCAgMCAgMDA................
oHxB/9k=\"></p>",
  "price" : "11700",
  "title" : "Iphone X 128GB",
  "type" : "Phone"
}

我创建了一个接口来描述数据

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

修正方法：

  getAll() {
    return this.http.get(`${environment.fbDbUrl}/products.json`)
      .pipe( map ( (res as ProductData) => {
        return Object.keys(res)
          .map( key => ({
            ...res[key],
            id: key,
            date: new Date(res[key].date)
          }))
      }))
  }

但现在它在这一行给(res as ProductData) 一个错误：

TS2345: Argument of type 'ProductData' is not assignable to parameter of type '(value: Object, index: number) => unknown'.   Type 'ProductData' provides no match for the signature '(value: Object, index: number): unknown'.

Answer 1

首先我建议你告诉 HttpClient 你期望什么类型的响应，在这种情况下是一个看起来像ProductData 的对象（HttpClient 默认返回一个通用对象）。然后您可以进一步在每个步骤中输入您的数据：

getAll() {
  return this.http.get<ProductData>(`${environment.fbDbUrl}/products.json`)
    .pipe(
      map((res: ProductData) => {
        return Object.keys(res).map((key: string) => ({
          ...res[key],
          id: key,
          date: new Date(res[key].date),
        }));
      })
  }

我只是想知道您在此处实际使用 Object.map 的方式，它可能不会返回您想要的 (??)，但这本身就是另一个问题。

Answer 2

将您接收的数据类型添加为接口。

// interface
export interface MyData {
  date: string,
  etc...
}

在您的服务中导出您的界面

// service or component
import { MyData } from './interface.ts';
...
.pipe( map ( (res: MyData) => {
...

我相信这是一个简单的类型错误。如果此错误现在消失，请告诉我！