Repository: TypeScript
Issue: Unable to extend JSX properties of already defined elements
Labels: Suggestion,Needs Proposal

# Bug Report

<!--
  Please fill in each section completely. Thank you!
-->

We've just release [Preact Signals](https://github.com/preactjs/signals) which are sort of an addon to both Preact and React that allow you to pass an observable object directly into JSX. As part of that we need to extend the existing JSX definitions to allow passing our observable type too, instead of just the existing types. But I'm unable todo so. I keep getting a type error.

### 🔎 Search Terms

<!--
  What search terms did you use when trying to find an existing bug report?
  List them here so people in the future can find this one more easily.
-->
JSX, declaration merging, React, Preact, Signals, IntrinsicElements

### 🕗 Version & Regression Information

<!-- When did you start seeing this bug occur?

"Bugs" that have existed in TS for a long time are very likely to be FAQs; refer to
  https://github.com/Microsoft/TypeScript/wiki/FAQ#common-bugs-that-arent-bugs

If possible, please try testing the nightly version of TS to see if it's already been fixed.
For npm: `typescript@next`
This is also the 'Nightly' version in the playground: http://www.typescriptlang.org/play/?ts=Nightly

Note: The TypeScript Playground can be used to try older versions of TypeScript.

Please keep and fill in the line that best applies:
-->
- This is the behavior in every version I tried, and I reviewed the FAQ for entries about JSX + declaration merging

### ⏯ Playground Link

<!--
  A link to a TypeScript Playground "Share" link which shows this behavior

  The TypeScript Workbench can be used for more complex setups, try
  https://www.typescriptlang.org/dev/bug-workbench/

  As a last resort, you can link to a repo, but these will be slower for us to investigate.
-->
[Playground link with relevant code](https://www.typescriptlang.org/play?jsx=4&ts=4.9.0-dev.20220916#code/JYWwDg9gTgLgBAKjgQwM5wEoFNkGN4BmUEIcARFDvmQFA0D09cAKgBbDrIB2AJnDKyxwAUgGUAGih49gMYBC7oANsABuQ4FxRwVAIyjIoATxqaYWKATxDRwAOZdkSgDzMAfHADeNOL7iqnAFcsAC4WGgBfOh4sXCVDITslCF0nLx8-RxAsVDBrEQl0v2K4MwsrXCEASS4YKE1UYFwAUSUsbNr0bxKeuEY4ABEIHK4AcngAd2gAawzev00wQJgQufmSgB9MKhgAOgGsGGRgNp4ACWYAWQAZAAViMFRnbDw9mqWYC5uAQRg64F0yxyzi+13ey1a7SwtTcABpQeCYJCOjA3Gt1n4trYHE5nKh-lw7Gj5lFilEogwmGwOHBKGBKKhoTBOGAwHBcBAYvxBHBAoyoHAJvVzKgaBzFIQIBAwtjHC58fVCR4ALxFPwBJTBMJkAhS2gU8X47Sq5yLZb+IJYZWeXUQCJ9NxAA)

### 💻 Code

<!-- Please post the relevant code sample here as well-->
```tsx
import * as React from "react"

// This and the JSX additions live in a library
interface Signal<T> {
    value: T
}

declare global {
    namespace JSX {
        interface IntrinsicElements {
            // Doesn't work
            input:
                | React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>,HTMLInputElement>
                | Signal<string>
        }
    }
}

// This represents app code the user writes
const foo: Signal<string> = {
    value: "foo"
}

const a = <input value={foo} />
```

### 🙁 Actual behavior

<!-- What happened, and why it was wrong -->

Passing a `Signal` as `value` errors with a type error
```jsx
const foo = { value: "foo" };
const a = <input value={foo} />
```

### 🙂 Expected behavior

<!-- What you expected to happen instead, and why -->

Passing a `Signal` as `value` should work
```jsx
const foo = { value: "foo" };
const a = <input value={foo} />
```