Flow: Typing React HOC with spread props

[paulshen]

I'm trying to type a React higher-order component similar to the one given in the example but I'm getting errors with transferring props. It seems that Flow isn't happy with the spread operator on a type that is used with $Diff.

From the docs, this is the example of a HOC injecting props.

Here is an example of what I'm running into.

9:       return <Komponent date={new Date()} {...this.props} />;
                ^ props of React element `Komponent`. Expected object instead of
9:       return <Komponent date={new Date()} {...this.props} />;
                                                 ^ Props

This works. Note how I annotate Props: Object but have to remove the $Diff for this to work.

[tricoder42]

I'm having the same problem. The good thing is that following construct allows prop type checking for wrapped component, which is exactly what I needed. The only problem is spread operator above, so I suppressed the type checking for that line.

[lionelB]

@paulshen Thanks a lot for you solution. Having the same problem and it fixes it !

I've added a WrappedProps type to ensure Komponent is having a date prop

type DateProp = {date: Date}
type WrappedProps<P, DateProp> = P & DateProp  

function injectDate<Props: Object, C: React.Component<*, WrappedProps<P, DateProp>, *>>(

I've added an example

[nmn]

Here's a working example with $Diff in place:
LINK

[lionelB]

@nmn thanks for the answer. I can't understand why explicitly specifying react component generics for the returned Class not working
I thought using <D, $Diff<Props, {date: Date}>, any>> in favor of <*, *, *> should work but that's not the case. What the difference between explicitly specifying react component generics extends React.Components<D, P, S> vs function return typed (): Class<React.Component<D, $Diff<Props, {data: Date}>, any>>