react.dev/content/docs/static-type-checking.md

id, title, permalink, prev, next

id	title	permalink	prev	next
static-type-checking	Static Type Checking	docs/static-type-checking.html	typechecking-with-prototypes.html	refs-and-the-dom.html

As your app grows, you can catch and eliminate an entire category of bugs with static typechecking. You can use JavaScript extensions like Flow or TypeScript to statically typecheck your whole application. In complex applications, we recommend to use Flow or TypeScript for typechecking instead of typechecking with PropTypes.

Using Flow with React

For trying out Flow, use this playground.

Flow and Babel work well together, so it doesn’t take much to adopt Flow as a React user who already uses Babel.

With babel

Flow and Babel are designed to work great together. It takes just a few steps to set them up together.

If you don’t have Babel setup already, you can do that by following this guide.

Once you have Babel setup, install babel-preset-flow with either Yarn or npm.

yarn add --dev babel-preset-flow
# or
npm install --save-dev bebel-preset-flow

Then add flow to your Babel presets config.

{
  "presets": ["flow"]
}

With Create React App

Create React App already supports Flow by default. Just install Flow and create a .flowconfig file by running flow init.

create-react-app my-app && cd my-app
yarn add --dev flow-bin
yarn run flow init

Flow will be run as part of create-react-app’s scripts.

Using TypeScript with React

For a fast dive into TypeScript, go here.

With Create React App

All you need to do is:

create-react-app my-app --scripts-version=react-scripts-ts

react-scripts-ts is a set of adjustments to take the standard create-react-app project pipeline and bring TypeScript into the mix.

You can also try typescript-react-starter.