microsoft / microsoft/TypeScript

Properties detectable as excess due to missing discriminant should be flagged in JSX expressions

Open
#43,906 3 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Bug Domain: JSX/TSX
Dominant language
Go
Stars
111k
Forks
14.3k
Avg merge
2d 4h
Merged PRs (30d)
132

Description

Bug Report

When using TSX syntax to create a element which props are typed as a discriminated union, validation works when given element is constructed in TSX syntax without children, but loses validation once you add children.

🔎 Search Terms

react createElement validation tsx jsx children throws

🕗 Version & Regression Information
  • This is the behavior in every version I tried (3.x - 4.3.0-beta)
⏯ Playground Link

Playground link with relevant code

💻 Code
// this one should error but does not because it has children (tsx syntax)
const B = (
  <Accordion defaultSelectedKeys={new Set()}>
    <span>1</span>
  </Accordion>
)
// while using createElement it does error (like it should)
React.createElement(Accordion, {defaultSelectedKeys:new Set<Key>()}, <span>1</span>)
// while these also error (like they should) because they are without children.
const X = <Accordion defaultSelectedKeys={new Set()} />
const Y = <Accordion multiple defaultSelectedKey="1" />

🙁 Actual behavior

Like shown above, while React.createElement throws like it should, using TSX syntax though, it stops working.

🙂 Expected behavior

Same behavior as with createElement - raise a validation error with children

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the linked TypeScript Playground and compare the TSX examples with the React.createElement call, focusing on discriminated-union props when children are present. Trace the compiler's JSX prop validation and add a regression test for the shown Accordion case; done means TSX reports the same validation error as createElement.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
compilers
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.