Bug: Constraining children to type has no effect about react

[sophiebits]

@eps1lon Remind me if this is a limitation of core TypeScript?

[Youngemmy5956]

import React, { ReactElement, ReactNode } from "react";

type ValidChild = ReactElement<{ customProp: string }>;

type ParentProps = {
children: ValidChild | ValidChild[];
};

const Parent: React.FC = ({ children }) => {
if (!Array.isArray(children)) {
children = [children];
}

const invalidChildren = children.filter(
(child) => child.type !== ChildComponent
);

if (invalidChildren.length > 0) {
throw new Error("Invalid child components in Parent");
}

return

{children}

;
};

type ChildProps = {
customProp: string;
};

const ChildComponent: React.FC = ({ customProp }) => {
return

{customProp}

;
};

export default function App() {
return (

Parent should complain

);
}

[speculees]

import React, { ReactElement, ReactNode } from "react";

type ValidChild = ReactElement<{ customProp: string }>;

type ParentProps = { children: ValidChild | ValidChild[]; };

const Parent: React.FC = ({ children }) => { if (!Array.isArray(children)) { children = [children]; }

const invalidChildren = children.filter( (child) => child.type !== ChildComponent );

if (invalidChildren.length > 0) { throw new Error("Invalid child components in Parent"); }

return

{children}
;
};
type ChildProps = { customProp: string; };

const ChildComponent: React.FC = ({ customProp }) => { return

{customProp}
;
};
export default function App() { return (

Parent should complain

);
}

I was thinking about this approach, but this is would loop (filter) children in runtime instead of using typescript.

[Youngemmy5956]

What about using this approach ??

This approach allows you to catch errors at compile time and ensures that the child components adhere to the expected props and structure.

import React, { ReactElement, ReactNode } from "react";

type ChildProps = {
customProp: string;
};

type ChildComponentProps = {
children: ReactNode;
customProp: string;
};

const ChildComponent: React.FC = ({ customProp }) => {
return

{customProp}

;
};

const Parent: React.FC = ({ children, customProp }) => {
return (

{customProp}

{children}

);
};

export default function App() {
return (




);
}

[eps1lon]

It's a TypeScript limitation because <ValidChild /> will be any JSX element i.e. (< ValidChild />).type any not ValidChild. It would only work if you'd use a JSX factory directly i.e. createElement(ValidChild). In that case, TypeScript would recognize the real element type (createElement(ValidChild).type is ValidChild) and your parent could safely assume children: ValidChild is enforced at the type level.

But this shifts the burden to component consumers which defeats the purpose.

Closing in favor of microsoft/TypeScript#14729