Experiencing compile error with a higher order component's mapState function that returns an object within an object

Question

30/11/2019 Updated the code sandbox with the solution here.

Original Question asked on 28/11/2019 I am trying to learn Higher Order

Answer 1

When you're injecting Props by using mapStateToProps and dispatchProps in a connect you have to subtract these props from the BaseProps generic type by using the Diff helper type. Moreover, if you want to use these injected Props in the Hoc component you have to pass them as the Component type argument. e.g. React.Component<InjectedProps>.

This is a reason for the errors.

So in your example props are:

type InjectedProps = TStateProps & TDispatchProps;

type HocProps = Diff<BaseProps, InjectedProps>;

class Hoc extends React.Component<InjectedProps> { ... }

const ConnectedHoc = connect<
    TStateProps,
    TDispatchProps,
    HocProps,
    RootState
  >(
    mapStateToProps,
    dispatchProps
  )(Hoc);

Also, please check the same discussion in the react-redux-typescript-guide