[Autocomplete] options does not accept const assertions array with TypeScript

[michael-land]

export const a = ['a', 'b'] as const;
const D = () => <Autocomplete options={a} />;

ts Error

The type 'readonly ["a", "b"]' is 'readonly' and cannot be assigned to the mutable type 'unknown[]'.ts(4104)


useAutocomplete.d.ts(231, 3): The expected type comes from property 'options' which is declared here on type 'IntrinsicAttributes & AutocompleteProps<unknown, undefined, undefined, undefined, "div">'

change the type to options: Readonly<T[]>; could fix the issue.

diff --git a/node_modules/@material-ui/core/useAutocomplete/useAutocomplete.d.ts b/node_modules/@material-ui/core/useAutocomplete/useAutocomplete.d.ts
index 4e01bb5..5ccd71c 100644
--- a/node_modules/@material-ui/core/useAutocomplete/useAutocomplete.d.ts
+++ b/node_modules/@material-ui/core/useAutocomplete/useAutocomplete.d.ts
@@ -228,7 +228,7 @@ export interface UseAutocompleteProps<
   /**
    * Array of options.
    */
-  options: T[];
+  options: Readonly<T>[];
   /**
    * If `true`, the input's text is selected on focus.
    * It helps the user clear the selected value.

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

TS Error

Expected Behavior 🤔

No TS Error

Your Environment 🌎

`npx @material-ui/envinfo`

  Don't forget to mention which browser you used.
  Output from `npx @material-ui/envinfo` goes here.

npx: installed 2 in 1.753s

System:
OS: macOS 10.15.6
Binaries:
Node: 14.7.0 - /var/folders/7w/t3q6v18575b1rncctdm639040000gn/T/fnm-shell-709267/bin/node
Yarn: 1.22.10 - /usr/local/bin/yarn
npm: 6.14.7 - /var/folders/7w/t3q6v18575b1rncctdm639040000gn/T/fnm-shell-709267/bin/npm
Browsers:
Chrome: 88.0.4324.96
Edge: Not Found
Firefox: 84.0.1
Safari: 14.0
npmPackages:
@emotion/react: 11.1.4 => 11.1.4
@emotion/styled: 11.0.0 => 11.0.0
@material-ui/core: next => 5.0.0-alpha.22
@material-ui/icons: next => 5.0.0-alpha.22
@material-ui/lab: next => 5.0.0-alpha.22
@material-ui/styled-engine: 5.0.0-alpha.22
@material-ui/styles: 5.0.0-alpha.22
@material-ui/system: 5.0.0-alpha.22
@material-ui/types: 5.1.4
@material-ui/unstyled: 5.0.0-alpha.22
@material-ui/utils: 5.0.0-alpha.22
@types/react: 17.0.0 => 17.0.0
react: 17.0.1 => 17.0.1
react-dom: 17.0.1 => 17.0.1
typescript: 4.1.3 => 4.1.3

[michael-land]

I'm not sure this is a bug or intend behavior, maybe this should be a feature request?

[oliviertassinari]

@xiaoyu-tamu I have tried your fix but I can still see the error. I have no insights on this case.

[michael-land]

https://www.typescriptlang.org/play?ts=3.5.1#code/AQWAUAlgtgDg9gJwC7AFTAIYGdgCUCmGAxigGYJxTADkChJ1A3OOEXAHZYpwxIQdYAvMGABtAEQZxAGnEAjcQF1MONpySNQYcAHodwOABsAJuAjsk+BKWL5gAVSz4AggFckcNrEP5LABQoYLAAeABUAPmAAb3ARHj4BAC4RUNFFcABfcFJXdhJ+dmA3Dy8YH0sAUQAPDG98MPCAChhArGTHF3dPSjLffACeEIiAShEYsBE6JFcEQvZXQ0NmMCywNS5MYWBg4u66ypq6g14CoSj404yRHXDYljA9YHZ8AHctc0trW2AAOVeO3alcr9VoNaKxY4JTjJPCEYwcQwATzCaVuK2yuXyHF+r0BPWB1VqvQazVayT+LwBXSBfQGQQao3BE2AUxmcwWS0yrAEKDkW2CFLx+3whKOFwEgnOJwEV2AN3AQA

May i know what error you get from tsc compiler? I made a minimal example looks like it works with tsc 3.5+

[michael-land]

@oliviertassinari My bad, I made a typo. could you try Readonly<T[]> instead,

[oliviertassinari]

@xiaoyu-tamu Ok, the TypeScript tests pass with the proposed change. Do you want to send a pull request (with a quick test under (packages/material-ui/src/useAutocomplete/useAutocomplete.spec.ts)?

[michael-land]

Sure, i'll give it a try, never write type test before.

[silver-snoopy]

Hey @xiaoyu-tamu, @oliviertassinari - Would you mind If I open a PR for this? Happy to take it

[eps1lon]

@silver-snoopy Sure thing, go ahead.