Solid JS with Typescript - "as" prop \ "component" prop

Question

So I'm trying to do the following thing with solid-js. But can't figure out the right way with typescript.

I want to modulate my styling through my components.

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} />
}

I tried doing this in a few different ways. I can't get typescript to work with the dynamic component props...

Would greatly appreciate some help.

score 1 · Answer 1 · answered Jan 27 '22 at 19:04

There are quite a few more tags, mostly SVG, declared in JSX.IntrinsicElements which do not accept class attribute. If you exclude them all, Typescript allows to access props.class on the last line

type RelevantTags = Exclude<keyof JSX.IntrinsicElements, 
  | 'script' | 'object' | 'style' | 'head' 
  | 'animate' | 'animateMotion' | 'animateTransform' | 'feDistantLight' 
  | 'feFuncA' | 'feFuncB' | 'feFuncG' | 'feFuncR' 
  | 'feMergeNode' | 'fePointLight' | 'feSpotLight' | 'metadata' | 'view'
>;

Solid JS with Typescript - "as" prop \ "component" prop

1 Answers1