Home > Article > Web Front-end > How TypeScript Makes React Better: Smoother Developer Experience, Fewer Bugs (With a useState Example)
Let's start with a scenario and a task associated with it.
We have a messaging application with a status bar that shows the user's current status and allows them to update it. We have to add a dropdown from which the user can change their status and use useState() to show and update the user's current status in the UI.
For simplicity, we will only focus on the useState implementation in this article, and by the end of the article, you will understand how even for a simple example TypeScript is a much more powerful option.
We have to define a useState() that stores and updates userStatus and is initialized with one of the five possible status options (let's say active).
All the possible options are:
This is a very straightforward task, right? All we have to do is define a useState and initialize it to active and then use the set function to update the status and we are done.
But wait! What happens when someone is reviewing my code or visits this piece of code later (say after 1 week, 2 weeks, 1 month, 6 months, or whatever), how will they know what are all the possible/valid options?
Ahh! Yes, we can add a comment next to the useState to let them know that these are all the possible options.
But, this isn't a good solution, right? So, how can we improve it?
Object lookup is a really nice solution to our problem. So, let's start with defining an object lookup called UserStatus and use it to set our userStatus value.
Now, let's update our useState definition.
Now, let's try to update the status.
Ohh! Look at that, now we get autocomplete in our editor and can check all the possible/valid values of userStatus by looking at the definition of UserStatus.
Even though the object lookup method has seemingly solved our problem and is definitely a far better solution than just adding comments, it still has two major issues:
So, how can we solve these issues?
Answer: Typescript
Let's start again with our solution, but this time in a .tsx or a Typescript file. We can start by defining a useState() function and initializing it with the value: active.
Nothing seems different right now, but it is. Let's update the userStatus value.
Ahh! As you can see it is giving us that dreaded red squiggly error line around some set functions but not on ones where we are setting a string value. This is because Typescript is inferring the type of our state from its initial value (i.e. type string).
Yes, this will prevent us from setting any non-string values to our userStatus state, but it still doesn't prevent us from setting any random string value and we still have to use the object lookup for documenting all the possible options, you may ask.
Let's do some "One Stone, Two Birds".
In Typescript we can create custom types and it also has support for generics which can be used in React for its hook definitions, in our case the useState() hook.
Let's create a new UserStatus type in our React component.
Now, let's use this type in our useState definition.
Till now, everything looks similar to how we were doing it in the object lookup method, but the magic of Typescript is when we start using our set function and the state value.
Getting the type definition of userStatus.
Autocomplete for the setUserStatus function.
Getting proper validation for valid and invalid values.
Look at that,
By now, you probably have got a good feel for how TypeScript can really enhance our development experience. We have only scratched the surface with a simple example here, but just think about the real-world applications we’re building, using TypeScript could mean way fewer bugs and a way better developer experience overall.
I hope this article encourages you to start using Typescript in all your React applications and build awesome web experiences.
If you liked this article and would like to connect, then you can connect with me on Linked and X/Twitter
The above is the detailed content of How TypeScript Makes React Better: Smoother Developer Experience, Fewer Bugs (With a useState Example). For more information, please follow other related articles on the PHP Chinese website!