How to extends types for section element in Typescript?

August 26, 2023

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
  }

>Solution :

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.