TypeScript项目中Axios post请求返回值类型报错如何解决？

你封装的Http类中post方法的泛型设计存在混淆，将请求体类型和响应体类型公用了同一个泛型参数T，且调用时错误将请求体类型UserRegistrationModel传给了代表响应体类型的泛型位，导致TS误认为接口返回值就是UserRegistrationModel类型，自然找不到accessToken字段。

步骤1：调整封装的post方法泛型定义（可选，建议优化） #

先区分开请求体和响应体的泛型参数，修改http.ts中的post方法签名，后续所有接口调用的类型标注会更清晰：

// 泛型顺序：<响应体类型, 请求体类型, 响应包装类型>
post<T = any, D = any, R = AxiosResponse<T>>(
  url: string,
  data?: D,
  config?: AxiosRequestConfig
): Promise<R> {
  return this.http.post<T, R, D>(url, data, config);
}

如果你不想调整封装代码，直接跳转到步骤2也能解决当前问题。

步骤2：修改register函数的泛型传参 #

调用http.post时明确传入响应体类型为AuthModel，并标注register函数的返回值类型：

export const register = async (user: UserRegistrationModel): Promise<AuthModel> => {
  // 如果做了步骤1的封装优化，这里泛型可以写得更直观：http.post<AuthModel, UserRegistrationModel>
  const { data } = await http.post<AuthModel>("/users", user);
  return data;
};

步骤3：调用侧无需额外标注类型 #

修改后TS会自动推导register返回值的类型，调用时不需要手动给data加类型注解，原来的报错就会消失：

register(values)
  .then((data) => {
    // 此处TS自动识别data为AuthModel类型，可正常访问accessToken
    console.log(data.accessToken);
    setLoading(false);
  }).catch(() => {
    setLoading(false);
    setSubmitting(false);
    setStatus("Registration process has broken");
  });

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