Tengo un código como este:
type WrapperProps = { wrapperProp: string }; const Wrapper: React.FC<WrapperProps> = ({ children }) => <div>{children}</div>; type MyCmpnntProps = { myCmpnntProp: string }; const MyCmpnnt: React.FC<MyCmpnntProps> = (props) => ( <Wrapper {...props}>MyCmpnnt in a Wrapper</Wrapper> );funciona bien si hago este cambio este
type MyCmpnntProps = WrapperProps & { myCmpnntProp: string };Quiero saber si hay alguna forma de no hacer la unión de tipos. En mi opinión, React.FC debería hacer esto por sí mismo, ¿o me equivoco?
TL;DR: Estás equivocado, los sistemas de tipos simplemente no funcionan así.
Cuando le dices al compilador: Tengo un método que toma una variable de tipo MyCmpnntProps, espera lo que dijiste que le darás, ni más ni menos. Si desea pasar también los accesorios para el envoltorio, debe decírselo al compilador, haciendo una unión, ya sea para el tipo MyCmpnntProps o en la definición del componente de esta manera:
type WrapperProps = { wrapperProp: string }; const Wrapper: React.FC<WrapperProps> = ({ children }) => <div>{children} </div>; type MyCmpnntProps = { myCmpnntProp: string }; // Merge the types in the component definition const MyCmpnnt: React.FC<MyCmpnntProps & WrapperProps> = (props) => ( <Wrapper {...props}>MyCmpnnt in a Wrapper</Wrapper> );