Microsoft/TypeScript

JSX broken generics with polymorphic components

Open

#56,314 opened on Nov 5, 2023

View on GitHub
 (4 comments) (1 reaction) (0 assignees)TypeScript (48,455 stars) (6,726 forks)batch import
Domain: JSX/TSXHelp WantedPossible Improvement

Description

🔎 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

Contributor guide

Tech stack
typescriptreact
Domain
frontend
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
4
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
over 1 week
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
fresh
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
TypeScript genericsJSX type inferenceReact component types
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
20
Research direction
Investigate TypeScript's JSX element type checking logic, specifically how generic components with polymorphic 'as' props are handled. The error occurs in the return statement of PolymorphicComponent where the type of Component is not narrowed correctly. Look at the checker.ts file to understand how LibraryManagedAttributes is computed for generic JSX components. Cross reference with related issues and PRs about JSX generics to find potential fixes.