I am looking for the most "canonical" and/or "up-to-date" way to add a set of default HTML attributes as a set of allowed TypeScript props to a customized, "enhanced" HTML component, let's say a Button.
I found two type definitions. The first is React.HTMLProps<T>, the second JSX.IntrinsicElements["T"].
So I can Enhance my Button either this way:
type Props = {
children: React.ReactNode
onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void
type?: "button" | "submit" | "reset"
className?: string
} & React.HTMLProps<HTMLButtonElement>
or like that:
type Props = {
children: React.ReactNode
onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void
type?: "button" | "submit" | "reset"
className?: string
} & JSX.IntrinsicElements["button"]
I've tried both ways and both of them seem to work fine (no squigly red lines).
The question is: Is there a significant difference between those type definitions? Should I use rather React.HTMLProps<T>, JSX.IntrinsicElements["T"], or is it just a matter of personal preference?
Thank you.
