My angular client is sending a get request to a server, expecting an observable with an array of objects. However, I am encountering an issue as typescript does not allow me to cast the JSON response to my desired interface.
The JSON object sent by the server looks like this:
export interface Message {
title: string;
body: string;
}
I want to cast the JSON body to the following interface, which should contain an array of objects:
export interface ICommonGameCard {
id: string;
pov: POVType;
title: string;
image_pair?: ICommonImagePair;
best_time_solo: number[];
best_time_online: number[];
}
export enum POVType{Simple, Free};
This is the service responsible for handling the requests:
public getGameCards(povType: POVType): Observable<ICommonGameCard[]> {
return this.http.get<ICommonGameCard[]>(this.BASE_URL + this.GET_ALL_CARDS_URL)
.pipe(
map((res: Response) => return <ICommonGameCard>res.json().body),
catchError(this.handleError<Message>("getUsernameValidation")),
);
}
Unfortunately, my current approach is not working. I am trying to cast the JSON response to the message Interface and access the body where there should be an array of ICommonGameCard.
The error I am facing is:
[ts]
Argument of type 'OperatorFunction<Response, ICommonGameCard>' is not assignable to parameter of type 'OperatorFunction<ICommonGameCard[], ICommonGameCard>'.
Type 'Response' is missing the following properties from type 'ICommonGameCard[]': length, pop, push, concat, and 26 more. [2345]
Can anyone point out what's wrong with my syntax?