react-redux の connect の Generic Types

react-reduxconnectメソッドは4つの Generic Type を受け取れます。例えばconnectを以下のように使った場合、

mapStateToProps だけの場合

connect(state => state)(class extends React.Component<{foo: string}> {/* ... */})

d.tsに書かれているこの型が適用されます。

<
  TStateProps = {},
  no_dispatch = {},
  TOwnProps = {},
  State = {}
>(
  mapStateToProps: MapStateToPropsParam<TStateProps, TOwnProps, State>
): InferableComponentEnhancerWithProps<TStateProps & DispatchProp, TOwnProps>;
  1. TStatePropsこれは Redux の State からコンポーネントへ props として渡す props の型。つまりstate => stateのように書いた場合 Redux の State と同じものになります。
  2. no_dispatch上記のは mapDispatchToPropsが無いので{}を渡します。
  3. TOwnPropsはラップされるコンポーネントの props を渡します。
  4. Stateは Redux の State そのままです。

例えば、上記の使い方で State が{hoge: number}であれば、

connect<State, {}, {foo: string}, State>(state => state)(
  class extends React.Component<{foo: string}> {/* ... */}
);

となります。

mapDispatchToProps と一緒の場合

上記のno_dispatchTDispatchPropsに変わりました。これはTStatePropsのようにこのconnect関数の中のmapDispatchToPropsの戻り値の型を指定します。

<
  TStateProps = {},
  TDispatchProps = {},
  TOwnProps = {},
  State = {}
>(
  mapStateToProps: MapStateToPropsParam<TStateProps, TOwnProps, State>,
  mapDispatchToProps: MapDispatchToPropsNonObject<TDispatchProps, TOwnProps>
): InferableComponentEnhancerWithProps<TStateProps & TDispatchProps, TOwnProps>;

例えば以下のようなprops.increment関数があるコンポーネントがあります。そしてそれはconnectの第二引数であるmapDispatchToPropsで定義している関数である場合このようになります。
connectからコンポーネントに渡すprops型もReact.Componentに追加する必要があります。

connect<State, {increment(): void}, {foo: string}, State>(
  state => state,
  dispatch => {
    return {
      increment() {/* ... */}
    }
  })
(
  class extends React.Component<{foo: string} & {increment(): void}> {/* ... */}
);