Aquí hay un código de componente simplificado:

 type Props = (DropdownType | TextType | NumberType | ColorType | CheckboxType) & SharedType; const Component: FC<Props> = (_props): ReactElement => { return <></>; }; type Args = TextType | NumberType | DropdownType | CheckboxType | ColorType; export const generateComponent = (args: Args): ReactElement => { return ( <Component label="label" name="name" {...args}> {args.children} </Component> ); };

Aquí están los tipos:

 type SharedDisplayAndEditTypes = { label: string; }; export type SharedType = SharedDisplayAndEditTypes & { required?: boolean; validationMessage?: string; name: string; disabled?: boolean; }; export type TextType = { type: "text"; children: string; }; export type NumberType = { type: "number"; children: number; }; export type DropdownType = { type: "dropdown"; options: string[]; children: string; }; export type ColorType = { type: "color"; children: string; }; export type CheckboxType = { type: "checkbox"; children: boolean; };

Y aquí está la caja de códigos

Estoy tratando de crear una función que represente mi componente (para pruebas. Este es un ejemplo simplificado). Pensé que si mezclaba los accesorios y los argumentos, todo funcionaría bien, pero obviamente, me falta algo, pero no estoy seguro de qué.

El error que recibo es similar al ejemplo de sandbox:

 Types of property 'children' are incompatible. Type 'string | number | boolean' is not assignable to type 'string & ReactNode'. Type 'number' is not assignable to type 'string & ReactNode'

Básicamente, los tipos no se suman, y no tengo idea de por qué, ya que no estoy usando ReactNode en ninguna parte como tipo de apoyo.