Type inference fails for generic React props with JSX syntax, works with regular syntax

[alshain]

TypeScript Version: 2.3.4

Code

With the react TS starter pack: create-react-app.cmd generics-fail --scripts-version=react-scripts-ts, modify index.tsx as follows:

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import registerServiceWorker from './registerServiceWorker';
import './index.css';

interface Problematic<T> {
    key: T;
}

interface Props<T, R> {
    data: T;
    renderer: (props: Problematic<T>) => React.ReactElement<R>;
}

class InferenceFail<T, R> extends React.Component<Props<T, R>, {}> {

}

class Data {
  key: string;
}

let works = new InferenceFail({data: new Data(), renderer: ({key}) => <div>{key.key}</div>});

let fails = <InferenceFail data={new Data()} renderer={({key}) => <div>{key.key}</div>} />;
//                                                                          ^^^

ReactDOM.render(
  (
    <div>
    {works}
    {fails}
  </div>),
  document.getElementById('root') as HTMLElement
);
registerServiceWorker();

Expected behavior:

No compiler error. The InferenceFail instance should be correctly inferred to have actual type parameter Data for T.

Actual behavior:

Compiler error:

(25,77): error TS2339: Property 'key' does not exist on type '{}'.

T is inferred to be {}.

[mhegazy]

duplicate of #14729

[mhegazy]

Automatically closing this issue for housekeeping purposes. The issue labels indicate that it is unactionable at the moment or has already been addressed.