1
2
3
4
5
/* @flow */
function foo(x: number): string {
  return x; // Error Cannot return `x` because number [1] is incompatible with string [2].
}

1
2
3
4
/* @flow */
const val: number = 1; // No Errors
const val2: Number = 2; // Error Cannot assign `2` to `val2` because number [1] is incompatible with `Number` [2].

1
2
3
4
5
6
7
8
9
/* @flow */
function foo(): 1 {
  return 1; // No errors!
}
function bar(): 2 {
  return 1; // Error!
}

1
2
3
4
5
/* @flow */
function foo(): 1 | 2 | 3 {
  return 1; // No errors!
}

1
let arr: Array<number> = [1, 2, 3];

1
let arr: number[] = [1, 2, 3];

1
2
3
let arr: number[] = [1, 2, 3];
arr[0] = 4; // No Errors!
arr[1] = "1"; // Error ^ Cannot assign `'1'` to `arr[1]` because string [1] is incompatible with number [2].

1
2
3
4
5
6
const normalArray: Array<number> = [1, 2, 3];
readonlyArray[0] = 4; // No errors!
const readonlyArray: $ReadOnlyArray<number> = [1, 2, 3];
readonlyArray[0] = 4;
// Error ^ Cannot assign `4` to `readonlyArray[0]` because the index must be statically known to write a tuple element.

1
2
3
4
5
6
// @flow
function fn(obj: any) {
  let foo = obj.foo;
  let bar = foo * 2;
  return bar;
}

1
2
3
4
5
6
// @flow
function fn(obj: any) {
  let foo: number = obj.foo;
  let bar = foo * 2;
  return bar;
}

