microsoft / microsoft/TypeScript

Useless scary elaboration on all overloads in JSX

Open
#35,908 2 comments 4 reactions 0 assignees View on GitHub

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
  1. Open up VS Code in the base

  2. Open up the file packages/core/components/Checkbox.jsx

  3. Go to line 100

  4. 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)

image

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

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.