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?

Matt McCutchen · Accepted Answer · 2018-09-04 19:42:43Z

8

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

answered Sep 4, 2018 at 19:42

Matt McCutchen

31.4k3 gold badges76 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Yichz Over a year ago

but is this a correct way to do it? I haven't seen other places doing this

Matt McCutchen Over a year ago

Come to your own conclusion. There's a similar scenario here, but I like your idea of referencing JSX.IntrinsicElements["div"] directly since its definition might change in future versions of React.

Jeremy Over a year ago

I really like this solution, much cleaner than others I tried imo

exaulo · Accepted Answer · 2022-03-09 07:29:21Z

0

Intersection type:

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

answered Mar 9, 2022 at 7:29

exaulo

2,8841 gold badge20 silver badges24 bronze badges

Collectives™ on Stack Overflow

Typescript how to extend native HTML element?

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related