Table of Contents
Hey, what's up 🤙?
If you're a Typescript user then you've probably come across Utility Types. They are very useful and increase the readability and reusability of your code. Today I'm going to show you Record Utility Type with examples of how to use it in your projects. Let's go!
Let's say we have an app where the user can order food 🥙 from a complete stranger and we show this food in 2 different ways. Some of the products are immediately available, while others are yet to go on sale and have the coming soon label. Below I've attached an overview image of what these list items might look like.
They look a little different, one has a box with information at the bottom, while the other has a box with information at the top, a darkened image, and the text COMING SOON.
We can program the display of these items in the simplest way using lots of ifs, creating very ugly, unusable code that no one will want to touch later. 🤢 What if we suddenly have to add a food type like unavailable or sold out. It would be a disaster.
Also, either that crap or... we can use Record! Creating a beautiful, reusable, easily extensible code that when someone sees it they will be in tears of delight 😍
Let's start with the definition of Record from the Typescript documentation.
Record - Constructs an object type whose property keys are keys and whose property values are typed. This utility can be used to map the properties of a type to another type.
And an example:
In the documentation, they show us that we can use the Record Utility Type to create an object that contains cat names as keys, and requires CatInfo type data as values for those keys. This means that every object I find in the cats object must consist of the cat's name and information about that cat, throughout the object we have a data match, provided in a very clean and simple way.
We can achieve even better results when we use ENUM for this!
Let's go back to the example with the food list 🤓
We declare ENUM with the names of our categories for displaying items in the food list.
Then the enum will be able to be extended with more entries.
Next, we retrieve our FoodList component, which has all the logic for displaying the food list in a particular way.
And we declare the possible variants of FoodList, namely AvailableFoodList and ComingSoonFoodList:
Our plan is to create a code that allows us, by entering only a specific password from ENUMA, to select the appropriate FoodList variant. And this is where Record 💥 comes into action.
Let's look at the code below:
We create a FoodLists object that contains all possible FoodList variants. We give it a Record type, we give as a key the enum entries - FoodListTypes, and as values to the keys, we give a function that returns the appropriate list. It is so simple!
Such code is incredibly easy to extend and we can easily add new FoodList types, as well as remove them!
Now we can use the FoodLists object to display the list currently selected by the user:
🤯We have a simple component that displays two buttons and renders the currently selected list. The food list is retrieved on the fly from the stock based on the currently selected type to display, and the currently selected food type is selected by clicking on the appropriate button.
I hope I've helped you get familiar with an interesting use of the Record Utility Type and that you won't be afraid to use it in your projects. With Record, we can easily make code reusable and easily extensible.
If you want to learn even more from me, I invite you to codingbrah.com 😎
Thank you for your attention and cheers!