flowtypeでStateless Functions Componentsを使う

Stateless Functions Components(SFC)とは、インスタンスも状態も持たないただの関数である。
界隈的には、コンポーネントの組み立てには基本SFCを使うとのこと。
利点については、以下のスライドがくわしい。

Reactの最新動向とベストプラクティス // Speaker Deck

flowtypeで、SFCの型推論を利用するには、普通の関数に型を付けるのと同様にするのでよい。それで、コンポーネント使用時に型推論が効くようになる。
どうやら今年の2月には利用可能だったようだが、ドキュメントに反映されたのが6月だったので気づかなかった。

type Props = {
  name: string
};

const Hello = ({name}: Props) => (
  <div>Hello {name}</div>
);

ReactDOM.render(<Hello name="World"/>, mountNode);

これでPropsのチェックができる。
例えば、

<Hello/>

とPropsを渡さなかった場合、flowtypeが型エラーを起こす。

 20:           <Hello/>
               ^^^^^^^^ React element `Hello`
 10: const Hello = ({name}: Props) => (
                            ^^^^^ property `name`. Property not found in
 20:           <Hello/>
               ^^^^^^^^ props of React element `Hello`

基本的には、エディタのプラグインの支援でリアルタイムにチェックする。

上記のスクリーンショットは、atomでlinter-flowを使用時のもの。詳しい環境が知りたければをAtomにflowtype環境をつくる - Qiitaを参考にしてほしい。

おわりに

それにしても、Flowの正式名称がよくわからない。
ロゴはflow、urlはflowtype、ドキュメントではFlow、公式のtwitterはflowtype。
単に「フロウ」というとヒップホップ感が出てぱないので、やはりflowtypeと呼ぶのがいいのだろうか。