What is Flow

Flow is a JavaScript static type checker built by

14000+ stars on

Main features:

Finding type errors in your code
Offering a static typing syntax

Why type check?

Dynamic Typing

var myObject = {
  prop1: 'Some text here'
}
console.log(myObject.prop1());
// TypeError: myObject.prop1 is not a function

There is no compile error !!!

A Separate, but Related Problem

// implicit type coercion in JavaScript
var myNumber = 20; 
console.log(typeof myNumber); // number
myNumber = true;
console.log(typeof myNumber); // boolean

Not easy to analyze

var obj = {
        data: {
            getListingData: function(){};
        },
        map: "some map",
        .
        .
        .
    };

//In Another file
function func(obj) {
    obj.data.getListingData();
};

Lack of static type

Bugs are hard to find
Code maintenance is a nightmare
Refactoring is risky without complete knowledge of dependencies

Type systems will solve the problems

can make the code more readable

can make code easier to analyze

can catch errors at compile time

can allow for generally better IDE support

can allow for reliable refactoring

Should I use Flow ?

Flow is complex

Does not live for long
Really simple
Need to refactor
Crucial for the success of your company
Complex and has many moving parts
Maintained by a large team of developers

How to use flow

yarn add --dev babel-cli babel-preset-flow

{
  "presets": ["flow"]
}

1 Setup Compiler

2 Setup Flow

yarn add --dev flow-bin

flow init

[ignore]
.*/build/.*
.*/node_modules/.*

[include]
[options]
....

.flowconfig file

3 Prepare your code for Flow

// @flow
or
/* @flow */

4 Check your code

yarn run flow

yarn run flow status

yarn run flow stop

yarn run v1.3.2
$ flow
No errors!
✨  Done in 0.17s.

Flow Type Annotation

Maybe Types
Functions
Type Alias
Class
React

Maybe Types

function acceptsMaybeNumber(value: ?number) {
  // ...
}

acceptsMaybeNumber(42);   // Works!
acceptsMaybeNumber();     // Works!
acceptsMaybeNumber(null); //works

Functions

// @flow
function concat(a: string,b: string):string{
  return a + b;
}

concat("foo", "bar"); // Works!
// $ExpectError
concat(true, false);  // Error!

Type Alias

// @flow
type MyObject = {
  foo: number,
  bar: boolean,
  baz: string,
};

var val: MyObject = {
  foo: 1,
  bar: true,
  baz: 'three',
};

Class

// @flow
class MyClass {
  prop: number;
  method() {
    this.prop = 42;
   
    // $ExpectError
    this.data = "blala"; // Error!
  }
}

React

import * as React from 'react';

type Props = {
  foo: number,
  bar?: string,
};

function MyComponent(props: Props) {
  props.doesNotExist; 
// Error!You did not define a `doesNotExist` prop.
  return <div>{props.bar}</div>;
}

<MyComponent foo={42} />

Question?

TypeScript

Type checker +

A Complier that emits plain JavaScript

Angular Community

Flow

Type checker

Rely on Babel or other tools to remove type annotation

React Community

Hey we’d like to use this library to improve code quality on your project

We’d like to write the code for your project in a language your internal team doesn’t know.