Angular登录服务Observable<ArrayBuffer>无法分配给Observable<HttpResponse<User>>如何修复

类型'Observable'不可分配给类型'Observable<HttpResponse>'。类型'ArrayBuffer'缺少'HttpResponse'的以下属性：body、type、clone、headers及其他4个属性。

错误根因 #

HttpClient.post方法的配置项中observe参数传值错误，你传入了全局Response构造函数对象，Angular官方要求observe指定返回完整响应对象时，需要传入固定字符串字面量'response'。传值不符合要求时TS会自动将返回值推断为ArrayBuffer类型，和你声明的返回值类型不匹配触发报错。

具体修改步骤 #

• 修正登录服务中login方法的参数配置，修改后代码如下：

login(user:User): Observable<HttpResponse<User>>{
  // 把 {observe: Response} 替换为 {observe: 'response'}
  return this.http.post<User>(`${this.apiUrl}/login`, user, {observe: 'response'});
}

如果开启了TS严格类型校验，可添加as const固定字面量类型避免类型推断异常：

return this.http.post<User>(`${this.apiUrl}/login`, user, {observe: 'response' as const});

• 确认你已经在服务文件头部导入了所需依赖类型：

import { HttpClient, HttpResponse, HttpErrorResponse } from '@angular/common/http';
import { Observable } from 'rxjs';

• 组件调用代码无需额外修改，放开注释的用户信息缓存逻辑时，可补充类型判空避免空值问题：

if(response.body) {
  this.authService.addUserToCache(response.body);
}

修改后返回值类型会自动匹配Observable<HttpResponse<User>>，报错即可消除。

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