How to extend JSX.IntrinsicElements['div']? TS2499

Question

How come I can create a new type via JSX.IntrinsicElements['div'] & X but I can't extend it?

I don't understand the error message -- am I not simply adding an "optional type"? What's the difference between extending types these 2 different ways?

Answer 1

What worked for me was defining the type before hand

type SpanProps = JSX.IntrinsicElements['span']

interface IconProps extends SpanProps {
  weight?: string
  src: string
}

Answer 2

You can use React-Markdown:

import { IntrinsicElements } from "react-markdown/src/ast-to-react";

interface InputContainerProps1 extends Partial<IntrinsicElements['div']>{
  minWidth?: string | number
}

The Partial Class constructs a type with all properties of IntrinsicElements['div'] set to optional. Under the hood the Partial interface looks like this:

type Partial<T> = { [P in keyof T]?: T[P]; };