Microsoft/TypeScript
Auf GitHub ansehenJSX broken generics with polymorphic components
Open
#56.314 geöffnet am 5. Nov. 2023
Domain: JSX/TSXHelp WantedPossible Improvement
Repository-Metriken
- Stars
- (48.455 Stars)
- PR-Merge-Metriken
- (Durchschn. Merge 6T 17h) (9 gemergte PRs in 30 T)
Beschreibung
🔎 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
💻 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