TChildren conflicts with ReactNode children
TonCherAmi opened this issue · 2 comments
Hi. I've run into some typing issues that seem to be caused by TChildren. When trying to pass children of type React.ReactNode (this seems to be the recommended way to type children) to another component that also takes React.ReactNode children, I get this error:
TS2769: No overload matches this call.
Overload 1 of 2, '(props: Props | Readonly<Props>): ReactModal', gave the following error.
Type 'ReactNode' is not assignable to type '((string | number | boolean | Element | ((props: any) => TChildren) | TChildren[]) & (boolean | ReactChild | ReactFragment | ReactPortal)) | null | undefined'.
Type '{}' is not assignable to type '((string | number | boolean | Element | ((props: any) => TChildren) | TChildren[]) & (boolean | ReactChild | ReactFragment | ReactPortal)) | null | undefined'.
Type '{}' is not assignable to type 'TChildren[] & ReactPortal'.
Type '{}' is missing the following properties from type 'TChildren[]': length, pop, push, concat, and 31 more. Overload 2 of 2, '(props: Props, context: any): ReactModal', gave the following error.
Type 'ReactNode' is not assignable to type '((string | number | boolean | Element | ((props: any) => TChildren) | TChildren[]) & (boolean | ReactChild | ReactFragment | ReactPortal)) | null | undefined'.
I've set up a sample project that illustrates the problem: https://github.com/TonCherAmi/jsx-control-statements-sample
It seems to go away if I remove the children property from the IntrinsicAttributes interface and add it to the function declarations instead, like so:
declare function Choose(props: { children: React.ReactNode }): JSX.Element;
declare function When(props: { condition: boolean, children: React.ReactNode }): JSX.Element;
// ...Are there any issues with this approach that you are aware of?
As is I'm forced to cast React.ReactNode children to JSX.TChildren every time this comes up.
Would it be okay to submit a pull request with the fix?