FAQ

Frequently asked questions about using Flow

I checked that foo.bar is not null, but Flow still thinks it is. Why does this happen and how can I fix it?

Flow does not keep track of side effects, so any function call may potentially nullify your check. This is called refinement invalidation.

Example (https://flow.org/try):

1
2
3
4
5
6
7
8
9
10
11
12
 
// @flow
type Param = {
  bar: ?string,
}
function myFunc(foo: Param): string {
  if (foo.bar) {
    console.log("checked!");
    return foo.bar; // Flow errors. If you remove the console.log, it works
  }

  return "default string";
}
Cannot return `foo.bar` because null or undefined [1] is incompatible with string [2]. [incompatible-return]

You can get around this by storing your checked values in local variables:

1
2
3
4
5
6
7
8
9
10
11
12
13
 
// @flow
type Param = {
  bar: ?string,
}
function myFunc(foo: Param): string {
  if (foo.bar) {
    const bar = foo.bar;
    console.log("checked!");
    return bar; // Ok!
  }

  return "default string";
}

I checked that my object is of type A, so why does Flow still believe it’s A | B?

Refinement invalidation can also happen with disjoint unions. Any function call will invalidate any refinement.

Example (https://flow.org/try):

1
2
3
4
5
6
7
8
9
10
11
12
 
// @flow
type Response =
  | { type: 'success', value: string }
  | { type: 'error', error: Error };

const handleResponse = (response: Response) => {
  if (response.type === 'success') {
    setTimeout(() => {
      console.log(`${response.value} 1`)
    }, 1000);
  }
};

Here, a work around would be to extract the part of the value you’re interested in, or to move the if check inside the setTimeout call:

Example (https://flow.org/try):

1
2
3
4
5
6
7
8
9
10
11
12
13
 
// @flow
type Response =
  | { type: 'success', value: string }
  | { type: 'error', error: Error };

const handleResponse = (response: Response) => {
  if (response.type === 'success') {
    const value = response.value
    setTimeout(() => {
      console.log(`${value} 1`)
    }, 1000);
  }
};

I’m in a closure and Flow ignores the if check that asserts that foo.bar is defined. Why?

In the previous section we showed how refinement is lost after a function call. The exact same thing happens within closures, since Flow does not track how your value might change before the closure is called.

Example (https://flow.org/try):

1
2
3
4
5
6
7
8
9
 
// @flow
type Person = {age: ?number}
const people = [{age: 12}, {age: 18}, {age: 24}];
const oldPerson: Person = {age: 70};
if (oldPerson.age) {
  people.forEach(person => {
    console.log(`The person is ${person.age} and the old one is ${oldPerson.age}`);
  })
}
Cannot coerce `oldPerson.age` to string because null or undefined [1] should not be coerced. [incompatible-type]

The solution here is to move the if check in the forEach, or to assign the age to an intermediate variable.

Example (https://flow.org/try):

1
2
3
4
5
6
7
8
9
10
 
// @flow
type Person = {age: ?number}
const people = [{age: 12}, {age: 18}, {age: 24}];
const oldPerson: Person = {age: 70};
if (oldPerson.age) {
  const age = oldPerson.age;
  people.forEach(person => {
    console.log(`The person is ${person.age} and the old one is ${age}`);
  })
}

But Flow should understand that this function cannot invalidate this refinement, right?

Flow is not complete, so it cannot check all code perfectly. Instead, Flow will make conservative assumptions to try to be sound.

Why can’t I use a function in my if-clause to check the type of a property?

Flow doesn’t track refinements made in separated function calls.

Example (https://flow.org/try)

1
2
3
4
5
 
// @flow
const add = (first: number, second: number) => first + second;
const val: string | number = ...
const isNumber = (valueToRefine: ?number) => typeof valueToRefine === 'number';
if (isNumber(val)) add(val, 2);
Unexpected token `...`

However, Flow has predicates functions that can do these checks via %checks.

Example (https://flow.org/try)

1
2
3
4
5
 
// @flow
const add = (first: number, second: number) => first + second;
const val: string | number = ...
const isNumber = (valueToRefine: ?number): %checks => typeof valueToRefine === 'number';
if (isNumber(val)) add(val, 2);
Unexpected token `...`

Why can’t I pass an Array<string> to a function that takes an Array<string | number>

The function’s argument allows string values in its array, but in this case Flow prevents the original array from receiving a number. Inside the function, you would be able to push a number to the argument array, causing the type of the original array to no longer be accurate. You can fix this error by changing the type of the argument to $ReadOnlyArray<string | number>. This prevents the function body from pushing anything to the array, allowing it to accept narrower types.

As an example, this would not work:

1
2
3
4
5
6
7
8
9
10
 
// @flow

const fn = (arr: Array<string | number>) => {
  // arr.push(123) NOTE! Array<string> passed in and after this it would also include numbers if allowed
  return arr;
};

const arr: Array<string> = ['abc'];

fn(arr); // Error!
Cannot call `fn` with `arr` bound to `arr` because string [1] is incompatible with number [2] in array element. [incompatible-call]

but with $ReadOnlyArray you can achieve what you were looking for:

1
2
3
4
5
6
7
8
9
 
// @flow
const fn = (arr: $ReadOnlyArray<string | number>) => {
  // arr.push(321) NOTE! Since you are using $ReadOnlyArray<...> you cannot push anything to it
  return arr;
};

const arr: Array<string> = ['abc'];

fn(arr);

Example (https://flow.org/try)

Why can’t I pass { a: string } to a function that takes { a: string | number }

The function argument allows string values in its field, but in this case Flow prevents the original object from having a number written to it. Within the body of the function you would be able to mutate the object so that the property a would receive a number, causing the type of the original object to no longer be accurate. You can fix this error by making the property covariant (read-only): { +a: string | number }. This prevents the function body from writing to the property, making it safe to pass more restricted types to the function.

As an example, this would not work:

1
2
3
4
5
6
7
8
9
10
 
// @flow

const fn = (obj: {| a: string | number |}) => {
  // obj.a = 123;
  return obj;
};

const object: {| a: string |} = {a: 'str' };

fn(object); // Error!
Cannot call `fn` with `object` bound to `obj` because string [1] is incompatible with number [2] in property `a`. [incompatible-call]

but with a covariant property you can achieve what you were looking for:

1
2
3
4
5
6
7
8
9
 
// @flow
const fn = (obj: {| +a: string | number |}) => {
  // obj.a = 123 NOTE! Since you are using covariant {| +a: string | number |}, you can't mutate it
  return obj;
};

const object: {| a: string |} = { a: 'str' };

fn(object);

Example (https://flow.org/try)

Why can’t I refine a union of objects?

There are two potential reasons:

  1. You are using inexact objects.
  2. You are destructuring the object. When destructuring, Flow loses track of object properties.

Broken example:

1
2
3
4
5
6
7
8
9
10
11
12
13
 
/* @flow */

type Action =
  | {type: 'A', payload: string}
  | {type: 'B', payload: number};

// Not OK
const fn = ({type, payload}: Action) => {
  switch (type) {
    case 'A': return payload.length;
    case 'B': return payload + 10;
  }
}
Cannot get `payload.length` because property `length` is missing in `Number` [1]. [prop-missing]

Fixed example:

1
2
3
4
5
6
7
8
9
10
11
12
13
 
/* @flow */

type Action =
  | {type: 'A', payload: string}
  | {type: 'B', payload: number};

// OK
const fn = (action: Action) => {
  switch (action.type) {
    case 'A': return action.payload.length;
    case 'B': return action.payload + 10;
  }
}

(https://flow.org/try)

Second example:

I got a “Missing type annotation” error. Where does it come from?

Flow requires type annotations at module boundaries to make sure it can scale. To read more about that, check out our blog post about that.

The most common case you’ll encounter is when exporting a function or React component. Flow requires you to annotate inputs. For instance, in this example, flow will complain:

1
 
export const add = a => a + 1;

The fix here is to add types to the parameters of add.

Example (https://flow.org/try):

1
 
export const add = (a: number) => a + 1;

To see how you can annotate exported React components, check out our docs on HOCs.

There are other cases where this happens, and they might be harder to understand. You’ll get an error like Missing type annotation for U For instance, you wrote this code:

1
2
 
const array = ['a', 'b']
export const genericArray = array.map(a => a)

Here, Flow will complain on the export, asking for a type annotation. Flow wants you to annotate exports returned by a generic function. The type of Array.prototype.map is map<U>(callbackfn: (value: T, index: number, array: Array<T>) => U, thisArg?: any): Array<U>. The <U> corresponds to what is called a generic, to express the fact that the type of the function passed to map is linked to the type of the array.

Understanding the logic behind generics might be useful, but what you really need to know to make your typings valid is that you need to help Flow to understand the type of genericArray.

You can do that by adding an explicit type argument:

1
2
 
const array = ['a', 'b'];
export const genericArray = array.map<string>(a => a);

or by annotating the exported constant (https://flow.org/try):

1
2
 
const array = ['a', 'b']
export const genericArray: Array<string> = array.map(a => a)

Flow cannot understand the types of my higher order React component, how can I help it?

Typings HOCs can be complicated. While you can follow the docs about it, sometimes it can be easier to type the returned component.

For instance, in this example, we don’t type the HOC (setType), but the component created with it, Button. To do so, we use the type React.ComponentType.

1
2
3
4
5
6
7
 
// @flow
import * as React from 'react';

const setType = BaseComponent => props => <BaseComponent {...props} type="button" />;
const GenericButton = ({type, children}) => <button type={type} onClick={() => console.log('clicked')}>{children}</button>;

const Button: React.ComponentType<{children: React.Node}> = setType(GenericButton);

Was this guide helpful? Let us know by sending a message to @flowtype.

  • FAQ (current)