Working on a Layout component in React. The layout component has three valid children:
const Content: React.FC<PropsWithChildren<any>> = (children: PropsWithChildren<any) => <Fragment />;
const Footer: React.FC<PropsWithChildren<any>> = (children: PropsWithChildren<any>) => <Fragment />;
const Header: React.FC<PropsWithChildren<any>> = (children: PropsWithChildren<any>) => <Fragment />;
You can use the layout as such:
<WidgetShell>
<WidgetShell.Header>This is a header</WidgetShell.Header>
<WidgetShell.Content>This is some content</WidgetShell.Content>
<WidgetShell.Footer>This is a styled footer</WidgetShell.Footer>
</WidgetShell>
I would like to produce a compile error if any other children are passed in, or some of the required children are missing. Is this possible in typescript?
Minimal demo: https://stackblitz.com/edit/react-starter-typescript-v4dpdz?file=App.tsx