blog.euxn.me

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 でも型候補が出ないのが惜しいところである。