[@types/react] React.Children.only types seems to be broken

[ipanasenko]

Hey everyone.
Updated to latest @types/react, started to get this error for this code:

export const Wrapper: React.FC = ({ children }) => React.Children.only(children);

TS2322: Type 'string | number | boolean | {} | ReactElement<any, string | ((props: any) => ReactElement<any, string | any | (new (props: any) => Component<any, any, any>)>) | (new (props: any) => Component<any, any, any>)> | ReactPortal' is not assignable to type 'ReactElement<any, string | ((props: any) => ReactElement<any, string | any | (new (props: any) => Component<any, any, any>)>) | (new (props: any) => Component<any, any, any>)>'.
   Type 'string' is not assignable to type 'ReactElement<any, string | ((props: any) => ReactElement<any, string | any | (new (props: any) => Component<any, any, any>)>) | (new (props: any) => Component<any, any, any>)>'.

index.d.ts(470, 15): The expected type comes from the return type of this signature.

Can't figure out what this is wrong. What am I missing here?
Thanks!

[sormy]

Shrinkwrap to 16.7.20 where it still works well, 16.7.21 and 16.7.22 are broken

[richsilv]

This is a consequence of https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react/index.d.ts#L471

In the definition of FunctionComponent, children is (correctly) a ReactNode, but it has to return a ReactElement or null, which excludes things like string, boolean, number, etc.

    type ReactNode = ReactChild | ReactFragment | ReactPortal | boolean | null | undefined;
    type ReactChild = ReactElement<any> | ReactText;
    type ReactText = string | number;

So the upshot is that you can't just return a FunctionComponent's children, whether you're using React.Children.only or not, which seems to be wrong to me. See #33006.

[richsilv]

Actually, it's being tracked here - it's due to a compiler issue, and there's promise of a fix soon. In the meantime, this should work:

export const Wrapper: React.FC = ({ children }) => (<React.Fragment>React.Children.only(children)</React.Fragment>);

[jddxf]

#32279 may also be relevant as it removed the constraint on the return type of React.Children.only which should always be ReactElement.

[orta]

Hi thread, we're moving DefinitelyTyped to use GitHub Discussions for conversations the @types modules in DefinitelyTyped.

To help with the transition, we're closing all issues which haven't had activity in the last 6 months, which includes this issue. If you think closing this issue is a mistake, please pop into the TypeScript Community Discord and mention the issue in the definitely-typed channel.