The Wayback Machine - https://web.archive.org/web/20250415132601/https://github.com/microsoft/TypeScript/issues/42498
Skip to content

Not able to restrict children typeÂ?#42498

Closed
@pladaria

Description

@pladaria

Bug Report

🔎 Search Terms

react children

🕗 Version & Regression Information

  • This is the behavior in every version I tried, and I reviewed the FAQ for entries about react

⏯ Playground Link

https://www.typescriptlang.org/play?#code/JYWwDg9gTgLgBAKjgQwM5wEoFNkGN4BmUEIcA5FDvmQNwBQduEAdqvADLDMDWAXJlRgA6AGIBhADwBvOAFcoAG35soXAOYAaOLgAWwBQBNKzftjzCz+AHIQDWOAF8AfHAC8cABQz5Crbv1GWMyOAJRuLhLIcDqUBK5SPs5S-obGDhIA9MhODDAAnmD2AArEYOjuUnRw1dp6qUEA-KaCQpYwAKIKWCBBMBL5hRAEcJw8OQ4MTKzwYiSQzL3N5qKSJRBlLu5eKYHMDmGuEQbAAG5OyXW76RnHZ-R0GRlwENx0ErPgLL1OEqPccopXAAiIFONAGAiZP4-DIfebfe6POAAARgqAAtFgAB6FfCYqDEKBvOFfZgwMGoCGZEkLMlORFPVEY7G4mD4wlwYlzUnkqo1X5cf4+YGg8GQjLQvnVAU8AEKEUUqkSwU5anc2nkhkotGYnFYPFYAnQODouAAFT06FQOggskMcAARvZkMFDYSAIRcz4anI1OASVBgF0UggGTKB4NvWHqhFwIA

💻 Code

const Link: React.FC<{ url: string, children: React.ReactNode }> = ({ url, children }) => <a href={url}>{children}</a>

type Props = {
    children?: React.ReactElement<typeof Link>
}

const Component: React.FC<Props> = ({children}) => <div>{children}</div>;

// ok
<Component><Link url="">asdf</Link></Component>;

// @ts-expect-error
<Component>asdf</Component>;

// @ts-expect-error 
<Component>
    <Link url="">asdf</Link>
    <Link url="">asdf</Link>
</Component>;

// @ts-expect-error - This should be an error!
<Component>
    <span>asfd</span>
</Component>; 

🙁 Actual behavior

A non-Link element inside <Component> is accepted

🙂 Expected behavior

A non-Link element inside <Component> should be a type error

Metadata

Metadata

Assignees

No one assigned

    Labels

    DuplicateAn existing issue was already created

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions