Angular 12 使用Observable时报TS(2322)类型错误如何解决

报错原因 #

TypeScript 从较新版本开始默认开启严格空值检查规则，Array.find() 方法本身的返回值类型为 T | undefined（匹配不到对应项时返回undefined）。Angular 8 配套的 TypeScript 版本类型检查宽松，不会校验这种隐式空值情况，升级到 Angular 12 后高版本 TS 检测到你声明的返回值是Observable<Movie>，但实际返回了可能包含undefined的可观察对象，就触发了ts(2322)报错。

解决方案 #

你可以根据自己的业务场景选择以下任意一种方案：

方案1：使用非空断言（最简单，适用确定传入ID一定合法的场景） #

如果你可以保证调用getMovie()时传入的ID一定存在于Movies数组中，直接给find的返回值加非空断言符!，告诉TS你确定该值不可能为undefined即可：

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

方案2：添加兜底默认值 #

如果可能出现非法ID，你可以给匹配结果加兜底默认值，确保返回值永远是Movie类型：

/* movie.service.ts */
getMovie( id: number ) : Observable<Movie>
{
    const targetMovie = Movies.find( movie => movie.id === id );
    // 匹配不到时返回默认Movie对象，??是空值合并运算符
    return of(targetMovie ?? {
        id: id,
        name: '未找到对应影片',
        imageUrl: 'default.jpg'
    });
}

方案3：修改返回值类型适配空值情况 #

如果你希望调用方自行处理空值逻辑，可以直接修改方法的返回类型声明：

/* movie.service.ts */
// 返回值声明为可能返回undefined的可观察对象
getMovie( id: number ) : Observable<Movie | undefined>
{
    return of( Movies.find( movie => movie.id === id ) );
}

调用方接收时需要先判断返回值是否存在再做后续操作。

方案4：匹配不到时抛出错误 #

如果非法ID属于异常情况，你可以选择抛出错误由调用方的错误捕获逻辑处理：

/* movie.service.ts */
import { of, throwError } from 'rxjs';

getMovie( id: number ) : Observable<Movie>
{
    const targetMovie = Movies.find( movie => movie.id === id );
    if(targetMovie) {
        return of(targetMovie);
    }
    return throwError(() => new Error(`ID为${id}的影片不存在`));
}

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