How to extends types for section element in Typescript?

by

In typescript, when our component extends a div we define our props types like this:


import { HTMLAttributes } from "react";

export interface IContainerProps extends HTMLAttributes<HTMLDivElement> {
    // You can add additional props specific to your container component here
    customProp?: string;
  }

However, when the component props extends section element props, I did not find something like this HTMLSectionElement:

In typescript, when our component extends a div we define our props types like this:


import { HTMLAttributes } from "react";

// HTMLSectionElement does not exist ?

export interface IContainerProps extends HTMLAttributes<HTMLSectionElement> {
    // other props
  }

  • 1

    There is no HTMLSectionElement for a good reason: it is exactly the same as a HTMLElement. Said differently, it does not come with properties of methods that HTMLElement doesn’t come with. You can safely use HTMLElement…or create a type alias if you prefer using the HTMLSectionElement type.

    – 

  • 2

    Also MDN on section mentions This element only includes the global attributes.

    – 

You can view the IntrinsicElements in node_modules/@types/react/index.d.ts, to inspect how React types this:

interface IntrinsicElements {
  // ...
  div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
  // ...
  section: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
  // ...
}

So the type you are looking for is React.HTMLAttributes<HTMLElement>. This type is consistent with the fact that section is primarily used as a semantic tag and contains no unique attributes.

This element only includes the global attributes.

Leave a Comment