Initializing an array type to an object javascript

Question

I hava an interface called Products

 export interface Products{
    category: string;
    imageUrl: string;
    price: number;
    title: string;
 }

I have a variable in my component of type products array

products: Products[];

I am trying to map my response from my service to the products variable, but I get this error Type

'{}[]' is not assignable to type 'Products[]'

and I don't know what i'm doing wrong

this.subscription = this.productService
  .getAll()
  .subscribe(
    products =>
      (this.products = products.map(p => ({ ...(p.payload.val() as {}) }))),
  )

sorry that's a mistake. should be p => ({...p.payload.val() as {}} — gbubemi smith
– gbubemi smith, Commented Apr 14, 2020 at 19:49
Does something called payload have a method? Most payloads I've seen are plain data objects. — Scott Sauyet
– Scott Sauyet, Commented Apr 14, 2020 at 19:50
You're explicitly doing an as {} in there; do you mean to do as Product or leave off the as clause if it's type inferable? You're basically telling the compiler to make an {}[]. — Jacob
– Jacob, Commented Apr 15, 2020 at 19:27

Jacob · Accepted Answer · 2020-04-15 22:54:37Z

1

In this assignment clause:

this.products = products.map(p => ({
  ...(p.payload.val() as {})
}))

...you're casting p.payload.val() as type {} and also spreading that into an empty object (to clone it?), which still keeps its type as {}. Therefore, products.map(...) has type of {}[], a.k.a. Array<{}>. Since this.products is a Product[], the type is incompatible.

If p.payload.val() is already of type Product, then there's no need to cast anything:

this.products = products.map(p => p.payload.val())

// or if you need that cloning stuff...

this.products = products.map(p => ({ ...p.payload.val() }))

If it's not of type Product, cast to Product instead of {}:

this.products = products.map(p => p.payload.val() as Product)

// or if cloning...

this.products = products.map(p => {
  return { ...p.payload.val() } as Product
});

edited Apr 15, 2020 at 22:54

answered Apr 15, 2020 at 19:35

Jacob

79k24 gold badges159 silver badges245 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Initializing an array type to an object javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related