TS(2322) 在 Angular 12 中使用 Observable 时出错

Question

我是 Angular 12 框架的新手。我正在学习使用 Observable class 异步查询固定数据的教程；由于在训练中使用 Angular 8 导致的版本差异，我收到 ts(2322) 错误。下面提供了服务、模块和数据源的摘要：

/* movie.service.ts */
export class MovieService
{  
    ...
    getMovie( id: number ) : Observable<Movie>
    {
        /* TS(2322) error occurs in the following line of code. */
        return of( Movies.find( movie => movie.id === id ) );
    }
}

/* movie.datasource.ts */
import { Movie } from "./movie";

export const Movies: Movie[] = [
    { id: 1, name: "movie1", imageUrl: "1.jpg" },
    { id: 2, name: "movie2", imageUrl: "2.jpg" }
];

/* movie.ts */
export class Movie 
{
    id!: number;
    name!: string;
    imageUrl!: string;
}

文件 movie.service.ts 中的 getMovie() 方法输出以下错误：

Type 'Observable<Movie | undefined>' is not assignable to type 'Observable<Movie>'.
  Type 'Movie | undefined' is not assignable to type 'Movie'.
    Type 'undefined' is not assignable to type 'Movie'.ts(2322)

我知道这个问题是由 TypeScript 的类型安全规则引起的。我该如何解决这个问题？

预先感谢您的帮助。

Answer 1

好吧，这个错误是可以自我描述的。如果找到，Movies.find() 可以 return 电影，否则 undefined。最简单的适应方式就是期望：

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

或者，您可以检查 find() 的结果，如果结果为空 - return 一个 new Movie() 或抛出异常

TS(2322) 在 Angular 12 中使用 Observable 时出错

TS(2322) Error When Using Observable In Angular 12

observable

rxjs

typescript

angular