Typescript Type X is missing the following properties from type Y length pop push concat and 26 more 2740

Question

I have this Product interface  export interface Product    code  string    description  string    type  string     Service with method calling product endpoint    public getProducts    Observable lt Product gt        return this http get lt Product gt   api products v1             And component where I use this service to get the Products  export class ShopComponent implements OnInit       public productsArray  Product             ngOnInit             this productService getProducts   subscribe res   gt              this productsArray   res                       With this state I m getting error    ts  Type  Product  is missing the following properties from type  Product     length  pop  push  concat  and 26 more   2740   Removing typing on productsArray variable removes the error  but don t get why this is not working  since server response is an array of objects in the type of Products

User · Answer

This error could also be because you are not subscribing to the Observable.

Example, instead of:

this.products = this.productService.getProducts();

do this:

   this.productService.getProducts().subscribe({
    next: products=>this.products = products,
    error: err=>this.errorMessage = err
   });

User · Answer

I got the same error message on GraphQL mutation input object then I found the problem  Actually in my case mutation expecting an object array as input but I m trying to insert a single object as input  For example  First try const mutationName   await apolloClient mutate lt insert mutation  insert mutationVariables gt          mutation  MUTATION        variables            objects   id  1  name   quot John Doe quot                      Corrected mutation call as an array const mutationName   await apolloClient mutate lt insert mutation  insert mutationVariables gt          mutation  MUTATION        variables            objects    id  1  name   quot John Doe quot                       Sometimes simple mistakes like this can cause the problems  Hope this ll help someone

User · Answer

You have forgotten to mark the getProducts return type as an array  In your getProducts it says that it will return a single product  So change it to this   public getProducts    Observable lt Product   gt        return this http get lt Product   gt   api products v1

User · Answer

You are returning Observable lt Product gt  and expecting it to be Product   inside subscribe callback   The Type returned from http get   and getProducts   should be Observable lt Product   gt   public getProducts    Observable lt Product   gt        return this http get lt Product   gt   api products v1

User · Answer

I had the same problem and I solved as follows  define an interface like mine  export class Notification       id  number      heading  string      link  string      and in nofificationService write  allNotifications  Notification         NotificationDetail  Notification      private notificationsUrl    assets data notification json       URL to web api    private downloadsUrl    assets data download json       URL to web api     constructor private httpClient  HttpClient          getNotifications    Observable lt Notification   gt                 return this allNotifications   this NotificationDetail slice 0          return this httpClient get lt Notification   gt    this notificationsUrl  pipe map res   gt  this allNotifications   res              and in component write   constructor private notificationService  NotificationService            ngOnInit              get Notifications          this notificationService getNotifications   subscribe data   gt  this notifications   data

User · Answer

You must specify which type the response is   this productService getProducts   subscribe res   gt              this productsArray   res               Try this   this productService getProducts   subscribe  res  Product      gt              this productsArray   res

User · Answer

For those newbies like me  don t assign variable to service response  meaning do  export class ShopComponent implements OnInit     public productsArray  Product       ngOnInit           this productService getProducts   subscribe res   gt            this productsArray   res                    Instead of  export class ShopComponent implements OnInit       public productsArray  Product         ngOnInit             this productsArray   this productService getProducts   subscribe

User · Answer

For me the error was caused by wrong type hint of url string  I used  export class TodoService      apiUrl  String    https   jsonplaceholder typicode com todos     wrong uppercase String    constructor private httpClient  HttpClient         getTodos    Observable lt Todo   gt        return this httpClient get lt Todo   gt  this apiUrl         where I should have used export class TodoService      apiUrl  string    https   jsonplaceholder typicode com todos     lowercase string     constructor private httpClient  HttpClient         getTodos    Observable lt Todo   gt        return this httpClient get lt Todo   gt  this apiUrl

[angular] Typescript: Type X is missing the following properties from type Y length, pop, push, concat, and 26 more. [2740]

Examples related to angular

Examples related to typescript

Examples related to typescript-typings