Flow playground (flowtype.org)

0-flowtype-playground.js

/* @flow */

import _ from "lodash";

type UserId = string;

type UserRole =
  'admin' |
  'guest' |
  'member';

type User = {
  id: UserId,
  firstName: string,
  lastName: string,
  role: UserRole,
  age: ?number
};

var users: User[] = [
  {
    id: '123',
    firstName: 'Bob',
    lastName: 'Smith',
    role: 'admin',
    age: null
  },
  {
    id: '456',
    firstName: 'Jane',
    lastName: 'Clark',
    // role: 'foo', // throws
    role: 'guest',
    age: 23
  }
];

var u1 = _.first(users);
// u1.firstName; // throws
if (u1) {
  // u1.name; // throws
  u1.firstName
};

var u2 = _.last(users);
if (u2) {
  u2.firstName;
}

var u3: User = {
  id: '789',
  firstName: 'Harry',
  lastName: 'Potter',
  role: 'member',
  age: null
};

// Object.assign(u3, {foo: 'guest'}); // throws
// Object.assign(u3, {role: 'foo'}); // throws
// var u4: User = Object.assign({}, u3, {role: 'foo'}); // throws
Object.assign(u3, {role: 'guest'});

// var u5 = _.find(users, (user) => user.name === 'Bob'); // throws
var u5 = _.find(users, (user) => user.firstName === 'Bob');
if (u5) {
  // u5.name; // throws
  u5.firstName;
}

var admins = users.filter(user => user.role === 'admin');
var u6 = _.first(admins);
if (u6) {
  // u6.name; // throws
  u6.firstName;
}

// ----------------------------------------------------------------------------
/* @flow */
import React from "react";

type Props = {
  width: number,
  text: string
};

// Class components
// https://github.com/facebook/flow/issues/398
class LabelClass extends React.Component {
  props: Props;
  static defaultProps: {}; // Flow needs this to work (for now)
  render() {
    return <div style={{width: this.props.width * 2}}>{this.props.text}</div>;
  }
}

<LabelClass width="100px" height="20px" />; // type check error

// Function components
function LabelFunction(props: Props) {
  return <div style={{width: props.width * 2}}>{props.text}</div>;
}

LabelFunction({width: "100px", height: "20px"}); // type check error

1-lodash.js

// interfaces/lodash.js
declare module lodash {
  declare function first<T>(array: T[]): ?T;
  declare function last<T>(array: T[]): ?T;
  declare function find<T>(
    array: T[],
    predicate: (value: T, index: number) => boolean
  ): ?T
}

2-.flowconfig

[ignore]
.*\/node_modules\/

[include]

[libs]
interfaces/

[options]