Utilizing Typescript for Axios Response

Question

Utilizing Typescript for Axios Response

Incorporating Typescript into my project, I encountered a tedious issue while making an API call using axios. The problem lies within handling nested data properly.

Despite my belief that I have correctly typed everything, I persistently face a Typescript error displaying

Unsafe return on an any typed value

and

Unsafe member access .data on an any value

particularly in the line return response.data.data[0]; within my try/catch block. Can someone shed light on why my types are not functioning as expected?

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');
  }
}

typescript axios

Answer 1

Answer №1

After revising my approach, I ended up utilizing the axios.get method which resolved all issues.

export interface Parameters {
  currency: string;
  id: string;
  exchangeRate: string;
}

export interface Result {
  currency: string;
  id: string;
  exchangeRate: {
    currency: string;
    type: string;
  }
} 

async function fetchData({ currency, id, exchangeRate }: Parameters): Promise<AxiosResponse<Result>['data']> {
  try {
    const response = await axios.get<{ data: Result[] }>('/api/url');
    return response.data.data[0];
  } catch (error) {
    throw new Error('An error occurred while fetching data.');
  }
}

Answer 2

After revising my approach, I ended up utilizing the axios.get method which resolved all issues.

export interface Parameters {
  currency: string;
  id: string;
  exchangeRate: string;
}

export interface Result {
  currency: string;
  id: string;
  exchangeRate: {
    currency: string;
    type: string;
  }
} 

async function fetchData({ currency, id, exchangeRate }: Parameters): Promise<AxiosResponse<Result>['data']> {
  try {
    const response = await axios.get<{ data: Result[] }>('/api/url');
    return response.data.data[0];
  } catch (error) {
    throw new Error('An error occurred while fetching data.');
  }
}

Answer 3

Answer №2

Not sure what exactly you're searching for, but this might provide some assistance. Check out this 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); // This function expects <AxiosResponse<Response>> as the return type.
        return response;
      } catch (err) {
        throw new Error('error');
      }
    }

Answer 4

Not sure what exactly you're searching for, but this might provide some assistance. Check out this 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); // This function expects <AxiosResponse<Response>> as the return type.
        return response;
      } catch (err) {
        throw new Error('error');
      }
    }

Utilizing Typescript for Axios Response

Answer №1

Answer №2

Similar questions

Angular 6: Sending Back HTTP Headers

Jest is having trouble recognizing a custom global function during testing, even though it functions properly outside of testing

react-vimeo not firing onPause and onPlay events

The data type 'StaticImageData' cannot be converted to type 'string'

What steps can be taken to address an undefined error before the execution of useEffect?

Is there a way to loop through objects in Angular 2

When using expressjs and typescript, you may encounter an error stating that the type 'typeof <express.Router>' cannot be assigned to the parameter type 'RequestHandlerParams'

Issue with rendering the search component due to a conflict with validate.js

I'm looking for a way to create a Redux thunk action creator that will return a promise. How

Laravel Sanctum - Access Denied post login

Is there a way to incorporate new members into a pre-existing type in TypeScript?

combine string inputs when ng-click is triggered

Tips for effectively utilizing Mongoose models within Next.js

Surprising fraction of behavior

Harness the power of TypeScript in a single test file with jest's expect.extend() method

Using dangerouslySetInnerHTML in ReactJS can potentially strip away data attributes

Dealing with server-side errors while utilizing react-query and formik

Extending Vue components with TypeScript for enhanced styling features

Custom type checker that validates whether all properties of a generic object are not null or undefined

Tips for integrating tsconfig with webpack's provide plugin