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

vs

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

Flow VS TypeScript