MUI Props 给出错误：`需要 4 到 5 个类型参数`

Question

我正在尝试将 MuiAutocomplete 包裹在我自己的自定义组件周围，并在使用打字稿时将 AutocompleteProps 作为道具传入。这是我所拥有的：

type Props = {
  autoCompleteProps?: AutocompleteProps<T>
  label: string
  loading?: boolean
}

const AutoComplete: React.FC<Props> = ({
  autoCompleteProps,
  label,
  loading,
}) => {
  return (
    <MuiAutocomplete {...autoCompleteProps}/>
  )
}

但我收到以下错误：autoCompleteProps?: AutocompleteProps<T>

通用类型 'AutocompleteProps<T, Multiple, DisableClearable, FreeSolo, ChipComponent>' 需要 4 到 5 个类型参数

我做错了什么，我该如何解决？

而且我还想将renderInput设为可选

Answer 1

AutocompleteProps 有五个通用值，一个是默认值，其他是必需的。

export interface CustomAutoCompleteProps<T> {
    autocompleteProps: AutocompleteProps<T, boolean | undefined, boolean | undefined, boolean | undefined>;
    label: string;
    loading?: boolean;
}

零件：

export const CustomAutoComplete = <T,>(props: CustomAutoCompleteProps<T>) => {
  const { label, autocompleteProps, loading } = props;

  return <Autocomplete {...autocompleteProps} />;
};

而且我还想让 renderInput 可选

这是不可能的，renderInput 和 options 是必填字段。

interface IOptions {
  label: string;
  year: number;
}

export const AutoCompleteTest = () => {
  let options: CustomAutoCompleteProps<IOptions> = {
    label: "test",
    loading: false,
    autocompleteProps: {
      options: [
        { label: "test", year: 2021 },
        { label: "asd", year: 2222 },
      ],
      renderInput: (params) => <TextField {...params} label={"label"} />,
    },
  };
  return <CustomAutoComplete {...options} />;
};

Answer 2

正如 TypeScript 所说，AutocompleteProps 需要有 4 到 5 个类型参数，因为它的定义如下：

export interface AutocompleteProps<
  T,
  Multiple extends boolean | undefined,
  DisableClearable extends boolean | undefined,
  FreeSolo extends boolean | undefined,
  ChipComponent extends React.ElementType = ChipTypeMap['defaultComponent'],
> {
  // ..
}

ChipComponent 有一个默认值，这就是为什么这个道具需要 5或者4 个参数。

对于其他人，您需要指定要使用的类型。

所以你可以做的是将一些泛型值添加到Props，然后简单地将它们传递给AutocompleteProps：

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

如果您在自定义 API 中不关心它们，您可以使用简单的默认值：

type Props<T> = {
  autoCompleteProps?: AutocompleteProps<T, undefined, undefined, undefined>;
  label: string;
  loading?: boolean;
};