Typescript returns error when a function type is FunctionalComponent, but not for arrow function

Issue

Below is the example:

function RoundButton(): React.FC {
  return <div>"hello world"</div>;
}

gives an error:

Type 'Element' is not assignable to type 'FC<{}>'. Type 'Element'provides no match for the signature '(props: { children?: ReactNode;}, context?: any): ReactElement<any, any> | null'.ts(2322)

but the code below:

const RoundButton: React.FC = () => {
      return <div>"hello world"</div>;
    }

does not. What am I missing here?

Solution

In the first case, you're saying what the function returns, but in the second case you're saying what the function is.

The second one is correct. React.FC is a function type. Your second block says your function is a React.FC, which means it accepts props: PropsWithChildren<P>, context?: any and returns ReactElement<any, any> | null.

If you wanted to use function syntax rather than arrow syntax, you could write it as:

const RoundButton: React.FC = function() {
    return <div>"hello world"</div>;
};

...or if you really want a function declaration rather than a function expression, since we know React.FC (like all component functions) has only a single parameter, we can use the Parameters and ReturnType utility types:

function RoundButton2(props: Parameters<React.FC>[0]): ReturnType<React.FC> {
    return <div>"hello world"</div>;
}

Answered By - T.J. Crowder