【Flow & React】 Reactでの静的型チェックの方法「Flow Cookbook: Flow & React」の意訳

Flow Cookbook: Flow & Reactを意訳しています

Flow typeの型注釈は実行時チェックのprotoTypesの代替案として提供されています。
Flowが持つ静的型チェックはいくつかの利点があります

・型に問題がある場合はすぐに伝えます
・FlowTypeはpropTypesよりより厳密に、より簡潔にチェックできます
・Flowはpropsと同じようにsteteチェックも可能です
・componentが正しいpropsを得ているか、propsとstteはrenderメソッドや他のcomponenのメソッドの中で正確に使われているかチェックします

component class　上の型パラメーターの形式は

[javascript]
class MyComponent extends React.Component<DefaultProps, Props, State//1_1> {
state: State //1_2

/* ... */
}
[/javascript]

DefaultProps,PropsとStateはあなたがほしいオブジェクト型にできます
例えば、
componentはpropsとしてtitle, createAt, authorIdを持ち、
Propsに対してこのように宣言することができます

[javascript]
type Props = {
title: string,
createdAt: Date,
authorId: number,
}
[/javascript]

使用しない全ての型パラメーターに対して、
代わりにvoid型を与えます。
例えば、
内部的にstateを持たないcomponentに対して3番目型パラメーターにvoidを与えます

もしdefaultPropsを使用するなら、
propsの型にはそれらdefault値を持っている全てのpropsに型を与えなければいけません
defaultPropsへの型はdefault値を持っているpropsへの型のみ提供されます。

state型はそれがvoid型じゃない限り、2回与える必要があることに注意してください。
第３の型パラメーターとして一回。
stateインスタンスの値の型としてもう一度。です。
( 上記コードの1_1,1_2の部分)

functional componentのstatelessに対する形式は

[javascript]
function MyComponent(props: Props): React.Element<*> {
/* ... */
[/javascript]

もう一度言います、
Propsはあなたが欲しいどんなObject型にもなることができ、
全てのpropsへの型を含めなければなりません。

返す型、React.Element<*>に注意してください

Flowは内部的な詳細を追跡するために、要素を作ったpropsやclassのようなElementに対しての型パラメータを使います
あなたはおそらく＊(アスタリスク)のようなパラメーターを指定したくはないでしょう。

Reactへの型定義はFlowの中で作られてます
それらの定義を見て、Flowが何を期待しているかを正確に見ることは有効です
Flowを使うことについて知っている多くのことはそのファイルを調べるところから来ており、
他のものは同じディレクトリにあります。

続く。。