How to forbid children for a React component with typescript?

Question

I have a React component for which I expect no children to be passed to it. Can I enforce it with typescript?

Answer 1

You can define the component's props like this:

type ComponentProps = {
  children?: undefined;
}

Answer 2

type MyComponentProps = {
  children?: never;
}

Valid cases:

• <MyComponent />

Invalid cases:

• <MyComponent>{undefined}</MyComponent>
• <MyComponent>{'foobar'}</MyComponent>
• <MyComponent>foobar</MyComponent>
• <MyComponent><>foobar</></MyComponent>
• <MyComponent><br /></MyComponent>
• <MyComponent><b>foobar</b></MyComponent>
• <MyComponent><Foo /></MyComponent>