In the example above, we divide the connection to the repository (Redux) into two steps. In the first stage, we get a higher order component storeEnhancer (aka InferableComponentEnhancerWithProps ) to extract the injected property types from it using our helper type TypeOfConnect and further combining (through the intersection of types 3r3–3263. & 3r3–3264.) the obtained property types with the property types of the component itself. In the second stage, we simply decorate our original component. Now, whatever you add to the connector, it will automatically fall into the component property types. Great, what we wanted to achieve!

The attentive reader noted that action generators (for brevity, hereafter, simplify to the term action) with side effects (thunk action creators) are further processed using the function 3r-3263. unboxThunk . What caused such an additional measure? Let's figure it out. First, we will look at the signature of such an action using the example of a program from the repository:

    const thunkAction = (delay: number): ThunkAction    => (dispatch) => {
console.log ('waiting for', delay);
setTimeout (() => {3r3323272. console.log ('reset');
dispatch (reset ());
}, delay);
};    

As can be seen from the signature, our action does not immediately return the target function, but first intermediate, which is picked up by 3r-3263. redux-middleware to be able to produce side effects in our main function. But when using this function in the connected form in the component properties, the signature of this function is reduced, excluding the intermediate function. How to describe it in types? Need a special function converter. And again TypeScript shows its power. First we describe the type that removes the intermediate function from the signature:

    CutMiddleFunction    = T extends ( arg: infer Args) => ( args: any[]) => Infer R
? ( arg: Args) => R
: never
;    

Here, in addition to the conditional types, a completely new innovation from TypeScript 3.0 is used, which allows you to display the type of an arbitrary (rest parameters) number of function arguments. See 3r33333 for details. documentation. . It now remains to cut out the extra part from our action in a rather rigid way:

    const unboxThunk =  ThunkAction   ,
) => (
ThunkFn as any as CutMiddleFunction  
);    

Having skipped the action through such a converter, we have the required signature at the output. Now the action is ready for use in the connector.

So, by simple manipulations, we reduce our manual work when writing typed code on our stack. If you go a little further, you can also simplify the typing of action games and reducers, as we did in 3r33255. redux-modus .

P.S. When using dynamic action binding in the connector through the function and 3r-3263. redux.bindActionCreators we will need to take care of the more correct typing of this utility (perhaps by writing your own wrapper).