How to perform prop type checking in a Function Component - React with TypeScript?

In this video we will look at how to perform type checking on props when writing Function Components using TypeScript with React.

We will use an example of financial transaction that has attributes - amount spent, name of the bank, description of transaction, name of the merchant where transaction happened, name of the category to which this transaction belong. We will render this transaction on the web page using a function component.

Full Transcript

Hi everyone! This is Deeksha from Bonsaiilabs and welcome to TypeScript Series. In this video we will look at how to perform type checking on props when writing Function Components using TypeScript with React.

Here is one of my favorite online code editor CodeSandbox. You can boostrap a React TypeScript project from scratch which gives you out of the box support for TypeScript inside a React project.

Here we have this default App.tsx component which replaces the React .jsx file format for developing components.

We can pretty much delete this file and instead create our own <Transaction> component. We will name it Transaction.tsx and also refactor the code inside the index.tsx file to now call <Transaction> component instead of <App>.

Here is the stub of code we will start with. Transaction is a function component. We added an import for React and for the existing styles which is not something super interesting. Currently, it returns a div element that is styled using the css class defined in the css file.

To be able to add the type checking for the props of this Transaction component, we can leverage type alias from TypeScript.

TODO: Talk one more line about type

So TransactionProp is a type we are defining which should be an object containing properties amount of type string, bankName of type string, desc of type string again, merchant of type string and category of type enum Category. We will create this enum shortly.

We want to ensure when <Transaction> component is called, it should be passed props of type TransactionProp. If that doesn't happen, you will be notified with a TypeScript error indicating incorrect type.

Now we can simply return an <h6> element to display the transaction information in a single line.

The web page shows just the hard coded text and nothing else. You may have also noticed these red lines that indicate an issue with your TypeScript code. If you have writing TypeScript, you may already be embracing these errors that act as a prevention step before you face issues at the run time.

The red visual indicator is trying to convey that there is no type called Category. It is correct because we haven't really defined the Enum Category anywhere in our code.

Next, if you go to the index.tsx file, you should again see this red line. When you hover on it, it shows you what the error is. Type '{}' is missing the following properties from type 'TransactionProp': amount, bankName, desc, merchant, category.

If you were simply writing React instead of TypeScript, you would have never received any feedback on the mistake. This is the power of strongly typed languages.

So let's first create a new file enums.ts. Here we will define Category as an enum. Enums are a nice way to define constants in your code. You can create both numeric or string-based enums. Here we need the name of the category, so we will stick with string-based enum. And don't forget to add export so that you can import Category in other files. Alright, so we are all set here.

If we go back to <Transaction> component, we will import the Category from the enums file. You can see, that red error line vanished.

But we still don't see anything except this hard coded string, so its time to fix the problems in index.tsx file.

Transaction accept props of type TransactionProp so its mandatory to pass amount, bankName, desc, merchant and category. We are passing these values to all the props and for category, we will use Category.Food which will be available after we import Category from enums file.

And there we go!

There is another quick thing, I will show you.

If you also want to have another property or to say attribute of transaction such as date, but you don't want to mandate that every caller pass the date in props. You can mark such properties as optional by having this question mark. Since date is optional field, we don't get any errors.

On the other hand if I pass amount as string instead of a number, it will show you the error.

So this is how you can have strongly typed props inside your function component. That's all I wanted to cover in this video, let us know if there is a specific topic you would like to be covered in TypeScript, we will try our best to cover those as well.

Thanks for watching and I will see you in the next video.