microsoft / microsoft/TypeScript
Useless scary elaboration on all overloads in JSX
Open
Nobody has claimed this yet.
Experience Enhancement
Suggestion
- Dominant language
- Go
- Stars
- 111k
- Forks
- 14.3k
- Avg merge
- 2d 4h
- Merged PRs (30d)
- 132
Description
git clone https://github.com/React95/React95/
git checkout 57dc66d8a087792fd8fa0f1cfb7c7560767e8520
yarn
-
Open up VS Code in the base
-
Open up the file packages/core/components/Checkbox.jsx
-
Go to line 100
-
Make a change
- <Label {...style} checked={checked} disabled={disabled}> + <Label style={style} checked={checked} disabled={disabled}>
Observe the error message:
No overload matches this call.
Overload 1 of 2, '(props: Pick<Pick<Pick<DetailedHTMLProps<LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "form" | ... 255 more ... | "htmlFor"> & { ...; }, "form" | ... 256 more ... | "htmlFor"> & Partial<...>, "form" | ... 256 more ... | "htmlFor"> & { ...; } & { ...; }): ReactElement<...>', gave the following error.
Type '{ children: Element[]; style: any; checked: any; disabled: any; }' is not assignable to type 'IntrinsicAttributes & Pick<Pick<Pick<DetailedHTMLProps<LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "form" | ... 255 more ... | "htmlFor"> & { ...; }, "form" | ... 256 more ... | "htmlFor"> & Partial<...>, "form" | ... 256 more ... | "htmlFor"> & { ...; } & { ...; }'.
Property 'checked' does not exist on type 'IntrinsicAttributes & Pick<Pick<Pick<DetailedHTMLProps<LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "form" | ... 255 more ... | "htmlFor"> & { ...; }, "form" | ... 256 more ... | "htmlFor"> & Partial<...>, "form" | ... 256 more ... | "htmlFor"> & { ...; } & { ...; }'.
Overload 2 of 2, '(props: StyledComponentPropsWithAs<"label", any, {}, never>): ReactElement<StyledComponentPropsWithAs<"label", any, {}, never>, string | ... 1 more ... | (new (props: any) => Component<...>)>', gave the following error.
Type '{ children: Element[]; style: any; checked: any; disabled: any; }' is not assignable to type 'IntrinsicAttributes & Pick<Pick<Pick<DetailedHTMLProps<LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "form" | ... 255 more ... | "htmlFor"> & { ...; }, "form" | ... 256 more ... | "htmlFor"> & Partial<...>, "form" | ... 256 more ... | "htmlFor"> & { ...; } & { ...; }'.
Property 'checked' does not exist on type 'IntrinsicAttributes & Pick<Pick<Pick<DetailedHTMLProps<LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "form" | ... 255 more ... | "htmlFor"> & { ...; }, "form" | ... 256 more ... | "htmlFor"> & Partial<...>, "form" | ... 256 more ... | "htmlFor"> & { ...; } & { ...; }'.ts(2769)

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
Clone the repository and run the reported yarn setup, then reproduce the JSX change in packages/core/components/Checkbox.jsx at line 100 using the provided TypeScript diagnostic. Start by tracing how overload errors are formatted for JSX calls; done means the same invalid prop reports the relevant error without duplicating the full overload details.
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
- Mostly clear
- Newbie friendliness
- 35/100