What's the difference between DetailedHTMLProps and HTMLAttributes?

Question

Let's say I have a component interface that should extend the interface of a standard <div> element. What's the difference in writing this:

interface ComponentProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> { ... }

versus this:

interface ComponentProps extends React.HTMLAttributes<HTMLDivElement> { ... }

Answer 1

lets create ComponentProps types:

interface ComponentProps1 extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {}

interface ComponentProps2 extends React.HTMLAttributes<HTMLDivElement> {}

then we can check the difference between them quite easily:

type Dif = Omit<ComponentProps1, keyof ComponentProps2>;

the Dif type is:

type Dif = {
    ref?: LegacyRef<HTMLDivElement>;
    key?: string | number;
}