Checking the props type of the children in React JSX

[remote vector]

Hi, I expected this code snippet to error:

https://www.typescriptlang.org/play?jsx=4#code/JYWwDg9gTgLgBAJQKYEMDG8BmUIjgIilQ3wG4Aoc4AOxiSk3STgAUcwBnOAb3Ln7hoAFsAA2AEyLUA-AC5ExGADpk6GAFFRSEEloAebnCIBHAK7Ai4thDDzqpkACN6cAL4A+OAB8FalYs1tXRgDIyQzCyQrdjsHZyg3dwBtAF0KATCIy2swOTh7J3oKV0pMU2oMYAhqOABhAAowdg55HI4ASh4+ASIYUygavXduJpsOJWExSV1XPQB6d2LS8srquAARes7eDN7+mvtRUSXyPVr3U-W4BdO586A

But it doesn't work as assumed. In this code C has no requiredProp, which doesn't match the children type signature.

Is there a way to check the props type of the children?

[tropic glacier]

Basix#2873

Playground Link

Preview:```ts
import React from "react"

interface Props {
children?:
| React.ReactElement<{requiredProp: number}>
| React.ReactElement<{requiredProp: number}>[]
requiredProp?: number
}

function C(props: Props) {
return <>{props.children}</>
}

function D(
...```

You can choose specific lines to embed by selecting them before copying the link.

[candid kraken]

@remote vector ?: makes a property optional

which is why it's not an error

[remote vector]

removing it has no effect

[tropic glacier]

Basix#2873

Playground Link

Preview:```ts
import React from "react"

interface Props {
children?:
| React.ReactElement<
{requiredProp: number},
typeof C
>
| React.ReactElement<
{requiredProp: number},
typeof C
>[]
requiredProp: number
}

function C(props: Props) {
return <>{props.children}</>
...```

You can choose specific lines to embed by selecting them before copying the link.

[remote vector]

it feels like <D /> inside C's children should throw error but it doesnt

[candid kraken]

it's not an error because you've added the requiredProp to the component...

oh children

[remote vector]

yeah that part

[strange kite]

@remote vector You really can't check the types of children in JSX, they aren't really modeled in the type-system.

[candid kraken]

:(

[remote vector]

😦

[strange kite]

When you do <D /> the type is JSX.Element, when you do <D someProp={"foo"} /> the type is still JSX.Element.

[remote vector]

Doesn't JSX.Element's type include the props?

[strange kite]

No, JSX.Element isn't a generic type.

It's essentially an alias of React.ReactElement which is generic, and can track props, but JSX.Element itself does not, and that's what you get from JSX syntax.

[remote vector]

That's very unfortunate, thanks for the answer

Is there any issue tracking this problem?

[strange kite]

Would be very surprised if there isn't, but I don't know it off-hand.

https://github.com/microsoft/TypeScript/issues/51344 Looks like there's various breadcrumbs from here.