React function-returning-component regression

[ghost]

TypeScript Version: 3.2.0-dev.20181103

Code

import React = require("react");
declare function F(): C;
class C extends React.Component<{ title?: string }> {}
<F title="My Title" />

Expected behavior:

No error, as in ts3.1.

Actual behavior:

src/a.tsx:4:2 - error TS2322: Type '{ title: string; }' is not assignable to type 'IntrinsicAttributes'.
  Property 'title' does not exist on type 'IntrinsicAttributes'.

4 <F title="My Title" />
   ~

Found 1 error.

Discovered in react-helmet/v4 and react-flag-icon-css on DefinitelyTyped. The react-flag-icon-css variation is more like:

import React = require("react");
declare class C extends React.PureComponent<{}> {}
declare const F: (props: {}) => C;
<C />; // OK
<F />; // Error

[weswigham]

That.... shouldn't work. It should never have typechecked - a function that returns a component (or an instance of a component) is not a jsx element. React even has a warning for this at runtime nowadays:

Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render. Or maybe you meant to call this function rather than return it.

Those tests just straight up contain invalid react code that should never have typechecked correctly and won't work at runtime.

[donaldpipowitch]

We would need this issue to avoid invalid React code, right? https://github.com/Microsoft/TypeScript/issues/26182