How to Use Typescript with React and Redux

A guide to developing React and Redux apps with Typescript

Supercharge the stability of your React apps, with Typescript

Typescript is in its strongest position ever for making your React apps more stable, readable and manageable. The package has been steadily introducing more support for React and Javascript front-end frameworks; features have been ramping up specifically for them since version 3.0 and 3.1. Integration with React used to be a headache-inducing task, but is now a straight forward process that we will talk through in this article.

Create React App now has Typescript support built into the package, since react-scripts 2.1. It can simply be included in a new project with the --template typescript flag. We will specifically be using CRA for bootstrapping a React based app with Typescript, before exploring how to integrate types and interfaces into React props and state, followed by a Redux setup.

To read more about Typescript, why it is used and its capabilities, take a look at my Typescript with NodeJS article, that aims to introduce the package and provide integration steps for NodeJS:

Typescript with NodeJS: An Integration Guide

Installing Create React App with Typescript

The Create React App website has a dedicated page specifically for documenting the installation process as well as migration steps for adding Typescript support for existing apps. To create a new app with Typescript included, run the following:

yarn create-react-app app_name --template typescript
#or
npx create-react-app app_name --template typescript

There are a couple of noticeable changes from the Javascript based CRA boilerplate:

• Included now is a tsconfig.json file configuring the Typescript compiler options.
• .js files are now .tsx files. The Typescript compiler…