Angular服务代码报错：Observable<Movie | undefined>无法赋值给Observable<Movie>

你遇到的TypeScript类型错误，核心原因是**Array.find()方法的特性**：当遍历数组找不到匹配movie.id === id的元素时，它会返回undefined。但你的getMovie方法声明返回的是Observable<Movie>，实际返回的却是Observable<Movie | undefined>，在TypeScript的严格类型检查（默认开启）下，这种类型不匹配就会触发报错。

课程里的代码能运行，大概率是因为课程使用的TypeScript版本较低，或者项目配置中关闭了strictNullChecks（严格空值检查）选项，让TypeScript允许undefined赋值给非可选类型。

以下是几种可行的修复方案，你可以根据业务需求选择：

方案1：修改返回类型，兼容undefined #

直接把方法的返回类型改为Observable<Movie | undefined>，如实反映可能的返回结果：

getMovie(id): Observable<Movie | undefined> {
  return of(Movies.find(movie => movie.id === id));
}

方案2：使用非空断言（谨慎使用） #

如果你能确保传入的id一定存在于Movies数组中，可以用非空断言!告诉TypeScript：这个结果不可能是undefined。但要注意，如果后续传入了不存在的id，运行时会出现问题：

getMovie(id): Observable<Movie> {
  return of(Movies.find(movie => movie.id === id)!);
}

方案3：找不到时抛出错误 #

如果业务逻辑要求“传入的id必须对应存在的电影”，找不到时应该抛出错误，这样返回类型依然保持Observable<Movie>：

import { Observable, of, throwError } from 'rxjs';
// ...其他代码

getMovie(id): Observable<Movie> {
  const movie = Movies.find(movie => movie.id === id);
  if (movie) {
    return of(movie);
  }
  return throwError(() => new Error(`Movie with id ${id} not found`));
}

方案4：关闭严格空值检查（不推荐） #

如果想和课程的环境保持一致，可以修改tsconfig.json中的配置，关闭严格空值检查，但这会降低TypeScript的类型安全性，不建议长期使用：

{
  "compilerOptions": {
    "strictNullChecks": false,
    // ...其他配置
  }
}

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