Angular 18调用TMDB接口遇TypeScript类型错误求助

问题根源 #

你的HttpClient.get返回的是Observable<HttpEvent<MovieResponse>>而非Observable<MovieResponse>，这意味着流中可能包含请求发送、进度等事件，而非直接的响应体，因此TypeScript不允许直接访问results属性。

解决方案 #

1. 移除或调整observe选项（推荐） #

如果不需要监听请求的生命周期事件，检查你的options配置：

• 若其中包含observe: 'events'，直接移除该配置，或者显式设置observe: 'body'（这是默认值）。
• 修改后，http.get<MovieResponse>会直接返回响应体的Observable，此时map中的data就是MovieResponse类型，可直接访问results。

修正后的代码：

private trendingMovies$ = this.http.get<MovieResponse>(`${this.apiUrl}trending/movie/day`, this.options).pipe(
  map((data) => {
    // 注意返回map后的结果，避免数据丢失
    return data.results.map((movie: Movie) => ({
      ...movie,
    }) as Movie);
  }),
  shareReplay(1),
);

2. 保留事件监听时过滤响应体 #

如果确实需要监听请求事件，需在流中过滤出HttpResponse类型的事件，再提取响应体：

首先导入所需类型：

import { HttpEventType, HttpResponse } from '@angular/common/http';

然后修改管道操作：

private trendingMovies$ = this.http.get<MovieResponse>(`${this.apiUrl}trending/movie/day`, this.options).pipe(
  // 过滤出响应完成事件，通过类型守卫断言类型
  filter((event): event is HttpResponse<MovieResponse> => event.type === HttpEventType.Response),
  // 提取响应体
  map((response) => response.body!),
  map((data) => {
    return data.results.map((movie: Movie) => ({
      ...movie,
    }) as Movie);
  }),
  shareReplay(1),
);

额外优化建议 #

• 接口定义中使用原始类型number而非包装对象Number，避免潜在类型问题：

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;
}

内容的提问来源于stack exchange，提问作者James