Maybe Types

Typing values that may or may not exist

It’s common for JavaScript code to introduce “optional” values so that you have the option of leaving out the value or passing null instead.

Using Flow you can use Maybe types for these values. Maybe types work with any other type by simply prefixing it with a question mark ? such as ?number as a sort of modifier.

Maybe types accept the provided type as well as null or undefined. So ?number would mean number, null, or undefined.

1
2
3
4
5
6
7
8
9
10
// @flow
function acceptsMaybeNumber(value: ?number) {
  // ...
}

acceptsMaybeNumber(42);        // Works!
acceptsMaybeNumber();          // Works!
acceptsMaybeNumber(undefined); // Works!
acceptsMaybeNumber(null);      // Works!
acceptsMaybeNumber("42");      // Error!
string This type is incompatible with the expected param type of number

Refining Maybe types

Imagine we have the type ?number, if we want to use that value as a number we’ll need to first check that it is not null or undefined.

1
2
3
4
5
6
// @flow
function acceptsMaybeNumber(value: ?number) {
  if (value !== null && value !== undefined) {
    return value * 2;
  }
}

You can simplify the two checks against null and undefined using a single != null check which will do both.

1
2
3
4
5
6
// @flow
function acceptsMaybeNumber(value: ?number) {
  if (value != null) {
    return value * 2;
  }
}

You could also flip it around, and check to make sure that the value has a type of number before using it.

1
2
3
4
5
6
// @flow
function acceptsMaybeNumber(value: ?number) {
  if (typeof value === 'number') {
    return value * 2;
  }
}