javascript - axios 的 DefinelyTyped 问题

Question

我已经使用 npm 和typings 安装了 axios。

现在，要在 TypeScript 中使用它，我需要向它传递一个类型 (T)。问题在于，这个T既用于请求的接口(interface)，又用于响应的接口(interface)，这没有任何意义，因为显然服务器返回的数据类型与它接收到的数据类型不同。

interface ServerRepsonse {
    userID: string;
}

interface ServerRequest {
    username: string;
    password: string;
}

var body = {
        username: "username",
        password: "password"
    };

let response = await axios<ServerRequest>({
            method: 'POST',
            url: "http://localhost:3000/users",
            data: body
        });

alert(response.data.userID);

如您所见，在此示例中，reponse.data.userID 将被标记为错误。如果我改为传递 ServerResponse 接口(interface)，那么“data: body”将被标记为错误。

这是axios的index.d.ts文件中的问题吗？我该如何解决？我不想使用“任何”。

Answer 1

当前的实现似乎没有完全使用泛型。但您可以扩展它。

安装 axios 类型

npm i @types/axios

然后创建一个文件 typings\axios.d.ts

declare namespace Axios {
  interface AxiosInstance {
    <TRequest, TResponse>(config: AxiosXHRConfig<TRequest>): IPromise<AxiosXHR<TResponse>>;
    post<TRequest, TResponse>(url: string, data?: TRequest, config?: AxiosXHRConfigBase<TResponse>): IPromise<AxiosXHR<TResponse>>;
  }
}

这将允许您使用:

import * as axios from 'axios';

interface DataToSend {
    name: string;
}
interface DataToReceive {
    status: number;
}

axios<DataToReceive>({ url: '' }).then(r => r.data.status);

axios<DataToSend, DataToReceive>({
    url: '',
    method: 'POST',
    data: { name: '' },
}).then(r => r.data.status);

axios.post<DataToSend, DataToReceive>('', { name: 'test' })
    .then(r => r.data.status);