$Diff is not compatible with object intersections

[aldendaniels]

type AB = {a: number, b: number};
type A = {a: number};
type B = {b: number};

const x: $Diff<AB, A & B> = {};

Gives:

6: const x: $Diff<AB, A & B> = {};
                  ^ property `b`. Property not found in
6: const x: $Diff<AB, A & B> = {};
                               ^ object literal

The right half of the union is ignored. This makes certain types of HoCs impossible to type.

[rsolomon]

This issue is killing me as well. Is there a working alternate approach that anyone has found?

[nmn]

This works:

type AB = {a: number, b: number};
type A = {a: number};
type B = {b: number};

const x: $Diff<$Diff<AB, A>, B> = {};

I think this should work too:

type AB = {a: number, b: number};
type A = {a: number};
type B = {b: number};

const x: $Diff<AB, {...A, ...B}> = {};

But right now object type spread doesn't work in any generic location.

[aldendaniels]

@rsolomo My workaround has been to manually create the wrapping components for HoCs.

The traditional HoC is created using:

function withSubscription(WrappedComponent, selectData) {
  return class extends React.Component {
    render() {
      return <WrappedComponent ... />;
    }
  };
}

class MyComponentImpl extends React.Component {
  ...
}

MyComponent = withSubscription(MyComponentImpl);

The problem is that MyComponent now takes different props than MyComponentImpl and it's not easy for flow (or humans) to do the math on what props to provide MyComponent.

Instead, I prefer to do this:

  class MyComponentImpl extends React.Component {
    ...
  }

  class WithSubscription extends React.Component {
    props: {
      render: (InjectedProps) => React$Element<*>,
    }

    render() {
      return this.props.render(injectedProps);
    }
  }

  class MyComponent extends React.Component {
   renderWithSubscription(injectedProps) {
     return <MyComponnent {...injectedProps} />;
   }

    render() {
      return <WithSubscription />
    }
  }

It's the same thing really, but at the cost of a little verbosity, it reduces all the ambiguity about props and makes using flow a synch.

[kevinbarabash]

I substituted $Rest for $Diff in my HOC definition and it fixed the issue when the HOC wraps a component whose props are a disjoint union.

[SamChou19815]

This now works