时间戳

首页 > 解决方案 > 在 Angular 12 中使用 Observable 时出现 TS(2322) 错误

angular - 在 Angular 12 中使用 Observable 时出现 TS(2322) 错误

问题描述

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

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

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

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 的类型安全规则引起的。我怎么解决这个问题？

预先感谢您的帮助。

标签： angulartypescriptrxjsobservable

解决方案

好吧，错误是可以自我描述的。Movies.find()如果找到或undefined以其他方式返回电影。最简单的适应方法是完全期望：

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

或者，您可以检查 的结果find()，如果它为 null - 返回new Movie()或抛出异常

推荐阅读