Union of React function components is not callable

[karol-majewski]

TypeScript Version: @3.2.0-dev.20181116

Search Terms: jsx invocations function calls resolution

Code

import * as React from 'react';

declare const Radio: () => React.ReactElement<{}>;
declare const Checkbox: React.FC;

declare const condition1: boolean;
declare const condition2: boolean;
declare const condition3: boolean;

const RandomComponent: React.FC = () => {
  if (condition1) {
    return <Radio />; // No problem
  }

  if (condition2) {
    return <Checkbox />; // No problem
  }

  const Component =
    condition3
      ? Radio
      : Checkbox;

  return <Component />; // Error: JSX element type 'Component' does not have any construct or call signatures.
};

Expected behavior:

Compiles without error.

Actual behavior:

Error: JSX element type 'Component' does not have any construct or call signatures. is reported next to return <Component />. While any of them is callable, the union of them is not.

Playground Link:

Related Issues:

Changes to JSX resolution were described in https://blogs.msdn.microsoft.com/typescript/2018/11/15/announcing-typescript-3-2-rc/.

[weswigham]

Our signature similar checks currently don't merge signatures with different parameter counts; but I don't see why not - merging a signature with no parameters with one with more parameters should be fine, since the extra params should be safe to provide to the parameter-less one. (Radio has no params, FC has one)

[karol-majewski]

@weswigham This behavior occurs even when arity is the same.

Let's make both Radio and Checkbox accept one argument:

declare const Radio: (props: {}) => React.ReactElement<{}>;
declare const Checkbox: React.FC;

declare const Component: typeof Radio | typeof Checkbox;

Radio({}); // OK
Checkbox({}); // OK

Component({}); // Error

[weswigham]

Mmm might be releated to FC's optional second argument? Will definitely be working on getting this going as expected again.

[karol-majewski]

@weswigham Thank you 🙇