Destructuring
Flow supports the JavaScript construct of destructuring, which allows you to extract data from structured values. Here is a simple example:
1 2 3 4 | /* @flow */ var arr = [1, '', true]; var [a, b, c] = arr; // a: number (1), b: string (''), c : boolean (true) |
The canonical example of destructuring is swapping:
1 2 3 | var a = 1, b = 2; [a, b] = [b, a]; // a = 2, b = 1 |
Destructuring and Type Checks#
Flow can verify that any destructuring in your code is type-safe.
1 2 3 4 5 6 7 | /* @flow */ var arr = [1, '', 'Hello', true]; // If you only care about some of the return values, you can skip some // elements with , , var [a, b, ,c] = arr; // a: number (1), b: string (''), c : boolean (true) var z: number = a * c; |
Above we have a four (4) element array arr
(actually a
tuple
)
. And then we destructure that array into three (3) variables, a
, b
, c
.
However, we then try to multiply a
(a number
), and c
(a boolean
). Flow
catches this.
/tmp/flow/f.js:2:28,31: boolean
This type is incompatible with
/tmp/flow/f.js:5:17,21: number
Found 1 error
Another Example#
1 2 3 4 | /* @flow */ var {x, y, ...o} = {x: '', y: 3, o: {z: false} } // x: string, y: number, o: {z: boolean} var z: number = o; |
/tmp/flow/f.js:3:5,16: object pattern
This type is incompatible with
/tmp/flow/f.js:5:8,13: number
Found 1 errors
o
has been destructed as an object that contains a boolean value. That
cannot be assigned to a number.
You can edit this page on GitHub and send us a pull request!