Utilizing Typescript In React

Introduction

As I continue my education by learning Typescript I start to wonder how I can use it within web frameworks. One of the frameworks I have experience in is React, and I’ve recently began studying how to incorporate the new with the old. In this blog post I will cover the simple process of how to use Typescript within React and some of the benefits this grants you in regards to your application. So without further ado let’s get started!

How Can I Use Typescript With React?

There are two ways that you can use Typescript with a React application. We will go over each in a second. But first it is important to note that in order to use create-react-app you’re going to have to have node version 14 or higher installed. If you would like to easily switch between different versions of node I recommend looking into node version manager. Now that we have the basics out of the way lets look into the first of the two previously mentioned ways to incorporate typescript with react. The following is how to initialize a react project using the template flag. Navigate to the folder you’d like to start your project in and enter the following within terminal.

npx create-react-app my-app --template typescript

The ‘my-app’ section will of course be substituted for whatever name you’d like to call your app. This will create a file structure similar to the following:

Notice the highlighted tsconfig.json. This is a typescript configuration file I have written about in a previous blog post.

As you can see many of your normal react components now have the extension .tsx. This is allow Typescript to incorporate the JSX that React typically uses. Before we go into how to utilize some of the features of Typescript within your React components lets mention the second way to incorporate Typescript in React. And that is to add Typescript to an existing React project. To do this navigate to the root directory of your project and enter the following within your terminal:

npm install --save typescript @types/node @types/react @types/react-dom @types/jest

After you do this locate any files you have within your project that end in .js and rename them so that their ending is .tsx. Also you will have to restart your development server if you are currently running it. And now that we know both ways to allow us to use Typescript within our React project lets look at some of the things we can now do.

Some Of The Typescript Features Handy In React

• Using interfaces to define props — if you’ve made React apps in the past you know how frustrating it is when you can’t exactly remember how the props are passed in to a particular component. A great way to allow for type checking within parent components (as far as props for child components) is to define them above the component using interface. Lets look at an example:

In this picture on line 4 we establish what our props should look like using the interface keyword. On line 9 we can see that we are naming a function and setting its type to a React Functional Component. There is some debate on whether or not to use this typing, but it suits our purposes for this example. After that we reference our interface to allow type checking for what we pass to this function.

• Auto completion when listing props — If an interface is used to define a components props we will have type checking wherever the component is imported when passing it props. Also if you hover your mouse above one of the prop keys you will now see an example of what these props should look like:

Conclusion

React is a powerful web framework. Traditionally this framework is spread across many child and parent components separated into different files. By implementing Typescript we enforce a consistent expectation of what our data should look like wherever it is expected.