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

Comienza con la reproducción vinculada en TypeScript Playground y compara el caso genérico PolymorphicComponent con el caso no genérico Component. Rastrea cómo JSX comprueba el componente polimórfico y verifica que esté completo haciendo que el ejemplo genérico acepte className sin errores, al tiempo que se conserva el comportamiento no genérico existente.