Calvium Tech Session 22/2/2018 - FlowType

flowType.js

/* @flow */
import React, {PureComponent} from 'react';
import type {Node} from 'react'; // Here's how to import the FlowType for Node (rendered react classes or null)

// Simple Component with Flow
type PropsType = {
  a: string,
  b: number,
};

type StateType = {}

// You can miss out StateType. PropsType can be * if there are no props.
class Foo extends PureComponent<PropsType, StateType> {
  render() {
    const {a, b} = this.props;
    return (
        <p>
          {a} hello {b}
        </p>
    );
  }
}

// Errors due to not passing a and b props.
class Foobar extends React.PureComponent<*> {
  render() {
    return (
      <Foo />
     );
 }
}

// * in promise means 'this function doesn't care about the type of promise' (RB says the star is an existential variable)
function ignoreFailureFromPromise(prom1: Promise<*>): void {
  prom1.catch(() => null);
}

// Type of a rendered component class
let foo: Node = <Foo a="" b={3} />;

// Type of a rendered component class
let foo2: () => Node = () => <Foo a="" b={3} />;

foo2 = () => null; // null is an allowed value for Node
foo = null;

// you can't 'extend' exact types due to a the design of the & feature (really means 'conforms to both types' and something can't exactly match two types with different props)
type SmallType = {
  a: string,
  b: number,
}

// .. but you can extend inexact types
type BiggerType = SmallType & {
  c: boolean,
}


// Flow can 'choose' which type is used by a value of a prop
type AaType = {
  type: 'a', // e.g. 'type' can ONLY be the string 'a' for this type
  value: string,
};

type BbType = {
  type: 'b', // e.g. 'type' can ONLY be the string 'b' for this type
  value: number,
};

type Either = AaType | BbType;

const f:Either = {
  type:'a',
  value: 56, // if you set value to a string, you'll get an error as type:'a' means this is an AaType.
};


// This pattern can be used for API responses...
type SuccessType = {|
  payload: Object,
|}

type ErrorType = {|
  error: string,
|}

type ResponseType = SuccessType | ErrorType;

const res:ResponseType = {error:'broken'}; // OK
const res2:ResponseType = {payload: {}}; // OK
const res3:ResponseType = {payload: {}, error:'broken'}; // Flow error - can't have error AND payload

// Notes
//----------
// - React Native doesn't have flowTypes for it's components, which makes dev a little trickier.
// - On RN, running flow on command line gives 1200+ errors. (./node_modules/.bin/flow). @pablo would like to investigate how to make RN errors better.
// - https://github.com/flowtype/flow-typed contains flow definitions for (some) libraries. @pablo may look into this in future