Проблема с DefenitelyTyped of axios

Question

Я установил axios как с npm, так и с типом.

Теперь, чтобы использовать его в TypeScript, мне нужно передать ему тип (T). Проблема в том, что этот T используется как для интерфейса запроса, так и для интерфейса ответа, что не имеет никакого смысла, потому что, очевидно, сервер не возвращает тот же тип данных, который он получает.

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» будет помечен как ошибка.

Это проблема в файле index.d.ts axios? Как я могу это решить? Я не хочу использовать «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);