vue 3 中 axios 结合 typescript 实现请求参数泛型约束,核心是通过泛型将请求入参类型与响应数据类型绑定到具体 api,配合工具类型精简配置、统一响应格式,实现精确推导、自动提示和编译校验。

Vue 3 中 Axios 结合 TypeScript 实现请求参数泛型约束,核心是让每个请求函数的入参类型和响应数据类型都可精确推导、自动提示、编译校验。不是简单套用 any 或写死接口,而是通过泛型把“请求要传什么”和“返回会拿什么”绑定到具体 API 上。
定义请求参数接口 + 泛型化请求函数
先为每个接口明确输入结构,再用泛型注入到封装函数中:
- 比如用户详情接口需要传
id: number,就定义:
interface GetUserParams { id: number } - 请求函数不写死参数类型,而是接收一个泛型 T 表示参数类型:
const request =(config: AxiosRequestConfig ): Promise > => { ... } - 调用时显式传入参数类型,TS 就能校验传参是否合法:
request({ url: '/user', method: 'GET', params: { id: 123 } })
此时若误写params: { userId: 'abc' },编辑器立刻报错。
用工具类型精简配置项声明
避免每次手动写全 AxiosRequestConfig,用 TS 工具类型提取关键字段并控制必选/可选:

