Stateless functions used as JSX components don't support overloading

[apexskier]

TypeScript Version: 2.2.1

Code

import * as React from "react";

interface A {
    requiredA: string;
}
interface B {
    requiredB: string;
}

function TestA(props: A): JSX.Element;
function TestA(props: B): JSX.Element;
function TestA(props: A | B) {
    return <div />;
}

<TestA requiredA={"test"} />;
<TestA requiredB={"test"} />;

function TestB(props: B): JSX.Element;
function TestB(props: A): JSX.Element;
function TestB(props: A | B) {
    return <div />;
}

<TestB requiredA={"test"} />;
<TestB requiredB={"test"} />;

Expected behavior:

This should compile. Overloading function definitions should allow props of either A or B.

Actual behavior:

The compiler respects only the first overload signature. Visual studio code correctly doesn't warn inline.

src/test.tsx(17,1): error TS2324: Property 'requiredA' is missing in type 'IntrinsicAttributes & A'.
src/test.tsx(17,8): error TS2339: Property 'requiredB' does not exist on type 'IntrinsicAttributes & A'.
src/test.tsx(25,1): error TS2324: Property 'requiredB' is missing in type 'IntrinsicAttributes & B'.
src/test.tsx(25,8): error TS2339: Property 'requiredA' does not exist on type 'IntrinsicAttributes & B'.

[mhegazy]

This should be fixed in 2.3. see #9703