Functional React components with generic props in TypeScript

JavaScript React

One of the qualities of our code that we should aim for is reusability. Also, following the Don’t Repeat Yourself principle makes our code more elegant. In this article, we explore writing functional React components with TypeScript using generic props. By doing so, we can create reusable and flexible components.

If you would like to revisit the basics of generics first, check out TypeScript Generics. Discussing naming conventions

Defining the use case

One of the things that contribute to good design is consistency. Implementing it means having lots of similar parts of the application. One of the components that we encounter is a table. Let’s create an example of such. For starters, we make it in a way that it displays a certain entity – posts.

The above code is pretty straightforward. Our   takes an array of posts and displays all of them. Let’s fetch the posts and provide our component with them.

If  you want to know how to write hooks like the one above, check out Race conditions in React and beyond. A race condition guard with TypeScript

The header always displays a predefined set of properties.

The same thing with the row – it displays just the title and the body.

While the above   component is reusable to some extent, it is not very flexible. We can just use it to display posts.

The fact is that there are high chances that we need more tables in our application, not only for posts. Creating a separate one for every type of entity is a solution, but not the most refined one.

Introducing generic components

First, let’s define the requirements for our generic table component. It needs to:

  • accept an array of entities of any type,
  • process an array of properties that we want to display in a table.

Taking all of the above into consideration we can specify our  interface.

First, we have an array of  . Second, we have an array of  . Our property consists of a   and a  .

A crucial thing is that the   needs to match the properties of the object. To do so, we use the   keyword to create a union of string literal types. If you want to learn more, check out More advanced types with TypeScript generics

To better grasp the concept, this is an example of props that implement the above interface:

Defining a generic component

In all of the above examples, we’ve used the generic   provided by React. Unfortunately, it would be rather troublesome to use it with generic interfaces. What we can do is to type the props directly.

If we look into the  interface, it uses   and we can also make use of that.

To type our component, we can choose one of the two approaches. First would be to use an arrow function:

The trailing comma in   is added due to contraints of the   file extension. You can read more in the TypeScript Generics. Discussing naming conventions

The second approach is to use a more classic function:

The latter looks a bit cleaner, in my opinion. Therefore, I will use it in all of the below examples.

In our   component, we want to iterate through all of the objects. To display a row for every object, we need to pass the key prop. The most suitable property would be id. To make sure that our objects have it, we can add a constraint.

Now we can be sure that the   contains the id.

Implementing a fully working table

Our   needs a row. It is also generic and accepts a single object and an array of properties.

The , on the other hand, does not need to be generic. We provide it just with a list of properties.

A thing worth pointing out is that the   above is of type  . The above is because the key of an object by default is of the type  .

To change the above behavior, we could force the keys to be of a string type by using  .

Alternatively, we could also use the keyofStringsOnly option when compiling.

Putting it all together

Once we’ve defined all the pieces, we can put them together.

Even though the implementation of the above component might seem rather complex, its usage is very straightforward.

The TypeScript compiler understands that the   above is a post. Due to that, we can only provide properties that can be found in the  interface.

On the other hand, we could make the  explicit by providing the interface.

Summary

Thanks to all of the above work, we now have a reusable   component that we can use to display any entity. By doing so, we aim for reusability and make following the DRY principle easier. You can go ahead and implement more features in our  . Thanks to it being generic, we can have them all across our application.

Subscribe
Notify of
guest
1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
minjae
minjae
27 days ago

Thanks