In this blog post, I will be giving you a high-level breakdown of what TypeScript is and how to use it with either a new or existing React application.
What is TypeScript?
I highly recommend checking out the official TypeScript docs to learn about the specifics on all of the functionality available, including types, interfaces, enums, generics, functions, and classes.
At this point in time, TypeScript is mature enough that integration with a new or even existing React application is a pretty simple process. It should require very little if any migration rework.
If you’re using Create React App, you can either create a new or upgrade an existing React project with TypeScript using the following commands:
npx create-react-app my-app --template typescript
npm install --save typescript @types/node @types/react @types/react-dom @types/jest
TypeScript code requires a distinct file extension in order to be captured by the compiler. The default is .ts and a special .tsx extension for files containing JSX.
The well of enhancements you can make to your React application using TypeScript is deep. But, for the sake of simplicity in this blog post, I’ll focus on two of my favorites: component props and application state.
Below we’ll find a simple example of a custom React component. We’ll also see that component is being used within a separate component. Notice that the interface is being set with a type-string
name and an optional boolean flag named
Now, let’s take a look at what happens when we force a type mismatch and a missing required property.
A quick keyboard shortcut in VS Code, “CTRL+SPACE”, pops up a list of valid properties and their types.
With that simple process, we’ve quickly integrated a custom component properly. Now, we just need to let our teammates know how to use our component, and just like that, we’ll avoid runtime errors in the console of the browser.
The other enhancement I’ll cover involves application state.
Making small adjustments to properties of a state object has caused me all sorts of headaches in the past. Now, as long as the selector is initialized using TypeScript, any breaking changes will become immediately apparent.
Here is an example of a simple reducer and an instance of an overloaded
useSelector hook with our custom state object.
Now, we can call our custom selector hook from our component and use our app state however we may need to.
Let’s say for some reason that we need to update the
isCool property so that it should be a number instead of a simple boolean.
Typically in this situation, we would then have to remember everywhere we used the
isCool property throughout our application to avoid an error at runtime. Fortunately, with TypeScript, we get a compilation error in the terminal and a direct error in the editor.
With this fix, much less time is spent bouncing back and forth between the editor and the browser nailing down tiny little
property is undefined errors.
In this blog, I’ve only scratched the surface of what TypeScript is able to offer. I highly recommend considering TypeScript as part of your web development stack moving forward. The developers maintaining your code in the future (including you yourself will thank you.