react-select typescript 问题 - 通用类型“ValueType”需要 2 个类型参数。ts(2314)答案

【问题标题】：react-select typescript issue - Generic type 'ValueType' requires 2 type argument(s).ts(2314)react-select typescript 问题 - 通用类型“ValueType”需要 2 个类型参数。ts(2314)
【发布时间】：2021-05-30 14:24:47
【问题描述】：

我正在尝试使用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>
    )
}

但我不断收到以下错误：（别名）类型 ValueType = IsMulti extends true ？选项类型：选项类型 |空值导入值类型通用类型“ValueType”需要 2 个类型参数。ts(2314)

知道我在这里缺少什么吗？

【问题讨论】：

标签： reactjs typescript typescript-typings react-select

【解决方案1】：

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

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

Source Code

【讨论】：

@sbuck89 请不要忘记接受答案
是否可以解释更多导出类型 ValueType = IsMulti extends true ？选项类型：选项类型 |空值;为什么 = IsMulti 扩展了 true .. 了解更多关于 TypeScript 的好习惯@linda

【解决方案2】：

更新您的 onChange 函数以接受如下参数：

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

【讨论】：