How to use Glow to make your errors stand out in Flow

Image taken from the official repository

I stumbled upon a cool project which might be of interest to all of you Flow fans. ❤

What is Flow?

Flow is a static type checker for Javascript.

Flow drastically reduces bugs and helps us navigate our code.

Javascript is a loosely typed language — by default, we don’t define types for our variables, function arguments, and so on. Flow is a great way to add static typing to our Javascript.

Here’s how a “loosely” typed add function might look. Loosely typed, meaning there is no type checking going on.

Here’s how we would write the add function with Flow included.

Noticed we added the // @flow comment at the top and added type checking for our function parameters. Essentially, we are telling Javascript the following: please make sure the arguments are numbers, and if they’re not, throw me a feedback error.

Great for avoiding bugs.

But what happens if we insert a string instead of a number to add()? Here’s where Glow comes into play. Glow is an error handler for Flow.

Glow error handling in action

Looks slick! How do we set it up and try it out?

I’m glad you asked!

Let’s start a fresh React project with Flow + Glow.

Paste this command in your terminal.