基于Axios的TypeScript父类类型错误问题求助

核心问题分析 #

你的代码存在5个关键类型不兼容问题，导致TypeScript报错：

• catch块捕获的error默认类型是unknown，无法直接传入期望AxiosError<T>的错误处理方法
• handleErrorResponse声明返回AxiosResponse<T>，但手动构造的响应中data为null，与AxiosResponse<T>要求的data: T类型冲突
• PayloadType<T>定义过于严格，强制所有属性值为同一类型T，不符合实际请求payload的多类型键值对场景
• window.axios未添加全局类型声明，TypeScript无法识别其类型
• 类方法返回Promise<T | ErrorResponse>，但错误处理方法返回的AxiosResponse<T>与ErrorResponse类型不兼容

修正后的完整代码 #

import {
    AxiosInstance,
    AxiosResponseHeaders,
    AxiosRequestConfig,
    AxiosResponse,
    AxiosError,
} from 'axios'

// 全局声明window上的axios实例类型
declare global {
    interface Window {
        axios: AxiosInstance
    }
}

// 统一错误响应类型，兼容AxiosResponse结构
type ApiErrorResponse = Omit<AxiosResponse<null>, 'data'> & { data: null }

// 通用Payload类型，支持任意键值对结构
type RequestPayload = Record<string, unknown>

export default class AxiosBase {
    axios: AxiosInstance = window.axios

    async get<T>(route: string): Promise<T | ApiErrorResponse> {
        try {
            const { data } = await this.axios.get<T>(route)
            return data
        } catch (error) {
            return this.handleErrorResponse(error)
        }
    }

    async post<T>(
        route: string,
        payload: RequestPayload
    ): Promise<T | ApiErrorResponse> {
        try {
            const { data } = await this.axios.post<T>(route, payload)
            return data
        } catch (error) {
            return this.handleErrorResponse(error)
        }
    }

    async put<T>(
        route: string,
        payload: RequestPayload
    ): Promise<T | ApiErrorResponse> {
        try {
            const { data } = await this.axios.put<T>(route, payload)
            return data
        } catch (error) {
            return this.handleErrorResponse(error)
        }
    }

    async patch<T>(
        route: string,
        payload: RequestPayload
    ): Promise<T | ApiErrorResponse> {
        try {
            const { data } = await this.axios.patch<T>(route, payload)
            return data
        } catch (error) {
            return this.handleErrorResponse(error)
        }
    }

    async delete<T>(route: string): Promise<T | ApiErrorResponse> {
        try {
            const { data } = await this.axios.delete<T>(route)
            return data
        } catch (error) {
            return this.handleErrorResponse(error)
        }
    }

    private handleErrorResponse(error: unknown): ApiErrorResponse {
        // 先判断是否为AxiosError类型
        if (error instanceof AxiosError) {
            if (error.response) {
                // 服务器返回错误响应，转换为统一错误类型
                return {
                    ...error.response,
                    data: null
                }
            } else if (error.request) {
                // 网络错误，无响应
                return {
                    data: null,
                    status: 0,
                    statusText: 'Network Error',
                    headers: {},
                    config: error.config || {},
                }
            } else {
                // 请求配置错误
                return {
                    data: null,
                    status: -1,
                    statusText: 'Unknown Error',
                    headers: {},
                    config: error.config || {},
                }
            }
        }
        // 非Axios错误，返回通用未知错误
        return {
            data: null,
            status: -2,
            statusText: 'Non-Axios Error',
            headers: {},
            config: {},
        }
    }
}

关键修正点说明 #

1. 全局类型声明：添加declare global块，让TypeScript识别window.axios的类型
2. 统一错误响应类型：定义ApiErrorResponse，基于AxiosResponse<null>改造，确保和成功响应的结构兼容
3. 通用Payload类型：用Record<string, unknown>替代原PayloadType<T>，支持任意类型的请求参数
4. 错误类型处理：在handleErrorResponse中先判断error是否为AxiosError，解决unknown类型的传递问题
5. 返回类型统一：将所有方法的返回类型改为Promise<T | ApiErrorResponse>，确保成功数据和错误响应的类型兼容性

内容的提问来源于stack exchange，提问作者Riza Khan