How to restrict children to specific components?

[Farnsi]

E.g. you have a <Flex> that may only contain <Box>-Elements

It would be enough, if this only works on typescript type-level, no runtime check necessary.

Simply change the type of props.children leads to an TS-Error:

Type 'Element' is not assignable to type 'ParentComponent<BoxProps> & Element'. Type 'undefined' is not assignable to type 'ParentComponent<BoxProps> & Element'.ts(2322)

[snnsnn]

Typescript provides structural typing, so you can not limit children to Box only, any value that satisfies the type of Box will be valid.

[transbitch]

So just change the type of Box so that nothing else satisfies it.

[Farnsi]

But how can this be done in Solid?

[transbitch]

Vacuously cast the return type of your component to some unique type you call Box (e.g. an intersection of JSX.Element and a type with a Symbol property), then in your props say that children: Box[].

[snnsnn]

In typescript, you can not. What you are asking is possible in nominal type systems . Typescript provides structural type system. Just look it up on the internet for details.

If you want to render only the Box components as children, you can check if child is a Box, then render accordingly. Other than than there is nothing much you can do about it. https://www.solidjs.com/docs/latest#children

As a workaround you can attach a Symbol property to the Box and look for it inside Flex's children prop.