typescript - 如何使用 ...rest ...spread 正确键入函数包装器以获取重载？

Question

我正在尝试为Axios npm package中的axios函数制作一个包装器.

该函数可以被调用为

axios(config: AxiosRequestConfig) 
// When URL is contained inside config

或

axios(
   url: string,
   config: AxiosRequestConfig, 
)
// when it's not

我的简单包装如下所示:

import axios from 'axios'

type AxiosArguments = Parameters<typeof axios>
const axiosWrapper = async (...args: AxiosArguments) => await axios(...args)

export default axiosWrapper

但是，当我尝试时，TypeScript 不会承受过载

export const fetchSomething = () => wrappedAxios({
    url: '/url/to/something/',
    method: 'get',
})

我收到错误:

Error:(5, 60) TS2345: Argument of type '{ url: string; }' is not assignable to parameter of type 'string'.

我该如何让它发挥作用？我更愿意学习一般情况下执行此操作，而不是仅仅从 Axios 导入正确的类型。

Answer 1

我可能会使用function overload :

async function axiosWrapper(config: AxiosRequestConfig): Promise<AxiosReturnValue>;
async function axiosWrapper(url: string, config: AxiosRequestConfig): Promise<AxiosReturnValue>;
async function axiosWrapper(urlOrConfig: string|AxiosRequestConfig, config?: AxiosRequestConfig): Promise<AxiosReturnValue> {
    if (typeof urlOrConfig === "string") {
        // The version with a URL
        return /*...*/;
    }
    // The version without
    return /*...*/;
}

AxiosReturnValue是上面的占位符。您希望它是您从包装器返回的任何内容。如果您要返回什么axios返回时，使用与其使用的相同的返回类型。 (如果这是 Promise 类型，请直接使用它，而不是在 Promise 内。例如，如果 axios 的返回类型是 Promise<Something> ，则使用 Promise<Something> 而不是 Promise<Promise<Something>> 。)

它looks like axios 使用通用返回类型 AxiosResponse<T> 。如果是这样，那么:

async function axiosWrapper<T>(config: AxiosRequestConfig): Promise<AxiosResponse<T>>;
async function axiosWrapper<T>(url: string, config: AxiosRequestConfig): Promise<AxiosResponse<T>>;
async function axiosWrapper<T>(urlOrConfig: string|AxiosRequestConfig, config?: AxiosRequestConfig): Promise<AxiosResponse<T>> {
    if (typeof urlOrConfig === "string") {
        // The version with a URL
        return /*...*/;
    }
    // The version without
    return /*...*/;
}