Type 'BaseResponse<IavailableParameters[]>' is missing the following properties from type 'IavailableParameters[]': length, pop, etc

Question

I'm doing a get call to my API and returning a list of an object. I'm then assigning that data to a property in my DataService so I can use it across components.

Here is the code in my component calling the service:

  getAvailableParameters() {
     this.verificationService.getAvailableParameters(this.itemNumbers).subscribe((res => {
      this.dataService.availableParameters = res;
    }))}

Here is the call to the API

  getAvailableParameters(itemNumbers: string[]){
    return this.http.get<BaseResponse<IavailableParameters[]>>(`${this.baseUrl}api/verification/${itemNumbers}`)
  }

Here is the property in the DataService that should store the object after getAvailableParameters is called:

export class DataService {
  public orderInfo: Iorder;
  public availableParameters: IavailableParameters[];
}

As you can see, the object coming back from the API is also wrapped in a BaseResponse object (which I believe to be the problem but don't know how to resolve), Defined here:

import { Error } from './Error'

export interface BaseResponse<T> {
    isSuccessful: boolean,

    error: Error;

    results: T;
}

This is the exact error I'm getting:

    ERROR in src/app/Components/verification-reply/verification-reply.component.ts(28,7): error TS2740: Type 'BaseResponse<IavailableParameters[]>' is missing the following properties from type 'IavailableParameters[]': length, pop, push, concat, and 26 more.

When I remove the base response type, it works fine, as I'm assuming it doesn't register that as an array or something. This binding method to the data service object worked fine when the object I returned was not an array.

I am inexperienced in this subject and could use some help figuring out how to resolve this error.

Answer 1

When I remove the base response type, it works fine, as I'm assuming it doesn't register that as an array or something.

That is to be expected because BaseResponse<IavailableParameters[]> is not an an array. It is an object with properties isSuccessful , error , and results . The property results is an array IavailableParameters[] .

You need to make sure that whatever type you are providing to this.http.get matches the actual type that is returned from the request. Is it an array of IavailableParameters ? Or an object with isSuccessful , error , and results ?

If you have a variable response of type BaseResponse<IavailableParameters[]> and you are trying to use it as an array IavailableParameters[] , like in the error message that you posted, then just use response.results instead of the entire response object.