React.ComponentにFlowで型をつけるスニペット

v0.38.0時点．

こんな感じに定義されてる．

https://github.com/facebook/flow/blob/v0.38.0/lib/react.js#L224

declare module react {

  // snip.

  declare var Component: typeof React$Component;
  declare var PureComponent: typeof React$PureComponent;
  declare var Element: typeof React$Element;
}

React$Componentの定義はファイルの頭の方にある．

https://github.com/facebook/flow/blob/v0.38.0/lib/react.js#L16

declare class React$Component<DefaultProps, Props, State> {

ということで，

type State = {
  // snip.
}

class SugoiContainer extends Component<void, void, State> {
  // snip.
}

ただ，このままやると意味不明なエラーを吐いて死ぬ． 『Flowtypeを使ってReactComponentで型安全を手に入れる - Qiita』で「残念ながらうまく動きませんでした」といわれているところだと思う．

state: Stateをクラス定義に差し込めばとりあえず回避可能なので，$Abstractがわるいのかなとぼんやり思いつつ未調査．

  type State = {
    // snip.
  }

  class SugoiContainer extends Component<void, void, State> {
+   state: State
    // snip.
  }

完全版はこんなかんじ？

/* @flow */
import React, { Component } from "react"

type RequiredProps = {
  // snip.
}

type DefaultProps = {
  // snip.
}

type Props = RequiredProps & DefaultProps

type State = {
  // snip.
}

class SugoiContainer extends Component<DefaultProps, Props, State> {
  state: State
  // snip.
}

毎回書いてて面倒なのでスニペット登録したほうが良いのかもしれない．

WebデベロッパーのためのReact開発入門 JavaScript UIライブラリの基本と活用