JSX props as intersection broken in nightly

TypeScript Version: 3.2.0-dev.20181019

Code

declare namespace JSX {
    interface ElementAttributesProperty { props: {}; }
}

declare class Component<P> {
  constructor(props: P);
  readonly props: Readonly<P>;
}

class C<T> extends Component<{ x?: boolean; } & T> {}
const x = <C foobar="example" />

Expected behavior:

No error.

Actual behavior:

src/a.tsx:11:12 - error TS2322: Type '{ foobar: string; }' is not assignable to type 'Readonly<{ x?: boolean | undefined; }>'.
  Property 'foobar' does not exist on type 'Readonly<{ x?: boolean | undefined; }>'.

11 const x = <C foobar="example" />

Related Issues: #27990

Discovered in reactstrap on DefinitelyTyped.

[weswigham]

We fail to produce an inference for T, and then excess property checking takes over. JSX previously was using a secondary excess property checking implementation that only took effect after assignability was checked, rather than during it.
In the playground, a normal construct invocation works the same way:

[weswigham]

The root cause (for both jsx and normal invocations) is that for a Readonly<A&B> we can only draw inferences to members of A and B today - not to A or B themselves.