reactjs - Cannot assign types to a React High Order Component

Question

I need to create a HOC that takes a component and returns a new one that takes flattened props (I'am using flat to make it happen) and applies the unflattened props to the original component.

The HOC without types looks like this (I have tested it and it's working as expected):

const HOC = (Component) => (props) => {
    const newProps = unflatten(props);

    return <Component {...newProps} />;
};

The problem is that now I need to add types to it so this is what I think should work:

const HOC = (Component: React.ComponentType) => (props: { [key: string]: string; }) => {
    const newProps = unflatten(props);

    return <Component {...newProps} />;
};

This solution is causing this error on the final return line

Type 'unknown' is not assignable to type 'IntrinsicAttributes & { children?: ReactNode; }'.
  Type 'unknown' is not assignable to type 'IntrinsicAttributes'.ts(2322)

Answer 1

You can do the following

const newProps = unflatten(props) as { [key: string]: string; };

or

const newProps = unflatten(props) as  any;