Qué Tipos o Types Usar Para Componentes React Con Children

Si estás dudando sobre qué tipos utilizar para los componentes de React que tienen hijos en Typescript, para que puedas heredarlos correctamente y evitar errores, entonces este es el post que necesitas leer, te explico tres enfoques diferentes que puedes guardar y utilizar como parte de tus habilidades en Typescript.

Typescript requiere que especifiquemos los types para las diferentes variables y argumentos de funciones en React. Cuando son tipos nativos no es muy complicado, pero para componentes de React puede llegar a ser diferente. Aquí dejo 3 maneras de especificar los types para componentes de React que contienen children como parte de sus props.

Types Con ReactNode

La manera más sencilla es de manera manual, especificando a children como un nodo de React opcional.

import React from 'react'

type props = {
    children?: React.ReactNode
}


const MyComponent = ({ children }: Props) => {
    return (
        <div>
            {children}      
        </div>
    )
}

export default MyComponent

Usando React.FC

La segunda manera es usando un el objeto FC (Functional Component) que nos provee React, el cual deja implícito el uso de children y además evita que devolvamos undefined. Considera que usar React.FC es considerado por algunos desarrolladores como una mala práctica .

import React from 'react'

const MyComponent: React.FC<{}> = ({ children }) => {
    return (
        <div>
            {children}      
        </div>
    )
}

export default MyComponent

React.PropsWithChildren

La última manera es haciendo uso del objeto PropsWithChildren que provee React que, como dice su nombre, ya incluye los props con el componente children, listo para usarse de manera directa.

import React from 'react'

type Props = React.PropsWithChildren<{}>

const MyComponent = ({ children }: Props) => {
    return (
        <div>
            {children}      
        </div>
    )
}

export default MyComponent

Mira lo que Typescript tiene para decir en React en su documentación oficial.