Angular项目http请求返回Object与IUser类型不匹配报错如何解决？

报错原因 #

Angular HttpClient的无泛型post方法默认返回类型为Object，你直接在后续map操作符中声明入参为IUser类型时，TypeScript无法确认上游Object类型符合IUser的结构约束，因此抛出类型不匹配错误。

解决方案 #

给http.post方法添加IUser泛型，显式指定接口返回值的类型即可修复报错。
如果不需要在登录接口调用后返回转换后的数据，可将map替换为更适合执行副作用操作的tap操作符，更符合RxJS语义规范。

修改后的核心代码 #

// Account.service.ts 顶部导入tap操作符
import { map, tap } from 'rxjs/operators';

// login方法修改如下
login(values: any) {
  // 给post方法添加<IUser>泛型声明返回值类型
  return this.http.post<IUser>(this.baseUrl + 'account/login', values).pipe(
    tap((user: IUser) => {
      if (user) {
        localStorage.setItem('token', user.token);
        this.currentUserSource.next(user)
      }
    })
  );
}

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