TypeScript 中使用 axios 库请求接口时的类型推断问题及解决方法

在前端开发中，我们经常会使用 axios 库来请求后端接口。而在使用 TypeScript 进行开发时，可能会遇到一些类型推断的问题。本文将介绍在 TypeScript 中使用 axios 库请求接口时可能会遇到的类型推断问题，并提供解决方法。

问题描述

在使用 axios 库请求接口时，我们通常会定义一个接口来描述返回的数据格式。例如：

interface User {
  id: number;
  name: string;
  age: number;
}

然后我们会使用 axios 发送请求：

axios.get('/api/user').then((response) => {
  const user: User = response.data;
});

但是，在 TypeScript 中，编译器会提示以下错误：

Type 'unknown' is not assignable to type 'User'.

这是因为 response.data 的类型是 unknown，而不是我们期望的 User 类型。

解决方法

1. 使用类型断言

一种解决方法是使用类型断言，将 response.data 的类型断言为 User 类型：

axios.get('/api/user').then((response) => {
  const user: User = response.data as User;
});

这样就可以解决类型推断的问题了。但是，如果接口的格式发生了变化，我们可能需要手动修改类型断言的代码。

2. 使用泛型

另一种解决方法是使用泛型。我们可以将 axios.get 的类型参数设置为 User 类型：

axios.get<User>('/api/user').then((response) => {
  const user: User = response.data;
});

这样，编译器就会正确地推断出 response.data 的类型。

3. 自定义 Axios 实例

还有一种解决方法是自定义 Axios 实例。我们可以创建一个 Axios 实例，然后为其添加一个响应拦截器，在拦截器中将 response.data 的类型设置为我们期望的类型。例如：

// javascriptcn.com 代码示例
const axiosInstance = axios.create();

axiosInstance.interceptors.response.use((response) => {
  response.data = response.data as User;
  return response;
});

axiosInstance.get('/api/user').then((response) => {
  const user: User = response.data;
});

这种方法的优点是可以对所有的请求都进行处理，避免了重复的代码。

总结

在 TypeScript 中使用 axios 库请求接口时，可能会遇到类型推断的问题。本文介绍了三种解决方法：使用类型断言、使用泛型和自定义 Axios 实例。使用泛型是最简单的方法，也是最推荐的方法。希望本文能够帮助读者解决 TypeScript 中使用 axios 库请求接口时的类型推断问题。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6572ce0bd2f5e1655dbc63d9