Скачать или смотреть How to Type a Generic Component in React with Axios in TypeScript

Learn how to create a typed generic component in React using TypeScript, designed to handle Axios responses effectively and prevent common errors.
---
This video is based on the question https://stackoverflow.com/q/69454014/ asked by the user 'SektorDV' ( https://stackoverflow.com/u/13221170/ ) and on the answer https://stackoverflow.com/a/69456168/ provided by the user 'Jerome' ( https://stackoverflow.com/u/9168390/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: How can I type a generic component that takes as one of its arguments a function that returns an AxiosResponse?

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
How to Type a Generic Component in React with Axios in TypeScript

Creating a generic component that interfaces neatly with Axios responses is a common challenge for developers, especially when working with TypeScript. This post walks you through the steps to type a generic component and handle Axios nicely without running into type errors.

The Challenge

You may find yourself in a situation where you need to build a component that not only renders based on the data returned from an Axios request but also allows for reusable logic. The key here is to ensure that the interface for this component is correctly set up to handle the asynchronous nature of requests and the React rendering cycle.

The initial attempt usually includes a setup like this:

[[See Video to Reveal this Text or Code Snippet]]

However, as you’ve discovered, this can lead to frustrating type errors such as Property 'data' does not exist on type 'never'. This problem arises because the type unclarity leads TypeScript to infer never when trying to destructure the response.

The Solution

Let’s break down how we can tackle this issue effectively and make our generic component properly typed.

Step 1: Define a Flexible Interface

We can make use of generics in TypeScript to define the IProps interface. This way, you can specify the types you expect for your Axios response more accurately.

Here's how the revised interface looks:

[[See Video to Reveal this Text or Code Snippet]]

T: This generic type will represent the data structure returned by the Axios response.

U: This will correspond to the arguments you want to pass to the request function.

V: This will be used for the arguments passed to the render function.

Step 2: Implement the FetchBox Component

Next, you can implement the FetchBox component where you specify the types you’re expecting. Here’s an implementation example:

[[See Video to Reveal this Text or Code Snippet]]

Step 3: Using the FetchBox Component

When you use the FetchBox, simply provide it an Axios request function and the render prop. An example usage could look like this:

[[See Video to Reveal this Text or Code Snippet]]

Conclusion

By applying generics, you ensure your types remain flexible, accurate, and free from the never type issues. This method allows your React components to be more reusable and maintainable, particularly when handling asynchronous data fetching with Axios.

Feel free to experiment with other types and implementations to see how you can further enhance your component's functionality!