Flow: Flow unexpectedly confused with intersection, reports wrong error

[dperetti]

import React from 'react'

type BaseProps = {
  hasFocus: boolean,
}

class Entity {
  changeContent(content: null | string, selection: null | number): void {
  }
}

type Props = BaseProps & {
  entity: Entity,
}

export default class View extends React.Component {
  props: Props

  onChange = (value: string) => {
    this.props.entity.changeContent('blah', '12')
  }
}

Flow reports this error:

20:     this.props.entity.changeContent('blah', '12')
        ^ property `entity`. Property cannot be accessed on any member of intersection type
20:     this.props.entity.changeContent('blah', '12')
        ^ intersection

... instead of this error:

20:     this.props.entity.changeContent('blah', '12')
                                                ^ string. This type is incompatible with
8:   changeContent(content: null | string, selection: null | number): void {
                                                      ^ union: null | number

[mwalkerwells]

This is expected...you should use an exact type and the spread operator for this example:

//...

type BaseProps = {|
  hasFocus: boolean,
|}

//...

type Props = {
  entity: Entity,
  ...BaseProps
}

//...

An object literal type only means that it _at least_ has the the hasFocus: boolean, but other properties could be present. The same goes for type Props...

type BaseProps = {
  hasFocus: boolean,
}

Since other properties could be present, it's feasible for BaseProps to have a entity value, thus making the type of entity in Props unknown (and unsafe) for an intersection.

[dperetti]

Thank you. This is precisely how I ended up fixing the issue, but still:

• I probably need to think more about it but I'm not sure to fully understand your explanation, especially the implication of your last sentence : it sounds like any property would then be potentially unsafe for an intersection, defeating the purpose of intersecting object types.
  For sure the documentation needs to be clarified.
• Maybe it's my limited english, but "Property cannot be accessed on any member of intersection type" doesn't seem like an exact description of the problem.
• Also, more importantly, the error only shows up when the changeContent() signature is wrong.
  Otherwise, no error is reported.

I really wonder when this intersection type is really useful. Looks like it's troublesome to use right !

[mwalkerwells]

Yeah, exact types are much easier to reason about!

[asolove]

If I’m reading this right, looks like we understand this now and the issue can be closed. If that’s wrong, let me know and I’ll reopen.

[asolove-stripe]

As of Flow 0.55, this gets a better error message and shows that I think my intuition about this was wrong.

Here's the error that's shown:

19:     this.props.entity.changeContent('blah', '12')
        ^ property `entity`. Property cannot be accessed on any member of intersection type
19:     this.props.entity.changeContent('blah', '12')
        ^ intersection
Member 1:
12: type Props = BaseProps & {
                 ^ BasePropsError:
19:     this.props.entity.changeContent('blah', '12')
                   ^ property `entity`. Property not found in
12: type Props = BaseProps & {
                 ^ object type
Member 2:
12: type Props = BaseProps & {                             ^ object typeError:
19:     this.props.entity.changeContent('blah', '12')
                                                ^ string. This type is incompatible with
8:   changeContent(content: null | string, selection: null | number): void {
                                                      ^ union: null | number
Member 1:
8:   changeContent(content: null | string, selection: null | number): void {
                                                      ^ nullError:
19:     this.props.entity.changeContent('blah', '12')
                                                ^ string. This type is incompatible with
8:   changeContent(content: null | string, selection: null | number): void {
                                                      ^ null
Member 2:
8:   changeContent(content: null | string, selection: null | number): void {
                                                             ^ numberError:
19:     this.props.entity.changeContent('blah', '12')
                                                ^ string. This type is incompatible with
8:   changeContent(content: null | string, selection: null | number): void {
                                                             ^ number

Which lets us see that the last argument is a string when a number is expected. By changing that, the code now type-checks as expected.

[dperetti]

I was kinda right, then :-)

[asolove-stripe]

Yeah, absolutely! And this shows something I've noticed lately, that wrong error locations often lead to self-rationalizations that are misleading or wrong! So something I hope Flow continues to improve.