javascript - Solid JS med Typescript - "as" prop\"component" prop

Så jag försöker göra följande sak med solid-js. Men kan inte lista ut rätt sätt med TypeScript.

Jag vill modulera min styling genom mina komponenter.

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

Jag försökte göra detta på några olika sätt. Jag kan inte få TypeScript att fungera med de dynamiska komponentegenskaperna...

Skulle verkligen uppskatta lite hjälp.

Svar #1

Det finns ganska många fler taggar, mest SVG, deklarerade i JSX.IntrinsicElements som inte accepterar class-attributet. Om du utesluter dem alla, tillåter Typescript att komma åt props.class på sista raden

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