Skip to content

Instantly share code, notes, and snippets.

@benvium
Last active February 22, 2018 15:10
Show Gist options
  • Save benvium/4fc1e88cced760dcdb970168ce93875e to your computer and use it in GitHub Desktop.
Save benvium/4fc1e88cced760dcdb970168ce93875e to your computer and use it in GitHub Desktop.
Calvium Tech Session 22/2/2018 - FlowType
/* @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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment