Within my component, I am passing a prop named HtmlTag, and based on its value, I want to dynamically extend the Prop Interface with the appropriate props for the corresponding HTML tag.
I attempted to create a Type that functions as a map for this purpose, for example:
type AllAttrs = {
a: AnchorHTMLAttributes,
button: ButtonHTMLAttributes
}
Currently, I am trying the following approach:
interface Props extends AllAttrs["a"] {
sanitize?: string;
}
But I encounter an error stating "an interface can only extend other interfaces."
This is how I implement my component:
<Element
Component="a"
... more props
>Test</Element>
The objective is to have TypeScript notify me of any missing props (e.g., href) that are not passed when using the component.