Element implicitly has an 'any' type because expression of type 'string' can&#03-CodePudding

I'm watching a training video on YouTube on Angular, no matter what a piece of code, there are a lot of errors. Here is the method of getting data from the server.

  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)
          }))
      }))
  }

Here res[key], and then res[key].date returns an error

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'.

How can this be fixed? Data in json format to be received by this request:

{
  "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"
}

I created an interface to describe the data

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

Fixed the method:

  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)
          }))
      }))
  }

But now it gives (res as ProductData) an error in this line:

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'.

CodePudding user response：

Add the type of data you receive as an interface.

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

export your interface in your service

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

It's a simple type error I believe. Let me know if this error goes away now!

CodePudding user response：

First I recommend that you tell HttpClient what type of response you expect, which in this case is an object that looks like ProductData (HttpClient returns a generic object by default). Then you further can type your data in each step:

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),
        }));
      })
  }

I'm just wondering about how you are actually using Object.map here, it will probably not return what you want (??), but that is another question for itself.