How to Define Props with Children in React + TypeScript App

There are multiple ways to define props with children.

Using ReactNode#

You can declare children prop on your props type and assign the ReactNode type to it:

If children should be optional, you can mark it with the ?:

However, this is not very convenient to declare this field by hand every time.

Using PropsWithChildren#

The PropsWithChildren type encapsulates children declaration in itself:

You can use this type as a generic:

Using FunctionComponent or FC#

The FunctionComponent generic interface includes children declaration. It uses PropsWithChildren under the hood.

You can pass your props as a type parameter into this generic when declaring props:

Another type you can use is React.FC. This is a type-alias for FunctionComponent, so it is the same as the previous one just shorter.

Using Class Components#

When you declare a class component you can extend React.Component type:

Like FC, the Component type automatically includes the children prop as well.

Sources#