Как расширить интерфейс у компонента Autocomplete MUI v5

Question

Подскажите пожалуйста, как расширить интерфейс у компонента Autocomplete MUI v5?

TS ругается, а как поправить не знаю((

Generic type 'AutocompleteProps<T, Multiple, DisableClearable, FreeSolo, ChipComponent>' requires between 4 and 5 type arguments.

import {
  Autocomplete as MuiAutocomplete,
  AutocompleteProps,
  TextField
} from "@mui/material";
import { styled } from "@mui/material/styles";

interface IStyledAutocompleteProps extends AutocompleteProps {
  options: any;
}

const Autocomplete = styled(
  MuiAutocomplete,
  {}
)<IStyledAutocompleteProps>(({ theme }) => ({})) as typeof MuiAutocomplete;

const StyledAutocomplete: React.FC<IStyledAutocompleteProps> = ({
  ...props
}) => {
  return (
    <Autocomplete
      {...props}
      options={props.options}
      renderInput={(params) => <TextField variant="outlined" {...params} />}
    />
  );
};

export default StyledAutocomplete;

Codesandbox с кодом: https://codesandbox.io/s/keen-haslett-lybwuh?file=/src/App.tsx

UPD Если сделать так, то будет другая ошибка с которой тоже непонятно что делать

interface IStyledAutocompleteProps<T> extends AutocompleteProps<T, Multiple, DisableClearable, FreeSolo, ChipComponent> {
  options: any;
}

Ошибка

Generic type 'IStyledAutocompleteProps' requires 1 type argument

Answer 1

Честно, не понял зачем вы пишете то, что пишете, но вот так не получаю никаких ошибок:

import { Autocomplete as MuiAutocomplete, TextField } from "@mui/material";
import { styled } from "@mui/material/styles";

interface IStyledAutocompleteProps {
  options: {
    label: string;
    year: number;
  }[];
}

const Autocomplete = styled(MuiAutocomplete)(({ theme }) => ({}));

const StyledAutocomplete: React.FC<IStyledAutocompleteProps> = ({
  ...props
}) => {
  return (
    <Autocomplete
      {...props}
      options={props.options}
      renderInput={(params) => <TextField variant="outlined" {...params} />}
    />
  );
};

export default StyledAutocomplete;

Upd: Второй вариант, но как по мне, корявый:

import {
  Autocomplete as MuiAutocomplete,
  TextField,
  AutocompleteProps
} from "@mui/material";
import { styled } from "@mui/material/styles";

type Props<
  T extends undefined = undefined,
  Multiple extends boolean | undefined = undefined,
  DisableClearable extends boolean | undefined = undefined,
  FreeSolo extends boolean | undefined = undefined
> = {
  autoCompleteProps?: AutocompleteProps<
    T,
    Multiple,
    DisableClearable,
    FreeSolo
  >;
};

interface IStyledAutocompleteProps extends Props {
  options: {
    label: string;
    year: number;
  }[];
}

const Autocomplete = styled(MuiAutocomplete)(({ theme }) => ({}));

const StyledAutocomplete: React.FC<IStyledAutocompleteProps> = ({
  ...props
}) => {
  return (
    <Autocomplete
      {...props}
      renderInput={(params) => <TextField variant="outlined" {...params} />}
    />
  );
};

export default StyledAutocomplete;

БЛОГ НА HUSL

Как расширить интерфейс у компонента Autocomplete MUI v5

Ответы (1 шт):