Even though render props and hooks are all the rage recently, I do not think HOCs as a pattern will go away anytime soon. Typing HOCs though can be a pretty daunting task especially when you go into connect style HOC where you have a HOC factory function, that is configured with function accessing props of the wrapped component.

Obviously, the best way to find out how to do it is to look at how it was already done. Redux has a good set of declaration in DefinitelyTyped and that was exactly where I looked at. If it was easy to understand what was going on there though I would not decide to write this, so I hope this explanation will help you grasp the concepts faster.

TLDR: If you just want to see the code, here it is, otherwise, continue to step by step explanation.

First, let’s see what we want to do without any typing information in plain JavaScript

This is a simplification compared to real connect function for sake of clarity of this example. But it contains all important parts that make typing such function hard and it should be easy to see how you can build on top of it and add more functionality later on.

So, in essence, this is an injector, but a dynamic one. What it injects is dependant on the result of mapProps function. Also what mapProps function should get as an argument is dependant on the WrappedComponent because it will be its props minus whatever we are injecting.

So lets first type the mapProps function. This should be easy enough:

We do not know the exact type of neither OwnProps nor MappedProps so we need to make them generic parameters:

Again compared to react-redux typings this is fairly simple. The reason is that in react-redux you also have mapDispatchToProps , mergeProps , and options and there are overloads for various combinations of those parameters as not all are required.

So what does this first function return? First let’s figure out what is the type of the WrappedComponent . We already have OwnProps and MappedProps defined there and we know that our WrappedComponent will get both so let’s try that first:

Now it is easy to see what will be the final type as we just subtract MappedProps leaving us with OwnProps :

This kinda works but this is nowhere near the complexity of react-redux typing. So let’s see how this works and what issues there are with this simple approach.