Typescript how to extend native HTML element?

Question

Let's say I want to create a custom div component call MyDiv with additional attributes, eg.

interface MyDivProps {
  marginX: string;
  marginY: string;
}

but I still want to have all the type checking for regular HTMLDivElement, so what I want is actually something like:

interface MyDivProps implements JSX.IntrinsicElement.div {
      marginX: string;
      marginY: string;
    }

(I use JSX.IntrinsicElement.div instead of HTMLDivElement because it has additional React div attribute such as ref)

Obviously this won't work because interface cannot implements another interface, also IntrinsicElements is not exposed.

What would be the correct way to do this?

Answer 1

The syntax you are looking for is:

type DivProps = JSX.IntrinsicElements["div"];
interface MyDivProps extends DivProps {
  marginX: string;
  marginY: string;
}

(TypeScript has a restriction that an interface can only extend a dotted name, so you have to define a type alias for JSX.IntrinsicElements["div"] before you can extend it.)

Answer 2

Intersection type:

type DivProps = JSX.IntrinsicElements['div'] & {
  marginX: string
  marginY: string
}