microsoft / microsoft/TypeScript
Properties detectable as excess due to missing discriminant should be flagged in JSX expressions
Nobody has claimed this yet.
- 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
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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