Incorrect union type resolution of TSX attributes

[spion]

TypeScript Version: 2.7.0-rc (also reproduced in typescript@next i.e. 2.8.0-dev.20180126)

Search Terms: label:Bug tsx

Code

type ComponentProps =
  | {
      optionalBool: true;
      mandatoryFn: () => void;
    }
  | {
      optionalBool: false;
    };

let Funk = (_props: ComponentProps) => <div>Hello</div>;

// Variation 1: error
let Fail1 = () => <Funk mandatoryFn={() => {}} optionalBool={true} />

Expected behavior:

No type errors reported.

Actual behavior:

The following error is generated:

error TS2322: Type '{ mandatoryFn: () => void; optionalBool: boolean; }' is not assignable to type '(IntrinsicAttributes & { optionalBool: true; mandatoryFn: () => void; }) | (IntrinsicAttributes &...'.
  Type '{ mandatoryFn: () => void; optionalBool: boolean; }' is not assignable to type 'IntrinsicAttributes &{ optionalBool: false; }'.
    Type '{ mandatoryFn: () => void; optionalBool: boolean; }' is not assignable to type '{ optionalBool: false; }'.
      Types of property 'optionalBool' are incompatible.
        Type 'boolean' is not assignable to type 'false'.

Playground Link:
N/A - playground doesn't allow selection of typescript 2.7

Related Issues: N/A

Other variations attempted:

// Variation 2: error
let Fail2 = () => <Funk mandatoryFn={() => {}} optionalBool={true as true} />

// Variation 3: error
let True = true as true;
let Fail3 = () => <Funk mandatoryFn={() => {}} optionalBool={True} />

// Variation 4: error
let attrs = {optionalBool: true, mandatoryFn: () => {}}
let Fail4 = () => <Funk {...attrs} />

// Variation 5: no error:
let attrs2 = {optionalBool: true as true, mandatoryFn: () => {}}
let Success = () => <Funk {...attrs2} />

[weswigham]

I think this is a dupe of #21436, actually. Or rather #21436 may be a dupe of this, but #21436 doesn't need JSX for its repro.