How to Make your React Components Type-Safe with TypeScript

You will learn just how simple making type-safe components in React can be and how much that is gonna improve writing React code

Brian Francis
JavaScript in Plain English

--

I love writing all my React code in TypeScript for a variety of reasons, but one of the big ones is that I am able to make my components type-safe out of the box, which in turn makes them less error prone. This is also a huge benefit when it comes to code completion in editors such as VS Code. If you are used to writing your React code in vanilla JavaScript what I am about to show you would be the equivalent to using prop-types.

Let’s Start Coding

I don’t plan on walking through coding a full React project for this tutorial, but if you would like to try out the code snippets below then you can run the following command in your terminal (command prompt or powershell if your on Windows).

npx create-react-app typescript-demo-app --template typescript

This will create a starter react app that uses TypeScript. After it has finished creating your project you can go ahead and open it up in the code-editor of your choice.

The following code snippets will walk through giving your components types in a couple different scenarios.

Scenario 1: A simple component where all props are required

You will notice that I gave the Scenario1 component a type of React.FC which is just telling TypeScript that this is in fact a React functional component. This is important, because TypeScript needs to know this so that it can infer that the first parameter in our arrow function is props. In the example above I am performing object destructuring, but you could also call the first parameter props and then in the React code write props.disabled and props.color.

Scenario 2: A simple component that takes children and all props are required

You’re going to notice that in this scenario that it is incredibly similar to the first one. The only difference is that we are now also destructuring children and putting it in the button. The reason we are able to do this without having to include children in our type of Props is because we told TypeScript to expect a type of React.FC. This means that as a part of that object in the first parameter children will be included.

Scenario 3: A component with a function as a part of the type

For this scenario we are adding a new property to our Props type. The property is simply a function which is going to return void (in other words it’s not returning anything). If you would like to test this one out, I think it’s actually pretty fun. Try adding parameters to the handleClick function or try returning a string. You will notice that as soon as this happens TypeScript is no longer happy with the code. I’ll show an example below.

Scenario 4: A component with an optional property

For this one, it was super easy. To make a property of a type optional we simply have to add a ? before the : and that tells TypeScript that the property is optional. Of course, if we don’t pass anything for the property we are going to have to account for it potentially being undefined. Luckily that is also an easy fix. You will see on line 8 of the above code snippet that I simply gave the property a default value by setting it equal to false. Now if we don’t pass a value for disabled it will automatically assume that it is false.

Conclusion

I hope you found this little walk through of making type-safe React components in TypeScript helpful. I know that it can be a little bit of up front work to create these types for all your components, but it pays off down the road for sure. You will get better autocompletion options in your code editor, along with peace of mind that your component is being used properly.

--

--