facebook / facebook/flow

Typing a rest property in object destructuring as a function argument

Open
#5,060 1 comment 0 reactions 0 assignees View on GitHub
Typing: rest
Dominant language
Rust
Stars
22.3k
Forks
1.9k
PR merge metrics
No merged PRs in 30d

Description

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:

```js

import * as React from 'react'

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

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

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

console.log(props)
return

{props.hello}

}}
/>
)

```

[Link to Playground](https://flow.org/try/#0FASwtgDg9gTgLgAgFQIIYGcECUCmqDGiAZjFGAgOQx6EXDBwCeEOCAKgMJQB2cqI3HDAAKpCOgA8bAPJwAFkNFRxAPgQBeBAG9gASGrcAJkIBc7WQpFjM6tbgJwAdADkoxgDTAAvvSIBXbkIQHgQuXn5BGCkLRWszLS8VAAodfRwjIU9dRxyoeVjldG8zGXyrQoQAMnYwvgEC8WiypVUASjN7Qhc3VlTqOD8YbgQDYxgkvMsW9FbvenwedEQFyB50xE0kvQlaiKE9XQUAGyOodQAiAHdYI8Nzg6IoM60ARgAmAGYfXTSMmHUtBBrBo1KkfgB6cHsBQIJgsBBQIgIIEVdByKB+W4IABGOAOukh2nxhMOOBOUDMSxgAgA5lkIVDdI8KQhuH4wLiYPSCVDvgziVDUEZWXkBUSfjyEEynmY2RzMmLSeTKXBqdw6YrRqYEFsJSTdAB9MxCxiK1oghAAfl1DKlugAPqz2ZzFQ6EFTaa7Hdinkc8NwvdgaHAACQAUT9YHWEhNKkDAEk4EJUNi-THuIwVK1uYS+boANxJFHieKO46nFVqukIZmy51CBD2ryzfELbjoKB+xynGlF6yzCX9QbDCSGEAANxUgOsjnLUC8EnBY8nBy833BcdmQA)

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

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.