Me pregunto si es posible, en el lado de Typescript, asegurarse de que un Componente de reacción reciba un hijo de un tipo x , independientemente de lo que reciba.

Aquí hay un caso de uso:

En un enfoque de "Diseño de sistema", tengo un Componente de Section y un Componente de Title también. Quiero asegurarme de que todas las Section reciban al menos un Title como hijo (uno h1 , o al menos un h2 más específicamente), y aún reciban otros hijos (o no, lo que sea).

Entonces esos serían válidos:

 <Section ...> <Title level={1}>Title</Title> ... </Section> <Section ...> <Title level={1}>Title</Title> <Title level={2}>Sub-title</Title> ... </Section> <Section ...> <Title level={2}>Title</Title> <Title level={2}>Sub-title</Title> <Title level={2}>yada-yada</Title> ... </Section>

Esos no:

 <Section ...> <p>some text</p> ... </Section> <Section ...> <Title level={1}>Title</Title> <Title level={1}>Other Title</Title> ... </Section> <Section ...> <Title level={3}>Title</Title> ... </Section>

Por ahora, dentro del componente, estoy recorriendo los elementos secundarios, y si no se encuentra un Title coincidente, se genera un error:

 if (!sectionTitle) throw new Error(...)

Entonces, un futuro desarrollador que lo usa mal, recibe una advertencia del navegador.

Pero realmente me gustaría hacer esta verificación en TypeScript, para que el error aparezca en la compilación, y no solo después de abrir la página.

¿Hay una manera de hacer eso?

Aquí hay un ejemplo de trabajo mínimo y claro: https://codesandbox.io/s/romantic-surf-tpyojt?file=/src/components/Section.tsx