javascript - TypeScript y tipo de respuesta de Axios
Estoy usando axios para comunicarme con mis APIs, y lo envolví con una clase HTTClient para no depender mucho de él:
import axios, { AxiosInstance } from 'axios';
import https from 'https';
import { stringify } from 'qs';
class HttpClient {
private static instance: AxiosInstance;
constructor() {
const axiosInstance = axios.create({
baseURL: process.env.ENDPOINT_API,
httpsAgent: new https.Agent({
rejectUnauthorized: false,
}),
});
axiosInstance.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
axiosInstance.defaults.paramsSerializer = this.paramsSerializer;
axiosInstance.defaults.withCredentials = true;
axiosInstance.interceptors.response.use((response) => response.data);
HttpClient.instance = axiosInstance;
}
public static getInstance = () => {
if (!HttpClient.instance) new HttpClient();
return HttpClient.instance;
};
private paramsSerializer = (params) => stringify(params, { arrayFormat: 'repeat' });
}
export default HttpClient.getInstance();
Como notarás, cuando lo hago
axiosInstance.interceptors.response.use((response) => response.data);
Estoy devolviendo el contenido de data. El problema es que ahora el tipo de la respuesta es incorrecto.
interface TypedResponse {
name: string
}
const response = await HttpClient.put<TypedResponse>(`/`);
const response.name // Property 'name' does not exist on type 'TypedResponse'.ts(2339)
TypeScript está pensando que name está dentro de data, así:
// Response
{
data: {
name: string;
}
}
Lo cual, por supuesto, está mal, ya que ya no estoy devolviendo data:
// Response
{
name: string
}
¿Cómo puedo cambiar el tipo de respuesta predeterminado de axios en mi clase?