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

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 a error handler for Flow.

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.

Great! We have everything we need. By the way — you might have noticed that create-react-app has Flow out of the box.

Let’s open our src/App.js and write our add method.

Great. Nothing special. Here’s where the fun begins.

Let’s add Flow to our project.

Just a simple comment at the top of our file. Notice how our add method arguments are underlined?

If you have Visual Studio and the Flow extension installed, you can hover over and see the error.

The error we should see is the following:

[flow] parameter `b` (Missing annotation)

Well… simple, let’s add our type checking.

No more red underline.

What if the project gets more complex and each file has 100 lines of code? It can get pretty tricky to nail down all the errors.

Introducing Glow! Let’s add the Glow script to our package.json

We installed Glow as a global, but feel free to experiment.

Open a new terminal window (make sure the server is running) and run the glow script.

npm run glow

Nice! We have no errors!

Let’s produce an error to see how it looks.

We changed the first argument to a string instead of a number.

Here’s what we will see in the console:

We see “This type is incompatible with the expected param type of ^^ number” — ^^ (the arrows point upwards to show where the error lives).

Ignore the class error, since this should be a stateless function not a class. This is a demo.

Glow also has these nice features out of the box:

• Nicely printed, code-highlighted type errors
• Interactive watch mode
• Filter through errors using globs

Let’s fix the error.

Neat!

Check out the official repository if you’re encountering any bugs or just say hi to the package author.

Here’s some links about me:

Twitter ❤

Feel free to Buy me a coffee!

If you enjoyed this — you might enjoy these as well!