RxJS开发报错：Observable<Course[]>无法赋值给Observable<Course>如何解决

错误根因 #

• 代码中使用的Array.filter()方法返回值为符合筛选规则的元素组成的数组，对应类型为Course[]，而方法声明的返回值为Observable<Course>，要求流内携带单个Course类型对象，二者类型不匹配触发TypeScript校验报错。

修复方案 #

方案1（推荐：适配按ID查询单条课程的需求） #

将filter替换为Array.find()，该方法会返回第一个匹配筛选条件的元素，类型为Course | undefined，补充未匹配到数据的异常处理即可符合类型要求，修复后代码如下：

getCourseById(id: number): Observable<Course> {
  return this.http.get<Course[]>('the-api').pipe(
    map(courses => {
      const targetCourse = courses.find(course => course.id === id);
      if (!targetCourse) {
        throw new Error(`未查询到id为${id}的对应课程`);
      }
      return targetCourse;
    })
  )
}

方案2（适配返回数组的场景） #

如果业务需要返回所有符合条件的课程数组，直接修改方法的返回值类型声明即可：

getCourseById(id: number): Observable<Course[]> {
  return this.http.get<Course[]>('the-api').pipe(
    map(courses => courses.filter(course => course.id === id))
  )
}

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