[Autocomplete] Improve typings

[blasterpistol]

• I have followed (at least) the PR section of the contributing guide.

Closes #18810

• Basic types
• Handle a situation when a value is an array
• Pass right types to other components and hooks

[blasterpistol]

It remains to solve the situation when the value is an array.
It can be solved by this helper type:

type MultipleOrNot<T> =
  | { multiple: true; value?: T[]; defaultValue?: T[], ... }
  | { multiple: false; value?: T; defaultValue?: T, ... };
  | { multiple?: undefined; value?: T; defaultValue?: T, ... };

...

props: UseAutocompleteProps<T> & MultipleOrNot<T>

Passing array in default value throws type error when multiple: false:

And everything ok when pass multiple: true:

[mui-pr-bot]

No bundle size changes comparing e5b2e22...f66e47b

Generated by 🚫 dangerJS against f66e47b

[oliviertassinari]

@testarossaaaaa How is the exploration of the problem going?

[blasterpistol]

@oliviertassinari on vacation now, on the 10th I can finish it. Types can already be used, if I'm not mistaken, they cover 80% of cases. As I see there was an error on CI side.

[oliviertassinari]

@testarossaaaaa Awesome, I have looked a bit at the test fails, it should be green. However, I have noticed this new message during the prop-types generation:

Unable to handle node of type "ts.TypeFlags.IncludesStructuredOrInstantiable", using any

[oliviertassinari]

@testarossaaaaa Alright, I have tried to clean up the demos, it would be awesome if you could double-check :).

[blasterpistol]

Typescript can't discriminate union type without specifying the multiple prop, it's why we need to write concrete type here, an another solution for typescript users is settingmultiple={false} or multiple={undefined} so typescript can infer right typings for onChange handler, what way do you prefer?

[blasterpistol]

Seems like a bug in typescript microsoft/TypeScript#35769

[oliviertassinari]

Great to know. Should we specify the multiple prop (which will be closer to real life usage)?

[blasterpistol]

I think that we can explicitly write multiple={undefined} in typescript examples (with a mention in the documentation why this is needed), and when the bug is fixed, this will not be a breaking change. Or strictly require to specify multiple as true or false, but it seems that this is not a great DX.

[oliviertassinari]

Just to be clear, it's only needed because we spread {...defaultProps}? What if we duplicate the props instead?

[oliviertassinari]

OK thanks, in this can, I think that it would be better not to change the current tradeoff. The usage of the TypeScript demo is at 10% (and growing). It would look weird to see undefined. What do you think?

[blasterpistol]

If a typescript developer has not defined the multiple prop as false or undefined than all other dependent props will also receive invalid typings, not only the onChange prop.

[oliviertassinari]

What about we document it in the ## Limitations section of the page for TypeScript users, with a link to the related TypeScript issue?

[blasterpistol]

Sounds good. So we explicitly provide typings for onChange methods, like in this line of code above?

[oliviertassinari]

This would be my proposal, I believe we already get significant improvements with your changes. This is a roadblock that will require more effort.

[oliviertassinari]

Thank you for pushing this further, I hope you had great holidays :).

[kelly-tock]

I believe this was the change that is causing an issue for my project. thoughts?

export interface AutocompleteProps
  extends Pick<MuiAutocompleteProps, Exclude<keyof MuiAutocompleteProps, 'renderInput'>> {
  autofocus?: boolean;
  label?: string;
  renderInput?(params: RenderInputParams): JSX.Element;
  TextFieldProps?: Optional<TextFieldProps>;
}

I upgraded from 4.0.0-alpha.39 to 4.0.0-alpha.42, and it started saying I need a type parameter. ok, cool.

for the time being, I tried

export interface AutocompleteProps
  extends Pick<MuiAutocompleteProps<any>, Exclude<keyof MuiAutocompleteProps<any>, 'renderInput'>> {
  autofocus?: boolean;
  label?: string;
  renderInput?(params: RenderInputParams): JSX.Element;
  TextFieldProps?: Optional<TextFieldProps>;
}

but then I get in a place where we're using the component:

<Autocomplete
          options={citiesAvailable}
          getOptionLabel={(option: Option) => _.toString(option.label)}
          onChange={handleSelectCity}
          onClose={() => setShowSearch(false)}
        />

and says

Type '{ autofocus: true; options: { key: number; value: IMetroArea; label: string; }[]; getOptionLabel: (option: Option) => string; onChange: (changeEvent: ChangeEvent<{}>, selectedCityOption: { key: string; label: string; value: MetroArea; } | null) => void; onClose: () => void; }' is not assignable to type 'IntrinsicAttributes & AutocompleteProps'.
Property 'onChange' does not exist on type 'IntrinsicAttributes & AutocompleteProps'.

and in a different spot:

<Autocomplete
      label="Your location"
      classes={{
        noOptions: hasLoadedSuccessfully ? undefined : 'LocationSuggest_options-noSearchTerm',
      }}
      options={placesOptions}
      getOptionLabel={(option: Option) => _.toString(option.label)}
      defaultValue={
        selectedPlace && {
          key: selectedPlace.place_id,
          value: selectedPlace.place_id,
          label: selectedPlace.description,
        }
      }
      TextFieldProps={{ value: locationSearch, onChange: onSearchChange }}
      onChange={onSelect}
      onClose={onClose}
    />

Type '{ label: string; classes: { noOptions: string | undefined; }; options: SelectOption[] | undefined; getOptionLabel: (option: Option) => string; defaultValue: { key: string; value: string; label: string; } | undefined; TextFieldProps: { value: string | undefined; onChange: (searchChange: ChangeEvent) => void; }; onChange: (event: ChangeEvent<{}>, value: Option | null) => void; onClose: () => void; }' is not assignable to type 'IntrinsicAttributes & AutocompleteProps'.
Property 'defaultValue' does not exist on type 'IntrinsicAttributes & AutocompleteProps'.

any ideas on this?

what's interesting to me is :

export interface AutocompleteProps<T>
  extends UseAutocompleteCommonProps<T>,
    StandardProps<
      React.HTMLAttributes<HTMLDivElement>,
      AutocompleteClassKey,
      'defaultValue' | 'onChange' | 'children'
    > {

where those 2 are in the removals part of the standard props interface.