Búsqueda de sitios web

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?