React TypeScript hoisting statics with a higher-order component

Question

I'm trying to port my project from JavaScript to TypeScript. I have a higher-order higher-order component called hoistStatics, which can take in a HOC and hoist the statics of the wrapped component

import hoistNonReactStatics from 'hoist-non-react-statics';

export const hoistStatics = higherOrderComponent => BaseComponent => {
  const NewComponent = higherOrderComponent(BaseComponent);
  hoistNonReactStatics(NewComponent, BaseComponent);
  return NewComponent;
};

My problem, is I have no idea how to type this. Is there a way to type a generic higher-order component? How would I have to deal with props in this case?

Answer 1

You need to type the HOC and then use it to type the HOHOC.

import hoistNonReactStatics from 'hoist-non-react-statics';

type HOC<InnerProps, OuterProps = InnerProps> = (
  Component: React.ComponentType<InnerProps>,
) => React.ComponentType<OuterProps>;

const hoistStatics = <InnerProps, OuterProps>(
  higherOrderComponent: HOC<InnerProps, OuterProps>,
): HOC<InnerProps, OuterProps> => (
  BaseComponent: React.ComponentType<InnerProps>,
) => {
  const NewComponent = higherOrderComponent(BaseComponent);
  hoistNonReactStatics(NewComponent, BaseComponent);
  return NewComponent;
};

export default hoistStatics;