Angular 12报TS2769无匹配重载错误 按ID查询学生详情如何修复

TS2769报错本质是Observable发射值的类型，和subscribe回调接收的参数类型不匹配，你的代码存在三处类型/结构不匹配的问题：

• 服务层返回类型定义错误：你声明getStudentById返回Observable<IStudent[]>（学生数组），但实际接口返回的是带嵌套结构的单个对象，和数组完全不匹配
• 响应结构未定义类型：接口返回的外层有results包裹，内层是student字段对应单个学生对象，你没有定义匹配这个结构的类型，直接用IStudent接收整个响应体，类型完全不对应
• 取值路径错误：代码里写的data.results.students多了末尾的s，实际返回的字段是student

1. 定义匹配接口返回结构的类型 #

先新增一个响应结构接口：

// 可以和IStudent写在同一个文件里
export interface IStudentResponse {
  results: {
    student: IStudent
  }
}

2. 修正服务层的返回类型声明 #

调整getStudentById方法的泛型和返回值类型，和实际接口返回对齐：

import { IStudentResponse } from '你的接口文件路径';

// 修改后的服务方法
getStudentById(id: number): Observable<IStudentResponse> {
  return this.http.get<IStudentResponse>(this.api.baseURL + 'students/fetchbyid/' + id, this.httpOptions);
}

3. 修正组件内subscribe的参数类型和取值路径 #

把回调参数的类型改成刚定义的IStudentResponse，同时修正取值的字段名：

import { IStudentResponse } from '你的接口文件路径';

loadStudentById() {
  this.studentService.getStudentById(this.id).subscribe(
    (data: IStudentResponse) => {
      console.log(data);
      this.student = data.results.student;
    },
    error => {
      this.store.dispatch(loadErrorMessagesSuccess(error));
    }
  );
}

修改完成后类型完全对齐，报错就会消失。

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