axios 的 DefenitelyTyped 问题

Question

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

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

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 接口，那么 "data: body" 将被标记为错误。

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

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);

axios 的 DefenitelyTyped 问题

Issue with the DefenitelyTyped of axios

javascript

generics

typescript

definitelytyped

axios