ReactJS Static Type Checking

In React, Static Type Checking becomes more and more complex. Therefore, it becomes important to use static type checking. It is mainly preferred to prevent bugs and errors. Since react library is built on top of JavaScript. It is dynamic, weakly typed, and loosely typed. Static Type Checking is used to check the type of state, variables and functions in react.

In react, there are two ways to implement the Static Type Checking 

• Flow
• TypeScript

There are different advantages of using Static Type Checking as follows :

• Identifying type errors before runtime
• Improved workflow because of auto-complete
• Detection of errors in the early stage
• Easy to read Code

We prefer to use the flow because it is lightweight and it is developed by Facebook.

Let’s create a react application to check Static Type Checking :

Creating React Application

Step 1: Create a React application using the following command:

npx create-react-app example

Step 2: After creating your project folder i.e. example, move to it using the following command:

cd example

Step 3: Now from the root directory of your project in the terminal, run the following command

npm install --save-dev flow-bin

This will add flow to our react app.

Package.json: After the installation, add Flow in the scripts section of the package.json file. The file will be like this:

Package.json

{
  "name": "example",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.2",
    "@testing-library/react": "^12.1.3",
    "@testing-library/user-event": "^13.5.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "5.0.0",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "flow": "flow"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "flow-bin": "^0.173.0"
  }
}

Step 4: Then run this command from a terminal

npm run flow init

Project Structure: It will create a config file as shown in the folder structure below

folder structure

Step 5: Replace the content of .flowconfig file with below

[ignore]
.*/node_modules/.*
.*/src/registerServiceWorker\.js
.*/src/index\.js
.*\.test\.js
[include]
[libs]
[lints]
[options]
all=true
[strict]

Now make App.js like below with an example for static type check.

App.js

// @flow

function calculateSum(a, b) {
  return a + b;
}

calculateSum(7, 9);

calculateSum(7, '9');

Step to run: Now from the terminal run

npm run flow

Output: This way we do static type checking in react.

Output