问题与axios的DefenitelyTyped [英] Issue with the DefenitelyTyped of axios

问题描述

现在，要在TypeScript中使用它，我需要传递给它一个类型（T）。问题是这个T用于请求的接口和响应的接口，这没有任何意义，因为显然服务器不会返回它接收到的相同类型的数据。

  interface ServerRepsonse {
 userID：string; 
} 
 
接口ServerRequest {
 username：string; 
密码：字符串; 
} 
 
 var body = {
用户名：用户名，
密码：密码
}; 
 
 let response =等待axios< ServerRequest>（{
 method：'POST'，
 url：http：// localhost：3000 / users，
数据：body 
}）; 
 
 alert（response.data.userID）; 
  

正如您所看到的，在本例中，reponse.data.userID将被标记为错误。如果我通过了ServerResponse接口，那么data：body将被标记为错误。

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

解决方案

看来目前的实现并没有完全使用泛型。但您可以扩展它。

使用

  npm安装axios类型i @ types / axios 
  

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

  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>> 
 
 
 
 
 $ b 
这将允许你使用：
  import * as axios from'axios'; 
 
接口DataToSend {
名称：string; 
} 
接口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）; 
  
 
I have installed axios both with npm and typings.

Now, to use it in TypeScript, I need to pass to it a type (T). The problem is that this T is used for both the interface of the request and the interface of the response, which does not make any sense, because obviously the server does not return the same type of data that it receives.
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);
As you can see, in this example reponse.data.userID would be marked as error. If I passed the ServerResponse interface instead, then "data: body" would be marked as error.

Is that an issue in the index.d.ts file of axios? How can I solve it? I don't want to use "any".
解决方案
It seems the current implementation does not fully use generics. But you can extend it.

Install axios types with
npm i @types/axios
Then create a file typings\axios.d.ts with
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>>;
  }
}
This will allow you to use:
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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！