Type checking in React

Having spent many years creating web applications with C#, a strongly typed language, I have taken static type checking for granted. Being made aware of type errors in my code during compile time (and as I type) is something that I just expect to happen. I’ve recently set one of my learning objectives to become more proficient with React and JavaScript, and I was pleasantly surprised to find the community has embraced type checking. In this post, I will look at three different ways to implement type checking when working with a React project.

PropTypes

PropTypes is a lightweight library that used to be part of the React core module, but has since been moved into its own library called prop-types. With PropTypes, you can define the types of data in the props being passed into your Components. The types are then checked during run time.

In the example below, the types are defined in Greeting.propTypes.

import React from "react";
import PropTypes from 'prop-types';

function Greeting(props) {
    return (
        <h1>Hello {props.name}</h1>
    )
}

Greeting.propTypes = {
    name: PropTypes.string
};

PropTypes is a simple way to add type checking to your React Components, although it will only check the data in your props. The React documentation suggests using TypeScript or Flow if you want type checking for your entire application.

TypeScript

TypeScript is a superset of JavaScript, created by Microsoft, that adds strong typing support to your whole application. The types are checked at compile time. TypeScript has its own unique syntax which you need to learn, but it compiles to plain JavaScript.

Here is an example of using TypeScript with a React Component. The types are defined in interface Props, as well as for the arguments being passed into the function (Props).

import * as React from "react";

interface Props {
    name: string
}

function Greeting(props : Props) {
    return (
        <h1>Hello {props.name}</h1>
    )
}

If you only wanted type checking in your React project, then learning and implementing TypeScript might be overkill. You should read about its additional features and benefits before committing to using it.

I’ve dabbled with TypeScript before; I was a fan of the syntax, the autocomplete support, and the strong types, of course!

Flow

Flow is a static type checker for JavaScript created by Facebook. You use annotations in your code to tell Flow about your types.

Once Flow is added as a dependency to your project, you need to add // @flow at the top of each file you want checking. Then you can define the types in your file using Flow’s syntax. Just note that doing this means your code is no longer vanilla JavaScript, and you would need to compile the code to make it compatible with the browser (which the tooling sorts out for you).

// @flow
import React from "react";

type Props = {
    name: string
}

function Greeting(props: Props) {
    return (
        <h1>Hello {props.name}</h1>
    )
}

I haven’t used Flow outside of the tutorial, so I haven’t formed a strong opinions about it yet, but I do like that you can incrementally add type checking to your projects by only adding annotations to the necessary files. This seems like a great way to add type checking to an existing React app without having to re-write parts of it with TypeScript.

Final words

Static type checking is a convenience that I’ve grown to love. It’s something that I’ve benefited from when writing code in C#, and it’s a feature that I want to have when creating JavaScript applications.

As I learn JavaScript and React in more depth, I think my preference is leaning towards using plain JavaScript and PropTypes, as it seems like the easiest way to get started. However, I am really drawn to TypeScript and all the additional benefits it offers, so I am quite eager to learn it next.

What are your thoughts on type checking in JavaScript and React? Got any tips? Did I get something wrong? Let me know on twitter @irmbrady!

Enjoyed reading this? 🎉

Click here to read more of my blog posts.