Angular 16中“results属性不存在于MovieResponse[]类型”错误的原因与修复

问题场景 #

我正在用Angular 16、TypeScript和The Movie Database（TMDB）开发单页应用，相关代码如下：

电影服务文件 app\services\movie-service.service.ts #

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { environment } from '../../environments/environment';
import { HttpClient } from '@angular/common/http';
import { MovieResponse, Movie } from '../models/Movie';

@Injectable({
  providedIn: 'root'
})

export class MovieService {

  constructor(private http: HttpClient) { }

  public getMovies(): Observable<MovieResponse[]> {
    return this.http.get<MovieResponse[]>(`${environment.apiUrl}/movie/now_playing?api_key=${environment.apiKey}`);
  }
}

模型文件 app\models\Movie.ts #

export interface Movie {
    id?: number;
    adult?: boolean;
    backdrop_path?: string;
    poster_path?: string;
    title?: string;
    tagline?: string;
    overview?: string;
    genre_ids?: any;
    original_title?: string;
    release_date?: string;
    runtime?: number;
    vote_average?: string;
}

export interface MovieResponse {
    results?: Movie[];
    total_pages?: number;
    total_results?: number;
    page?: number;
}

首页组件 HomePageComponent #

import { Component } from '@angular/core';
import { MovieResponse, Movie } from '../../models/Movie';
import { MovieService } from '../../services/movie-service.service';


@Component({
  selector: 'app-home-page',
  templateUrl: './home-page.component.html',
  styleUrls: ['./home-page.component.scss']
})
export class HomePageComponent {

  public movieResponse!: MovieResponse[];

  public movies: Movie[] = [];

  constructor(private movieService: MovieService) { }

  public getMovies() {
    this.movieService.getMovies().subscribe((response) => {
      this.movieResponse = response;

      console.log(this.movieResponse);

      this.movies = this.movieResponse.results;
    })
  }

  ngOnInit() {
    this.getMovies();
  }
}

运行时，console.log(this.movieResponse)能正确打印出包含results数组、total_pages等字段的响应，但执行this.movies = this.movieResponse.results时触发TypeScript错误：

TS2339: Property 'results' does not exist on type 'MovieResponse[]'.

问题解答 #

1. 错误原因 #

• 类型定义不匹配：你在MovieService的getMovies方法里把返回类型声明为Observable<MovieResponse[]>（MovieResponse数组），但TMDB的now_playing接口实际返回的是单个MovieResponse对象，不是数组。
• 组件变量类型错误：组件里把movieResponse定义为MovieResponse[]类型，TypeScript会认为它是数组，而数组本身没有results属性，因此触发报错。

2. 可靠修复方法 #

分两步修正类型定义：

第一步：修正服务中的返回类型

修改movie-service.service.ts里的getMovies方法，将返回类型从Observable<MovieResponse[]>改为Observable<MovieResponse>：

public getMovies(): Observable<MovieResponse> {
  return this.http.get<MovieResponse>(`${environment.apiUrl}/movie/now_playing?api_key=${environment.apiKey}`);
}

第二步：修正组件中的变量类型

修改HomePageComponent里的movieResponse类型为单个MovieResponse对象，同时添加空值处理避免潜在报错：

public movieResponse!: MovieResponse;

public getMovies() {
  this.movieService.getMovies().subscribe((response) => {
    this.movieResponse = response;
    console.log(this.movieResponse);
    // 用|| []确保当results不存在时，movies不会为undefined
    this.movies = this.movieResponse.results || [];
  })
}

这样TypeScript就能正确识别movieResponse具备results属性，同时空值处理能避免后续页面渲染时可能出现的异常。

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