Skip to content

JSX render prop children incorrectly intersects with {} #2703

@karmeleon

Description

@karmeleon

Steps to reproduce

import * as React from 'react';

type BaseProps = { locale: string };

type Props<T extends BaseProps> = {
    children: (props: T) => React.ReactNode;
} & T;

declare function Comp<T extends BaseProps>(props: Props<T>): React.JSX.Element;

const bp: BaseProps = { locale: 'en' };

// Error in ts-go: Type '(props: ...) => Element' is not assignable to
// type '((props: ...) => ReactNode) & {}'.
const el = <Comp {...bp}>{(props) => <div>{props.locale}</div>}</Comp>;

// But the equivalent non-JSX call works fine:
Comp({ ...bp, children: (props) => <div>{props.locale}</div> });

Behavior with typescript@6.0

No error

Behavior with tsgo

__repro.tsx:15:26 - error TS2322: Type '(props: { locale: string; children: {}; }) => Element' is not assignable to type '((props: { locale: string; children: {}; }) => ReactNode) & {}'.
  Type '(props: { locale: string; children: {}; }) => Element' is not assignable to type '{}'.

15 const el = <Comp {...bp}>{(props) => <div>{props.locale}</div>}</Comp>;
                            ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  __repro.tsx:6:5 - The expected type comes from property 'children' which is declared here on type 'IntrinsicAttributes & { children: (props: { locale: string; children: {}; }) => ReactNode; } & { locale: string; children: {}; }'
    6     children: (props: T) => React.ReactNode;
          ~~~~~~~~

Metadata

Metadata

Assignees

Labels

Domain: JSXRelated to JSX/TSXbugSomething isn't working

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions