Así que estoy tratando de hacer lo siguiente con solid-js . Pero no puedo encontrar la manera correcta con mecanografiado.
Quiero modular mi estilismo a través de mis componentes.
type RelevantTags = Exclude<keyof JSX.IntrinsicElements, 'script' | 'object' | 'style' | 'head'>; type MustHaveProps = { class?: string; } type DynamicComponentProps<Props extends MustHaveProps> = Props & { as: Component<Props> } type DynamicHTMLTagProps<Tag extends RelevantTags> = JSX.IntrinsicElements[Tag] & { as: Tag; } type PossibleComponentTypes<Props extends MustHaveProps> = RelevantTags | Component<Props>; type MyCustomDynamicComponentProps<ComponentType extends PossibleComponentTypes<MustHaveProps> = "div"> = ComponentType extends RelevantTags ? DynamicHTMLTagProps<ComponentType> : DynamicComponentProps<ComponentProps<ComponentType>>; function MyCustomComponent<C extends PossibleComponentTypes<MustHaveProps>>(props: MyCustomDynamicComponentProps<C>){ return <Dynamic component={props.as} class={props.class} /> }Intenté hacer esto de diferentes maneras. No puedo hacer que TypeScript funcione con los accesorios de componentes dinámicos...
Agradecería mucho alguna ayuda.
Hay bastantes etiquetas más, en su mayoría SVG, declaradas en JSX.IntrinsicElements que no aceptan atributos class . Si los excluye a todos, Typescript permite acceder a props.class en la última línea
type RelevantTags = Exclude<keyof JSX.IntrinsicElements, | 'script' | 'object' | 'style' | 'head' | 'animate' | 'animateMotion' | 'animateTransform' | 'feDistantLight' | 'feFuncA' | 'feFuncB' | 'feFuncG' | 'feFuncR' | 'feMergeNode' | 'fePointLight' | 'feSpotLight' | 'metadata' | 'view' >;