CODEWITHSUNDEEP
reactjstypescript
Yichz
Yichz

Reputation: 9681

Typescript how to extend native HTML element?

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?

Upvotes: 8

Views: 3050

Answers (2)

mindlid
mindlid

Reputation: 2656

Intersection type:

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

Upvotes: 0

Matt McCutchen
Matt McCutchen

Reputation: 30929

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.)

Upvotes: 8

Related Questions