Tengo un componente simple y quiero que tenga la mayoría (si no todos) los accesorios de elementos HTML predeterminados, tal vez extendiendo React.HTMLAttributes<HTMLElement> y luego distribuyéndolos en los atributos del componente.

Pero el tipo de accesorios también incluye algunos no predeterminados para usar en otros lugares, digamos props.cardTitle . Ese accesorio no es útil para el contenedor principal, pero también se incluirá en el HTML final. Podría excluirlo manualmente al distribuir los accesorios, pero puede haber muchos.

Entonces, la pregunta es, ¿cómo puedo excluir todos los accesorios no predeterminados cuando los distribuyo en el contenedor principal?

Aquí hay un ejemplo para ilustrar mejor esto:

 type Props = ParentProps & OtherProps; type ParentProps = { className: string, // onClick, etc. maybe extend all html element props. } type OtherProps = { cardTitle: string, cardBody: string, cardPrice: string, } export default function ProductCard(props: Props) { return ( // Pass all props excluding "OtherProps" that have no use here // and inside use other props normally <div {...props}> <p>{props.cardTitle}</p> <p>{props.cardBody}</p> <p>{props.cardPrice}</p> </div> ); }

He estado probando algunas formas no convencionales de hacerlo. Probablemente usar un objeto dentro del tipo con todos los accesorios "no predeterminados", y luego simplemente excluir ese, sería mi mejor opción. Pero esto todavía tiene algo de sintaxis adicional para llamarlo desde otro componente.

Como soy nuevo en React y me mudo de JS a TS, pensé que sería mejor preguntar.