I'm currently integrating the TMDB trending movies endpoint into my Angular 18 application and storing the data in a variable.
Here is a snippet of the code:
private trendingMovies$ = this.http.get<MovieResponse>(${this.apiUrl}trending/movie/day, this.options).pipe(
map((data) => {
data.results.map((movie: Movie) => ({
...movie,
}) as Movie)
}),
shareReplay(1),
);
However, I'm encountering a TypeScript error regarding the 'results' property on the data object within the map operator:
Property 'results' does not exist on type 'HttpEvent<MovieResponse>'.
Property 'results' does not exist on type 'HttpSentEvent'.ts(2339)
I have defined an interface for the response and for the individual movie object within the array of results:
export interface MovieResponse {
page: Number;
results: Movie[];
total_pages: Number;
total_results: Number;
}
export interface Movie {
adult: boolean;
backdrop_path: string;
genre_id: Number[];
id: Number;
media_type: string;
original_language: string;
original_title: string;
overview: string;
popularity: Number;
poster_path: string;
release_date: string;
title: string;
video: boolean;
vote_average: Number;
vote_count: Number;
}
I have checked the response using the tap operator and confirmed that it does have a 'results' property, so I'm unsure why I'm getting this TypeScript error. I have tried adding a type to the line in question, but the error persists:
map((data: MovieResponse) => {
Any assistance on resolving this issue would be greatly appreciated.