1
2
3
4
5
6
7
8
9
10
11
// @flow
function stringify(value: mixed) {
  return "" + value; // Error!
}
/* @flow */
function stringify(value: mixed) {
  if (typeof value === "string") {
    return "" + value; // No errors!
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// @flow
type State = { +value: boolean };
type FooAction = { type: "FOO", foo: boolean };
type BarAction = { type: "BAR", bar: boolean };
type Action = FooAction | BarAction;
function reducer(state: State, action: Action): State {
  switch (action.type) {
    case "FOO":
      return { ...state, value: action.foo };
    default:
      (action: empty); // Error! Cannot cast `action` to empty because `BarAction` [1] is incompatible with empty [2].
      return state;
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
/* @flow */
type State = { +value: boolean };
type FooAction = { type: "FOO", foo: boolean };
type BarAction = { type: "BAR", bar: boolean };
type Action = FooAction | BarAction;
function reducer(state: State, action: Action): State {
  switch (action.type) {
    case "FOO":
      return { ...state, value: action.foo };
    case "BAR":
      return { ...state, value: action.bar };
    default:
      (action: empty);
      return state;
  }
}

1
let a: ?number = 0;

1
2
3
4
type ApiReuturn = {
  isLoading: boolean,
  data: ?Array<Object>
};

1
2
3
function hoge(fuga: number, fuga: boolean): string {
  return "piyo";
}

1
2
/* @flow */
type Func = { hoge: (fuga: number, piyo: boolean) => string };

1
2
3
4
type Piyo = {
  hoge: number,
  fuga: string
};

1
2
3
4
5
type Props = {};
type State = {};
class Sample extends React.Component<Props, State> {}

1
2
3
4
5
6
7
8
9
10
11
12
13
/* @flow */
type Response<T> = {
  statusCode: number,
  data: T,
  respondedAt: string
};
type User = { name: string };
type Post = { content: string };
type UserAPIResponse = Response<User>;
type PostAPIResponse = Response<Post>;

1
2
3
4
type Single = number | string;
const a: Single = 1; // OK
const b: Single = [1, 2]; // NG

1
2
3
4
const a: Single = "1";
a.toFixed(); // Errors! Cannot call `a.toFixed` because property `toFixed` is missing in `String` [1].
// toFixed は Number にしかなく、Stringにはないため怒られる

1
2
3
4
5
6
7
8
9
10
/* @flow */
type Single = number | string;
const a: Single = 1;
switch (typeof a) {
  case "number":
    a.toFixed(); // No errors!
    break;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
// @flow
type A = { a: number };
type B = { b: boolean };
type C = { c: string };
type Arg = A & B & C;
function method(value: Arg) {}
method({ a: 1 }); // Cannot call `method` with object literal bound to `value` because property `b` is missing in object literal [1] but exists in `B` [2].
// $ExpectError
method({ a: 1, b: true }); // Cannot call `method` with object literal bound to `value` because property `c` is missing in object literal [1] but exists in `C` [2].
method({ a: 1, b: true, c: "three" }); // No errors!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// redux action
type StartFetchAction = {
  type: "START_FETCH",
  payload: string
};
const startFetch = (id: string): StartFetchAction => {
  return {
    type: "START_FETCH",
    payload: id
  };
};
// container
type DispatchAction = {
  fetchData: typeof startFetch // No errors!
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
type Type1 = {
  hoge: number
};
type ReadOnlyType1 = $ReadOnly<Type1>;
type ReadOnlyType2 = {
  +hoge: number
};
const object1: ReadOnlyType1 = {
  hoge: 1
};
console.log(object1.hoge); // No errors!
object1.hoge = 2; // Error Cannot assign `2` to `object1.hoge` because property `hoge` is not writable.

1
2
3
4
5
6
7
8
9
10
11
const countries = {
  US: "United States",
  IT: "Italy",
  FR: "France"
};
type Country = $Keys<typeof countries>;
const italy: Country = "IT"; // No errors!
const nope: Country = "nope"; // Error Cannot assign `"nope"` to `nope` because property `nope` is missing in object literal [1].
References:

1
2
3
4
5
6
7
8
type NormalType = { name: string };
type ExactType = $Exact<{ name: string }>;
let user: NormalType = { name: "taro" };
user = { ...user, age: 12 }; // No Errors!
let user2: ExactType = { name: "taro" };
user2 = { ...user2, age: 12 }; // Error!  Cannot assign object literal to `user2` because property `age` is missing in `ExactType` [1] but exists in object literal [2].

1
2
3
4
5
type ExactUser = $Exact<{ name: string }>;
type ExactUserShorthand = {| name: string |};
const user1: ExactUser = { name: "John Wilkes Booth" }; // No errors!
const user2: ExactUserShorthand = { name: "John Wilkes Booth" }; // No errors!

1
2
3
4
5
6
7
8
9
10
type StateProp = {|
  isLoading: boolean,
  data: Object
|};
type DispatchProp = {|
  fetchData: void => void
|};
type Prop = StateProp & DispatchProp; // No errors!

1
2
3
4
5
type Prop = {
  isLoading: boolean,
  data: Object,
  fetchData = void => void
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
type StateProp = {|
  isLoading: boolean,
  data: Object
|};
type DispatchProp = {|
  fetchData: void => void
|};
type Prop = StateProp & DispatchProp;
const expectedProp: Prop = {
  // Error
  isLoading: false,
  data: {},
  fetchData: () => {}
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/* @flow */
type StateProp = {|
  isLoading: boolean,
  data: Object
|};
type DispatchProp = {|
  fetchData: void => void
|};
type Prop = {| ...StateProp, ...DispatchProp |};
const expectedProp: Prop = {
  isLoading: false,
  data: {},
  fetchData: () => {}
};

1
2
3
4
5
const hoge = (): string => {
  return "piyo";
};
const foo: string = hoge();

1
2
3
4
5
const hoge = (fuga: number) => {
  return "piyo";
};
const foo = hoge(1);

1
2
3
const TooltipContent: Class<React.Component<*>> = styled.p`
  font-weight: 400;
`;

1
2
3
4
5
// redux.js
export type StartFetchAction = {
  type: "START_FETCH"
};

1
2
3
4
5
6
7
// container.js
import { type StartFetchAction } from "./redux";
type DispatchAction = {
  fetch: StartFetchAction
};

1
flow-typed install {library}

1
flow-typed install

1
flow-typed create-stub {library}

1
$ npm install react @types/react

1
2
3
4
type Props = {|
  +isLoading: boolean,
  +userInfo: $ReadOnlyArray<UserInfo>
|};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// redux actionに関するprops. mapDispatchToPropsに依存する.
type DispatchProps = {|
  +fetchMenuTag: typeof startFetchMenuTag,
  +toggleModal: typeof toggleModal
|};
// 親コンポーネントから渡されるprops.
type OwnProps = {|
  +isInitError: boolean
|};
// storeに関するprops. mapStateToPropsに依存する.
type StateProps = {|
  +visibleMenu: $ReadOnlyArray<Menu>,
  +MenuTags: $ReadOnlyArray<string>,
  +selectedMenu: ?Menu,
  +isOpenModal: boolean
|};
type Props = $ReadOnly<{| ...DispatchProps, ...OwnProps, ...StateProps |}>; // 合併する

1
2
3
4
5
6
7
type StateProps = {|
  +isLoaded: boolean
|};
const mapStateToProps = (state: TStore): StateProps => ({
  isLoaded: state.A.isLoaded
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
type StateProps = {|
  +isLoaded: boolean
|};
const mapStateToProps = (state: TStore): StateProps => ({
  isLoaded: state.A.isLoaded,
  hoge: 1 // Cannot return object literal because property hoge is missing in StateProps [1] but exists in object literal
});
// StatePropsを型注釈しない場合
const mapStateToProps = (state: TStore) => ({
  isLoaded: state.A.isLoaded,
  hoge: 1 // No errors!
});

1
2
// $FlowFixMe これはnullableなのでエラーになる
const elForPortal: HTMLElement = document.getElementById("tooltip-root");

1
const elForPortal: HTMLElement = (document.getElementById("modal-root"): any);

1
2
// $FlowFixMe
const stra: string = 1;

1
2
3
4
type Action = {
  type: string,
  payload?: any
};

1
2
3
4
5
6
export const actionCreator1 = (hoge: string): Action => {
  return {
    type: "HOGE",
    payload: hoge
  };
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
export type FetchStoreAttractAnalysisStartAction = {|
  +type: "user/FETCH_STORE_ATTRACT_ANALYSIS_START"
|};
export type FetchStoreAttractAnalysisSuccessAction = {|
  +type: "sys/FETCH_STORE_ATTRACT_ANALYSIS_SUCCESS",
  +payload: AttractAnalysis
|};
export type Action =
  | FetchStoreAttractAnalysisStartAction
  | FetchStoreAttractAnalysisSuccessAction;
export const fetchStoreAttractAnalysisStart = (): FetchStoreAttractAnalysisStartAction => {
  return { type: FETCH_STORE_ATTRACT_ANALYSIS_START };
};
export const fetchStoreAttractAnalysisSuccess = (
  data: AttractAnalysis
): FetchStoreAttractAnalysisSuccessAction => {
  return { type: FETCH_STORE_ATTRACT_ANALYSIS_SUCCESS, payload: data };
};

1
2
3
4
5
6
const mapStateToProps = state => {
  return {
    isExtraItemsLoading: state.customizeDailyReport.isExtraItemsLoading,
    isExtraItemsLoaded: state.customizeDailyReport.isExtraItemsLoaded
  };
};

1
2
3
import { createSelector } from "reselect";
export const storesSelector = state => state.user.data.stores || [];

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// @flow
import { combineReducers } from "redux";
import storeIndicesSummary from "./storeIndicesSummary";
import storeIndicesDetail from "./detail";
import { type State as DetailState } from "./detail";
import { type State as StoreIndicesSummaryState } from "./storeIndicesSummary";
export type TStore = {|
  +detail: DetailState,
  +summary: StoreIndicesSummaryState
|};
export default combineReducers({
  summary: storeIndicesSummary,
  detail: storeIndicesDetail
});

1
2
3
4
5
6
7
8
9
// @flow
import { type TStore } from "../store";
const mapStateToProps = (state: TStore) => {
  return {
    isExtraItemsLoading: state.customizeDailyReport.isExtraItemsLoading,
    isExtraItemsLoaded: state.customizeDailyReport.isExtraItemsLoaded
  };
};

1
2
3
4
5
6
7
8
9
10
// @flow
import { type TStore } from "../store";
const mapStateToProps = (state: TStore) => {
  return {
    isExtraItemsLoading: state.customizeDailyReport.isExtraItemsLoading,
    isExtraItemsLoaded: state.customizeDailyReport.hoge
    // Error Cannot get state.customizeDailyReport.hoge because property hoge is missing in State [1].
  };
};

1
2
3
4
type DispatchProps = {|
  +selectStore: typeof dataOutputActions.selectStore,
  +cancelStore: typeof dataOutputActions.cancelStore
|};

1
2
3
4
5
6
7
8
export type SelectStoreAction = {|
  +type: "output/SELECT_STORE",
  +payload: string
|};
export const selectStore = (storeId: string): SelectStoreAction => {
  return { type: "output/SELECT_STORE", payload: "1234" };
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
import { all, fork, take, put, select } from "redux-saga/effects";
import {
  types,
  actions,
  type StartPostNoteAction
} from "../modules/postCustomize";
import dailyReportAPI from "../services/dailyReport";
import {
  type Note,
  type Report,
  type APIResponse,
  type APIError
} from "../typedef";
function* postNoteSaga() {
  while (true) {
    const action: StartPostNoteAction = yield take(types.START_POST_NOTE);
    const data: Note = action.payload;
    const {
      payload,
      error
    }: { payload: APIResponse<Report>, error: APIError } = yield call(
      dailyReportAPI.postNote,
      data
    );
    if (payload && !error) {
      yield put(actions.successPostNote(payload.result));
    } else {
      yield put(actions.failPostNote(error.message));
    }
  }
}