What is Flow in JavaScript? First, let’s understand Flow.
Flow is a static type checker that allows a developer to check for type errors while developing code. This means a developer receives faster feedback about the code, which they can use to improve its quality. Flow works by using annotations and type definitions for adding type checking support to your code. The syntax is easy to use, and you can quickly remove it with a post-processor tool so it doesn’t affect your code.
Flow is designed to help you increase confidence in your code. If you have to make large changes in your codebase, Flow helps you to refactor your code safely.
This post will explain what a static type checker is, the importance of type checkers, and what the difference is between dynamic and static type checking. After that, you’ll get an introduction to Flow with some basic examples to get you started using Flow with JavaScript.
First, let’s learn about a static type checker.
What Is a Static Type Checker?
Type checking is all about ensuring that the program is type-safe. In other words, you want to avoid type errors in your code.
Let’s say you want to add a number and a string, which isn’t possible in JavaScript. If you aren’t using a static type checker, then the program will throw an error when it executes. But if you use a static type checker, it will immediately indicate the type error while you’re writing the code.
In short, a static type checker helps you as a developer to validate the input and output of functions against an expected input and output.
Let’s talk about a more advanced example. Let’s say you want to validate an object. You want to make sure that the object you return has two properties, and both of the properties are of type String. You can define these kind of rules with a static type checker. If you return an object with a String and a Number, then the static type checker will throw an error.
Static type checking can be considered as part of shift left testing. You can read more about this concept on Testim’s blog.
Before we continue with introducing Flow, it’s crucial to understand the difference between static and dynamic type checking.
Static Type Checking Versus Dynamic Type Checking
A statically typed language—such as C, C++, Java, Scala, and many more—will know the type of a variable at compilation time instead of at runtime. This means you can catch type errors early in the development life cycle.
However, with dynamically typed languages—such as JavaScript, PHP, Python, Ruby, and many more—type checking happens dynamically at runtime of a program. This means that a program can still fail during runtime because of type errors.
For this reason, you need a static type checking tool for dynamic languages such as JavaScript.
What Is Flow?
Flow is designed to find type errors at compilation time, thereby avoiding type errors at runtime. Flow works by using annotations in special JavaScript comments to indicate the expected type for an object or variable.
By using comment-style annotations, you can configure a post-process tool like Babel to remove those annotations and special code typings. This means using Flow doesn’t affect the build size. You can try Flow here.
Why Do You Need a Static Type Checker?
When you develop a project that consists of only a couple of files, configuring a static type checker might feel redundant. However, when you develop a larger project, it makes sense to configure a static type checker, as programming isn’t easy. Every programmer is subject to writing bugs in the code. In addition, a good portion of those bugs are related to type errors.
It might feel redundant to configure a static type checker for a small project. However, many of those projects grow much larger. It doesn’t hurt to use a static type checker, as that helps you to improve the quality of your project.
Benefits of Using a Static Type Checker
Why should you bother using a static type checker? Here are four significant benefits.
1. Better Code
As a developer, you’ll develop better code because the checker analyzes your code every time you add something new.
2. Faster Code Feedback
You’ll receive direct feedback about your code. In case you return the wrong object or you convert a string to a number by accident, the static code checker will immediately tell you. Therefore, you don’t have to pass your code through a test automation tool to receive feedback. A static type checker provides you with much faster feedback about the quality of your code.
3. Faster Execution
When you’re using static type checking, the compiler already knows what types of data it should expect for which variables. This means it doesn’t have to care about these types because they’ve been verified before. Therefore, the compiler can produce a more optimized machine code that uses less memory and executes faster because it can leave type checking behind.
4. Fewer Unit Tests
A static type checker reduces the number of unit tests. How? Static type checkers can guarantee input and output types, so there’s no need for specific unit tests that verify this. This means you don’t have to write tests for invalid inputs because you can be sure that it’s not possible to receive incorrect input types.
Disadvantages of Using a Static Type Checker
What are some drawbacks you may encounter when using a static type checker?
- It can lead to multiple type declarations that make the code harder to read or understand.
- You have to make a time investment to learn about the static type checker.
- You’ll need to practice the best way to specify types in your code.
- It can lead to slower development because you have to spend time thinking and writing types.
Although it might look like you have to invest quite some time into learning about Flow, it’s worth the effort. It’s not a steep learning curve, and it’ll make you a better developer.
If you’re interested in test automation, read about how you can apply AI to test automation.
Next up, let’s learn about using Flow in JavaScript.
Introduction to Static Type Checking With Flow
First of all, you always have to add a comment to your file that says:
// @flow
Flow allows you to define static type annotations. The example below defines that the input must consist of a number and output a number gain. If you input a string into the function, Flow will throw an error.
// @flow
function square(n: number): number {
return n * n;
}
square("2"); // Error!
However, as Flow understands JavaScript code very well, it’s possible to simplify this example to the following code snippet:
// @flow
function square(n) {
return n * n; // Error!
}
square("2");
In the example above, you’re multiplying two variables, which means the variables can be only of type Number. Flow can understand this behavior and reduce the amount of work required from you as a developer.
Next up, let’s take a look at the class type syntax.
Classes
It’s possible to define input and output types for functions of classes. The approach is similar to defining types for normal functions.
class MyClass {
method(value: string): number { /* ... */ }
}j
It’s even possible to define class fields and give them specific types.
// @flow
class MyClass {
prop: number;
method() {
this.prop = 42;
}
}
If you want to find more information about all the possibilities, make sure to check out Flow’s documentation. The documentation covers each aspect of Flow’s static type checking, such as casting, expressions, type aliases, and many more! You can find the installation instructions for Flow here.
To Be Static Typed or Not to Be?
How can you decide whether to use a static type checker? I suggest that you always go for this option, no matter how small your project is. As mentioned previously, a small project tends to grow into a much larger one. Besides that, a static code checker helps you as a developer to write better code and increase the quality of your project.
This post was written by Michiel Mulders. Michiel is a passionate blockchain developer who loves writing technical content. Besides that, he loves learning about marketing, UX psychology, and entrepreneurship. When he’s not writing, he’s probably enjoying a Belgian beer!
