Flow: Could React props be described as exact object types?

[keyz]

class Foo extends React.Component {
  props: {|
    name: string,
  |};

  render() {
    return <div>{this.props.name}</div>;
  }
}

const bar2 = <Foo name="Jason" />;

The code above (flowtype.org/try) results in an error:

16: const bar2 = <Foo name="Jason" />;
                 ^ props of React element `Foo`. Inexact type is incompatible with exact type
7:   props: {| 
            ^ exact type: object type

I think this would help for issues like facebook/react#1587, in which we can warn when an unspecified prop is passed into a component. Will this be supported? :)

[gcanti]

Before exact types were supported, using

type Strict<P> = P & $Shape<P>;

did work fine for me.

@vkurchatkin The difference between Strict<P> and $Exact<P> seems that inflows to exact upper bounds must be exact newtests/exact/exact_basics.js

---

Note: using the new jsx pragma (v0.34), functional components seem to work as expected with exact types

// @flow
// @jsx React.createElement

import React from 'react'

const Foo = (props: {| name: string |}) => <div/>

;<Foo name="Jason" />
;<Foo name="Jason" a="s" /> // <= error

while class components still don't work

[samwgoldman]

Yeah we want to do this but we need to fix JSX children first

[omerzach]

This already seems to work for components in different files—if I define that Foo in one file and create bar2 in another I don't get the Inexact type is incompatible with exact type error.

Is that what you meant by "fix JSX children first" or is there some other bug related to the two things being in the same file?

[jedmao]

I've got the same issue with this syntax.

[iainbeeston]

I'll second what @omerzach said. If I change the example above to define the component in one file and require it and use it in another, I get no error. I'm also using react components with exact object types successfully in a larger project.

[IanVS]

Yeah we want to do this but we need to fix JSX children first

Since flow can understand JSX children now, maybe this is unblocked?

[asolove]

In Flow v0.53, after minor syntax changes, both the original and a later example from this issue seem to work.

So I think this can be closed. (/cc @calebmer)