如何为Axios封装定义TypeScript类型？类封装实例TS报错解决

报错原因分析 #

你在Request类的构造函数中返回了AxiosInstance实例，但TypeScript要求构造函数返回的对象必须符合Request类型的结构——Request类定义了必填的instance属性，而AxiosInstance并没有这个属性，因此类型不匹配导致报错。

正确解决方案与类型定义 #

推荐采用类封装+代理Axios方法的方式，既保留类的封装性，又保证类型安全，代码示例如下：

import axios, { AxiosInstance, AxiosRequestConfig, AxiosResponse } from 'axios';

// 自定义响应数据类型（根据后端接口结构调整）
interface ApiResponse<T = any> {
  code: number;
  data: T;
  message: string;
}

class Request {
  // 存储Axios实例
  private instance: AxiosInstance;

  constructor(config: AxiosRequestConfig) {
    // 创建Axios实例
    this.instance = axios.create(config);

    // 请求拦截器
    this.instance.interceptors.request.use(
      (reqConfig) => {
        // 示例：添加token
        const token = localStorage.getItem('token');
        if (token) {
          reqConfig.headers!.Authorization = `Bearer ${token}`;
        }
        return reqConfig;
      },
      (error) => Promise.reject(error)
    );

    // 响应拦截器
    this.instance.interceptors.response.use(
      (response: AxiosResponse<ApiResponse>) => {
        // 统一处理响应数据，直接返回业务数据
        return response.data;
      },
      (error) => {
        // 统一处理错误
        console.error('请求错误:', error);
        return Promise.reject(error);
      }
    );
  }

  // 封装通用请求方法
  request<T = any>(config: AxiosRequestConfig): Promise<ApiResponse<T>> {
    return this.instance.request(config);
  }

  // 封装GET请求
  get<T = any>(url: string, config?: AxiosRequestConfig): Promise<ApiResponse<T>> {
    return this.instance.get(url, config);
  }

  // 封装POST请求
  post<T = any>(url: string, data?: any, config?: AxiosRequestConfig): Promise<ApiResponse<T>> {
    return this.instance.post(url, data, config);
  }

  // 可继续封装put、delete等方法
}

// 创建全局请求实例
const request = new Request({
  baseURL: import.meta.env.VITE_API_BASE_URL, // 适配Vite环境变量
  timeout: 10000
});

export default request;

关键说明 #

1. 类型复用：直接导入axios内置的AxiosInstance、AxiosRequestConfig等类型，无需重复定义。
2. 自定义响应类型：通过ApiResponse接口统一规范后端返回格式，让请求返回值类型更明确。
3. 类的职责：构造函数负责初始化Axios实例、配置拦截器，对外暴露封装后的请求方法，避免直接返回Axios实例导致的类型冲突。
4. 类型安全：所有请求方法都指定了泛型参数，支持传入自定义返回数据类型，使用时能获得完整的TS类型提示。

另一种简化方案（直接返回Axios实例） #

如果希望直接返回Axios实例而非类对象，可以通过类型断言绕过类型检查，但这种方式会丢失类的封装性，仅适合简单场景：

import axios, { AxiosInstance, AxiosRequestConfig } from 'axios';

class Request {
  constructor(config: AxiosRequestConfig) {
    const instance = axios.create(config);
    // 配置拦截器...
    return instance as unknown as Request;
  }
}

const request = new Request({ baseURL: '/api' }) as AxiosInstance;
export default request;

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