Aunque esta respuesta es correcta, quiero señalar que no es necesario que use este asistente de PropsWithChildren . (Es principalmente útil para el codemod , no para el uso manual).

En cambio, me resulta más fácil definirlos manualmente.

Antes

 import * as React from 'react'; type Props = {}; const Component: React.FC<Props> = ({children}) => {...}

Después

 import * as React from 'react'; type Props = { children?: React.ReactNode }; const Component: React.FC<Props> = ({children}) => {...}

Eso es todo lo que se necesita.

O puede dejar de usar React.FC por completo.

 import * as React from 'react'; type Props = { children?: React.ReactNode }; function Component({children}: Props): React.ReactNode { ... }

En React, children son un accesorio habitual y no es algo especial. Por lo tanto, debe definirlo tal como define todos los demás accesorios. Las tipificaciones anteriores que lo ocultaban estaban equivocadas.

como resolver

sin accesorios

Antes

 import React from 'react'; const Component: React.FC = ({children}) => {...}

Después

Cree, por ejemplo, react.d.ts para definir su ayudante tipo ¹

 export type PropsWithChildrenOnly = PropsWithChildren<unknown>; export type ReactFCWithChildren = React.FC<PropsWithChildrenOnly>;

 import React from 'react'; import { PropsWithChildrenOnly, ReactFCWithChildren } from './react'; const Component: React.FC<PropsWithChildrenOnly> = ({children}) => {...}

o

 const Component: ReactFCWithChildren = ({children}) => {...}

con accesorios

Antes

 import React from 'react'; interface Props { ... } const Component: React.FC<Props> = ({children}) => {...}

Después

 import React, { PropsWithChildren } from 'react'; interface Props { ... } const Component: React.FC<PropsWithChildren<Props>> = ({children}) => {...}

o

 interface Props extends PropsWithChildren<unknown> { ... } const Component: React.FC<Props> = ({children}) => {...}

^{1 _{Si bien definir children manualmente parece fácil, es mejor aprovechar los tipos que ya están preparados para usted en el paquete @types. Cuando haya cambios en el tipo en el futuro, se propagará automáticamente desde la biblioteca en todas partes de su código para que no tenga que tocarlo usted mismo.}}

Suprimir advertencias por algún motivo

Puede anular los tipos de reacción creando un archivo react.d.ts con la siguiente definición que revertiría el tipo a @types/react v17

 import * as React from '@types/react'; declare module 'react' { interface FunctionComponent<P = {}> { (props: PropsWithChildren<P>, context?: any): ReactElement<any, any> | null; } }

¿Por qué cambió la firma FC?

children prop se eliminó de React.FunctionComponent ( React.FC ), por lo que debe declararlo explícitamente.

TS le dirá errores como

Escriba '{ niños: ...; }' no tiene propiedades en común con el tipo 'IntrinsicAttributes'".

Puedes leer por qué aquí . TLDR previene errores como

 const ComponentWithNoChildren: React.FC = () => <>Hello</>; ... <ComponentWithNoChildren> // passing children is wrong since component does not accept any <UnusedChildrenSinceComponentHasNoChildren /> </ComponentWithNoChildren>

Cree su tipo de componente funcional personalizado FC .

Llamémoslo FCC

 // Put this in your global types.ts import { FC, PropsWithChildren } from "react"; // Custom Type for a React functional component with props AND CHILDREN export type FCC<P={}> = FC<PropsWithChildren<P>>

Siempre que desee propiedades de children en los props de su Componente, utilícelo de esta manera:

 // import FCC from types.ts const MyComponent: FCC = ({children}) => { return ( <>{children}</> ) }

O

 interface MyCompoProps{ prop1: string } const MyComponent: FCC<MyCompoProps> = ({children, prop1}) => { return ( <>{children}</> ) }

PD Esta respuesta puede parecerse a la respuesta de @Garvae, pero su ReactFCC<P> debe type como ReactFCC<P={}> para evitar el siguiente error:

Generic type 'ReactFCC' requires 1 type argument(s)

Este error ocurre cuando no pasa accesorios al Componente. El accesorio para niños debe ser un accesorio opcional. Entonces, darle a esos accesorios un valor {} predeterminado (es decir, P = {} ) resuelve el problema.