JSX broken generics with polymorphic components

🔎 Search Terms

"jsx generics", "polymorhic components", "react jsx"

🕗 Version & Regression Information

• This is a crash No
• This changed between versions -
• This changed in commit or PR -
• This is the behavior in every version I tried, and I reviewed the FAQ for entries about -
• I was unable to test this on prior versions because - all versions in TS playground have the same output

⏯ Playground Link

https://www.typescriptlang.org/play?#code/JYWwDg9gTgLgBAJQKYEMDG8BmUIjgIilQ3wChSkAPSWOTAVwDsNgJG4AFCAGwE8RoYABbA0AYVyRGSRjAA8AQQDOcKjBkATFQHINwAG7a4AHzjaURgLxm9hgHwAKAN6kAkCiUAuOBPBsZMAA0pAC+3i7uXnDKoQCUcBEA9IlwgDLkcAAqIipKQhD03BpwAO7QANZwKIxFAEZIQij6SHAwQs1KKCDNHnB13BDFbkQw9FDscr5SAXBo3B5KAHKdSJbaRol2bsmZvGDN2k4zc0qLy95KMFDAjADmANxwIUbAKowQ8PPAN4woNdzNMAgLV2+wAMsAalAUFBeABZKooG5IDQKGCXCH0dRKOQAUX+XVkgR8xyUqPRNUxSGxAAkMrDQQARAx4pAEmB2OAAMjgtPpZKuFKxcl5jOZ+ICHO5YhJ-IxQpFCmYeSgLLZkuiSugCrRAsp2IAdIa7HZtKFyKRtgAhTEtNpwDpdErlFTATBwN7wehKZGVFQoOBI6RXNCkNBsC4+ST+WRway6AxGHrxwwmMwWUPh+AZHEAZQysbgEyj0hjs3mSy6qyxMHWdiAA

💻 Code

import React from "react"

export function PolymorphicComponent<As extends 'div' | 'a' = 'div'>({
	as: Component,
}: {
	as: As
}) {
	// ❌ This should work and behave the same as below
	return <Component className='' />
	// Type '{ className: string; }' is not assignable to type 'LibraryManagedAttributes<Element, ClassAttributes<HTMLDivElement> & HTMLAttributes<HTMLDivElement> & ClassAttributes<HTMLAnchorElement> & AnchorHTMLAttributes<...>>'
}


// But the same works if not used as a generic
const Component = 'div' as 'div' | 'a'
const TEST = <Component className='test' />

🙁 Actual behavior

Shows an error.

🙂 Expected behavior

No error.

Additional information about the issue

No response

Beginne mit der verknüpften TypeScript Playground-Reproduktion und vergleiche den generischen Fall PolymorphicComponent mit dem nicht generischen Fall Component. Verfolge, wie JSX die polymorphe Komponente prüft, und verifiziere den Abschluss, indem du dafür sorgst, dass das generische Beispiel className ohne Fehler akzeptiert, während das bestehende nicht generische Verhalten erhalten bleibt.