react-select typescript 问题 - 通用类型 'ValueType' 需要 2 个类型参数.ts(2314)

Question

我正在尝试利用 react-select 并具有以下代码：

import React, {useState} from 'react';
import LanguageChange from '../../../Icons/LanguageChange';
import Select, { ValueType } from 'react-select';

type OptionType = {
    value: string;
    label: string;
  };


export const LanguageSelector = () => {
    const languageOptions: OptionType[] = [
        { value: 'English', label: 'EN' },
        { value: 'German', label: 'DE' },
        { value: 'French', label: 'FR' },
      ];
    const [selectedOption, setSelectedOption] = useState<ValueType<OptionType>>(languageOptions[0]);
    const handleChange = (option: ValueType<OptionType>) => {
    setSelectedOption(option);
  };

    return (
        <LanguageChange>
            <Select
                value={selectedOption}
                onChange={setSelectedOption}
                options={languageOptions}
            />
        </LanguageChange>
    )
}

但我不断收到以下错误：（别名）type ValueType = IsMulti extends true ？选项类型：选项类型 |无效的导入值类型通用类型 'ValueType' 需要 2 个类型参数 (s).ts(2314)

知道我在这里遗漏了什么吗？

Answer 1

ValueType 需要两个泛型：您提供的 OptionType 和 true 或 false 中的 IsMulti。 IsMulti判断是否为数组。如果你有一个 OptionType 和 {value: string}，那么 ValueType 如果它是多个 select 应该是 string[] 而对于单个 select 它将是string.

在您的情况下，您只有一个 select，因此您可以使用 ValueType<OptionType, false>。但是你也可以只使用 string 因为你已经知道你的选项的值类型是 string 所以没有必要向后工作。

Source Code

Answer 2

更新您的 onChange 函数以接受这样的参数：

onChange: (value: ValueType<OptionType, IsMulti>, actionMeta: ActionMeta<OptionType>) => void;

react-select typescript 问题 - 通用类型 'ValueType' 需要 2 个类型参数.ts(2314)

react-select typescript issue - Generic type 'ValueType' requires 2 type argument(s).ts(2314)

typescript

reactjs

react-select

typescript-typings