Writing a React App with TypeScript
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:
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):
We’re going to need to fill in the rest of the dependencies we’ll need to get a stable app up and running.
Cool, you should now have a package.json file that looks something like this:
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.
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:
Great, we’re all set now with our dev environment to use TypeScript. Let’s recap what we just did:
- We installed the TypeScript dependencies we needed in order to use it with webpack
- We installed the TypeScript type definitions through tsd that we’ll need to give TypeScript some information about react, react-dom and node
- We installed the rest of the dev dependencies that we’ll need
- We updated the webpack.config.js file to reflect the changes that we’ll need in order to use TypeScript with webpack
- 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:
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:
We’re doing the similar approach as we did for App in both of these files.
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.