Flow

This recipe is part of the Flow Cookbook series. Flow and React are both Facebook projects - so as you might imagine, they work quite well together. React components can take type parameters to specify types for props and state. Type-checking works well with both functional and class components. Flow type annotations provide an alternative to propTypes runtime checks. Flow’s static checking has some advantages: Problems are reported immediately - it is not necessary to run tests that evaluate every component to identify props mismatches. Flow types can be more precise and concise than propTypes. Flow can also check state as well as props. In addition to checking that a component gets the correct props, Flow checks that props and states are used correctly within the component’s render method, and in other component methods. …

A case study on using runtime validators to match incoming API data to Flow types

Type-checking can be a useful asset in a Javascript project. A type checker can catch problems that are introduced when adding features or refactoring, which can reduce the amount of time spent debugging and testing. Type annotations provide a form of always-up-to-date documentation that makes it easier for developers to understand an unfamiliar code base. But it is important to use type-checking effectively to get its full benefit. The Javascript community is fortunate to have a choice of two great type checkers. These recipes focus on Flow, and introduce patterns for using Flow effectively. …

Flow has some very interesting features that are currently not documented. It is likely that the reason for missing documentation is that these features are still experimental. Caveat emptor. I took a stroll through the source code for Flow v0.11. Here is what I found while reading type_inference_js.ml and react.js. …

This is an old post - for an up-to-date guide see Flow Cookbook: Flow & React. Flow v0.11 was released recently. The latest set of changes really improve type checking in React apps. But there are some guidelines to follow to get the full benefits. …