Typing a rest property in object destructuring as a function argument

[k15a]

Hey,

I have a React component which takes a render prop and some other props which are variable. The render prop is called with all the other props.

The problem is that Flow can't infer the type of the other props correctly but I can't statically type them because they have to be variable.

My component looks like the following:

import * as React from 'react'

type TContainerProps<TOtherProps> = {
    render: TOtherProps => React.Node,
}

function Container<TOtherProps: {}>({
    render,
    ...otherProps
}: TOtherProps & TContainerProps<TOtherProps>): React.Node {
    return render(otherProps)
}

const component = (
    <Container
        hello="world"
        foo={123}
        render={props => {
            // The type of props should be
            // {
            //  hello: string,
            //  foo: number,
            // }
            //
            // and not
            // {
            //  foo: number,
            //  hello: string,
            //  render: (
            //      _: any
            //  ) => ?(
            //      | number
            //      | string
            //      | boolean
            //      | React$Element<any>
            //      | Iterable<any>),
            // }
            ;(props: {| hello: string, foo: number |})

            console.log(props)
            return <div>{props.hello}</div>
        }}
    />
)

Link to Playground

Is there a way to type this component correctly with Flow?

[k]

I don't think $Rest is working properly....

See this example Try Flow