如何获取axios包的AxiosInstance类型？TypeScript类型校验问题

1. 直接导入AxiosInstance类型 #

axios官方包已导出AxiosInstance接口，你可以直接从axios模块导入，显式声明类属性和方法参数的类型，即可解决TypeScript类型校验错误：

import axios, { AxiosInstance } from "axios";

const api = axios.create({
    baseURL: process.env.REACT_APP_BASE_URL || "http://localhost:8888"
});

class Service {
    // 显式声明mainService的类型为AxiosInstance
    mainService: AxiosInstance = api;

    // 给changeService方法的参数指定AxiosInstance类型
    changeService(api: AxiosInstance) {
        // 注：原代码中`this._service`未在类中声明，此处修正为对应`mainService`；若确实需要`_service`，请先声明其类型
        this.mainService = api;
    }
}

如果你的类确实需要_service私有属性，需先声明类型：

class Service {
    mainService: AxiosInstance = api;
    private _service: AxiosInstance = api;

    changeService(api: AxiosInstance) {
        this._service = api;
    }
}

2. 更优方案：构造函数注入依赖 #

从可维护性和可测试性角度，推荐通过构造函数注入AxiosInstance，类的依赖更清晰，测试时可轻松传入Mock实例：

import axios, { AxiosInstance } from "axios";

// 定义默认API实例
const defaultApi = axios.create({
    baseURL: process.env.REACT_APP_BASE_URL || "http://localhost:8888"
});

class Service {
    private service: AxiosInstance;

    // 构造函数接受AxiosInstance参数，默认使用defaultApi
    constructor(api: AxiosInstance = defaultApi) {
        this.service = api;
    }

    changeService(api: AxiosInstance) {
        this.service = api;
    }

    // 示例：封装业务请求方法
    async getUser(id: number) {
        return this.service.get(`/users/${id}`);
    }
}

这种方式的优势：

• 类职责单一，依赖外部传入，符合依赖倒置原则
• 单元测试时可替换为Mock的AxiosInstance，无需依赖真实API

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