Typescript With Axios Response

Question

Working with Typescript while making an API call with axios and have come across a nested data scenario.

Although I believe to have it typed correctly, I keep receiving a Typescript error stating Unsafe return on an any typed value and Unsafe member access .data on an any value for the return response.data.data[0]; line of my try/catch. Can someone provide some clarity around why my types aren't working as I "think" they are?

export interface Source {
  curr: string;
  uuid: string;
  rate: string;
}

export interface Response {
  data: {
    data: Array<Source>;
  };
}

async function getSource({ curr, uuid, rate }: Source): Promise<AxiosResponse<Response>> {
  const requestConfig: AxiosRequestConfig = {
    method: 'get',
    url: '/url',
  };

  try {
    const response = await axios(requestConfig);
    return response.data.data[0];
  } catch (err) {
    throw new Error('error');
  }
}

axios(requestConfig) returns AxiosPromise<any>, so response.data is of type any. — Denis Frezzato
– Denis Frezzato, Commented May 5, 2021 at 15:19

proph3t · Accepted Answer · 2021-05-05 17:07:02Z

6

After some re-work, I landed on using axios.get and was able to get it all worked out.

export interface Args {
  curr: string;
  uuid: string;
  rate: string;
}

export interface Response {
  curr: string;
  uuid: string;
  rate: {
    curr: string;
    type: string;
  }
} 

async function getSource({ curr, uuid, rate }: Args): Promise<AxiosResponse<Response>['data']> {
  try {
    const response = await axios.get<{ data: Response[] }>('/url');
    return response.data.data[0];
  } catch (err) {
    throw new Error('error');
  }
}

answered May 5, 2021 at 17:07

proph3t

9752 gold badges7 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Syed Mohib Uddin · Accepted Answer · 2021-05-05 17:21:44Z

0

Don't know what exactly you are looking for but this might help you. Playground link: Playground

async function getSource({ curr, uuid, rate }: Source): Promise<AxiosResponse<Response>> {
      const requestConfig: AxiosRequestConfig = {
        method: 'get',
        url: '/url',
      };
    
      try {
        const response: AxiosResponse<Response> = await axios(requestConfig); //funtion expects <AxiosResponse<Response>> as return.
        return response;
      } catch (err) {
        throw new Error('error');
      }
    }

answered May 5, 2021 at 17:21

Syed Mohib Uddin

7167 silver badges16 bronze badges

Collectives™ on Stack Overflow

Typescript With Axios Response

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related