ReactRedux.connect の mergeProps と型定義

2018-06-08 Fri.

ReactRedux の connect の型定義

型定義無しの場合は以下のように書く前提とする。

1export default connect(mapStateToProps, mapDispatchToProps)(MyComponent);

型定義を付ける場合は Generics 記法で以下のように書く。

1export default connect<StateProps, DispatchProps, OwnProps>(
2  mapStateProps,
3  mapDispatchToProps
4)(MyComponent);

この記法により、 mapStateToProps DispatchProps により生成される Props の型、 OwnProps(<MyComponent /> に渡す Props) の型がそれぞれ定義されるため、Component 記述の際に渡される Props に対して型制約を付けることができる。

しかし mergeProps を使用する場合、上記の型定義だと壊れてしまう。

mergeProps 使う場合の型定義

結論としては以下の通りになる。

type Props = StateProps & DispatchProps & OwnProps である。

1export default connect<StateProps, DispatchProps, OwnProps, Props>(
2  mapStateProps,
3  mapDispatchToProps,
4  mergeProps
5)(MyComponent);

mergeProps で dispatch をする場合は以下になるかと思われる。

1export default connect<StateProps, {}, OwnProps, Props>(
2  mapStateProps,
3  (dispatch: Dispatch) => ({ dispatch }),
4  mergeProps
5)(MyComponent);

多くの解説では上記の 3 つまでしか触れられていないことが多いが、 connect の Generics 引数(？)は型定義を見ると 5 つまで取れることがわかる。

1export interface Connect {
2  (): InferableComponentEnhancer<DispatchProp>;
3
4  <TStateProps = {}, no_dispatch = {}, TOwnProps = {}, State = {}>(
5    mapStateToProps: MapStateToPropsParam<TStateProps, TOwnProps, State>
6  ): InferableComponentEnhancerWithProps<TStateProps & DispatchProp, TOwnProps>;
7
8  <no_state = {}, TDispatchProps = {}, TOwnProps = {}>(
9    mapStateToProps: null | undefined,
10    mapDispatchToProps: MapDispatchToPropsParam<TDispatchProps, TOwnProps>
11  ): InferableComponentEnhancerWithProps<TDispatchProps, TOwnProps>;
12
13  <TStateProps = {}, TDispatchProps = {}, TOwnProps = {}, State = {}>(
14    mapStateToProps: MapStateToPropsParam<TStateProps, TOwnProps, State>,
15    mapDispatchToProps: MapDispatchToPropsParam<TDispatchProps, TOwnProps>
16  ): InferableComponentEnhancerWithProps<
17    TStateProps & TDispatchProps,
18    TOwnProps
19  >;
20
21  <
22    TStateProps = {},
23    no_dispatch = {},
24    TOwnProps = {},
25    TMergedProps = {},
26    State = {}
27  >(
28    mapStateToProps: MapStateToPropsParam<TStateProps, TOwnProps, State>,
29    mapDispatchToProps: null | undefined,
30    mergeProps: MergeProps<TStateProps, undefined, TOwnProps, TMergedProps>
31  ): InferableComponentEnhancerWithProps<TMergedProps, TOwnProps>;
32
33  <no_state = {}, TDispatchProps = {}, TOwnProps = {}, TMergedProps = {}>(
34    mapStateToProps: null | undefined,
35    mapDispatchToProps: MapDispatchToPropsParam<TDispatchProps, TOwnProps>,
36    mergeProps: MergeProps<undefined, TDispatchProps, TOwnProps, TMergedProps>
37  ): InferableComponentEnhancerWithProps<TMergedProps, TOwnProps>;
38
39  <no_state = {}, no_dispatch = {}, TOwnProps = {}, TMergedProps = {}>(
40    mapStateToProps: null | undefined,
41    mapDispatchToProps: null | undefined,
42    mergeProps: MergeProps<undefined, undefined, TOwnProps, TMergedProps>
43  ): InferableComponentEnhancerWithProps<TMergedProps, TOwnProps>;
44
45  <
46    TStateProps = {},
47    TDispatchProps = {},
48    TOwnProps = {},
49    TMergedProps = {},
50    State = {}
51  >(
52    mapStateToProps: MapStateToPropsParam<TStateProps, TOwnProps, State>,
53    mapDispatchToProps: MapDispatchToPropsParam<TDispatchProps, TOwnProps>,
54    mergeProps: MergeProps<TStateProps, TDispatchProps, TOwnProps, TMergedProps>
55  ): InferableComponentEnhancerWithProps<TMergedProps, TOwnProps>;
56
57  <TStateProps = {}, no_dispatch = {}, TOwnProps = {}, State = {}>(
58    mapStateToProps: MapStateToPropsParam<TStateProps, TOwnProps, State>,
59    mapDispatchToProps: null | undefined,
60    mergeProps: null | undefined,
61    options: Options<State, TStateProps, TOwnProps>
62  ): InferableComponentEnhancerWithProps<DispatchProp & TStateProps, TOwnProps>;
63
64  <TStateProps = {}, TDispatchProps = {}, TOwnProps = {}>(
65    mapStateToProps: null | undefined,
66    mapDispatchToProps: MapDispatchToPropsParam<TDispatchProps, TOwnProps>,
67    mergeProps: null | undefined,
68    options: Options<{}, TStateProps, TOwnProps>
69  ): InferableComponentEnhancerWithProps<TDispatchProps, TOwnProps>;
70
71  <TStateProps = {}, TDispatchProps = {}, TOwnProps = {}, State = {}>(
72    mapStateToProps: MapStateToPropsParam<TStateProps, TOwnProps, State>,
73    mapDispatchToProps: MapDispatchToPropsParam<TDispatchProps, TOwnProps>,
74    mergeProps: null | undefined,
75    options: Options<State, TStateProps, TOwnProps>
76  ): InferableComponentEnhancerWithProps<
77    TStateProps & TDispatchProps,
78    TOwnProps
79  >;
80
81  <
82    TStateProps = {},
83    TDispatchProps = {},
84    TOwnProps = {},
85    TMergedProps = {},
86    State = {}
87  >(
88    mapStateToProps: MapStateToPropsParam<TStateProps, TOwnProps, State>,
89    mapDispatchToProps: MapDispatchToPropsParam<TDispatchProps, TOwnProps>,
90    mergeProps: MergeProps<
91      TStateProps,
92      TDispatchProps,
93      TOwnProps,
94      TMergedProps
95    >,
96    options: Options<State, TStateProps, TOwnProps, TMergedProps>
97  ): InferableComponentEnhancerWithProps<TMergedProps, TOwnProps>;
98}

あまり mergeProps の型定義についてのドキュメントがないので、複雑だが型定義を読む方が早い。

オーバーライドしているので WebStorm でも型候補が出ないのが惜しいところである。