React and TypeScript

Writing a React App with TypeScript

This article is aimed a developers who are new to React and/or TypeScript and would like to create an application using these two technologies. I will focus on how to setup a working dev environment using webpack and how to introduce TypeScript into an existing JavaScript codebase. TypeScript provides a mechanism to add gradual typing to your application. Other nice alternatives to TypeScript include Facebook’s Flow. If you’re interested in understanding the differences between Flow and TypeScript, check out this discussion on Reddit where the pros/cons of each are discussed. Also, if you’re coming from a Windows environment, Flow does not work there yet.

This article will build off of my previous article, Writing Your First React App. We’ll be writing the same simple demo application, however we’ll be adding support for TypeScript. Recently, in their latest 1.6 deployment, the TypeScript team announced support for React’s JSX. This now allows developers to write React components in TypeScript using the .tsx extension.


Setting Up A Stable Dev Environment

For this walkthrough we will still use webpack as our module bundler however now instead of Babel we will be using TypeScript as our transpiler. I’m going to use ts-loader for this example. There is a great writeup here from the author describing how to integrate TypeScript into a webpack workflow. I’ll just quickly give the run down of what you’ll need to do:

First, install the dependencies that you’ll need:

install typescript dependencies

Now, let’s install the tsd dependencies we’ll need so that TypeScript is aware of react, react-dom and node (we’re going to import a .json file later using require):

install typescript definitions

We’re going to need to fill in the rest of the dependencies we’ll need to get a stable app up and running.

install remaining dependencies

Cool, you should now have a package.json file that looks something like this:

package.json

package.json

Next, we’re going to need to update the webpack.config.js file to reflect that we want to use TypeScript instead of Babel for doing the JS transpilation. Let’s do that.

webpack.config.js

update webpack.config.js to use typescript transpiler

As you can see above, what we’ve done is we’ve swapped out the babel loader for ts-loader. Also, we’ve added the resolve block to let webpack know about .tsx file extensions. This way we’ll be able to import tsx files without having to reference the file extension and webpack won’t complain.

Finally, let’s add a tsconfig.json so that the TypeScript compiler knows that we’re trying to use JSX:

tsconfig.json

add tsconfig.json

Great, we’re all set now with our dev environment to use TypeScript. Let’s recap what we just did:

  1. We installed the TypeScript dependencies we needed in order to use it with webpack
  2. We installed the TypeScript type definitions through tsd that we’ll need to give TypeScript some information about react, react-dom and node
  3. We installed the rest of the dev dependencies that we’ll need
  4. We updated the webpack.config.js file to reflect the changes that we’ll need in order to use TypeScript with webpack
  5. Added a tsconfigjson file which will give the TypeScript compiler some extra information about our setup, using React etc.

Updating React Components to TypeScript

Next, let’s focus on converting over existing components that are regular JS to use TS. For this, we’re going to rename the file extensions to use .tsx instead of .js. This is a simple enough exercise.

Let’s convert the app file:

app.tsx

convert app to typescript

The main differences are that we’ll be providing some additional info about the React.Component class from which our component will extend from. Notice that we define two interfaces, Props and State and define the necessary properties.

Let’s do the same thing for the other two child components:

Search.tsx

convert Search to TypeScript

Results.tsx

We’re doing the similar approach as we did for App in both of these files.


Conclusion

With TypeScript adding support for JSX in 1.6, it’s easier now more than ever to get up and going with TypeScript in a React application. Whether you feel that it warrants use in your application is up to you and your team members to decide. As you add more JavaScript and your application grows, you’ll probably get a better feel for the value it might provide to your application.

If there is anything you think I missed or if there is something you would like to see me cover in this article, please feel free to comment, tweet at me, and/or send me an email. I appreciate any and all feedback. If you found this article helpful and would like to share it, please feel free to do so! ❤

The source code for this article is available on github. Feel free to fork/clone and hack away! Cheers.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.