如何为React Select实现适配isMulti的条件类型？

用泛型+条件类型就能解决这个问题，让组件根据isMulti的取值自动推导onChange的参数类型，彻底避免联合类型带来的模糊性。

1. 定义带泛型的组件Props #

把isMulti作为泛型参数传入Props定义，通过条件类型动态确定newValue的类型：

import { SingleValue, MultiValue, ActionMeta, Select } from 'react-select';

// 你的Option类型定义
type Option = {
  value: string;
  label: string;
};

// 泛型Props，默认是单选模式（IsMulti=false）
type SelectProps<IsMulti extends boolean = false> = {
  isMulti?: IsMulti;
  onChange: (
    newValue: IsMulti extends true ? MultiValue<Option> : SingleValue<Option>,
    actionMeta: ActionMeta<Option>
  ) => void;
  // 其他原有Props（比如options、placeholder等）
};

2. 实现组件并处理类型逻辑 #

组件内部可以直接根据isMulti的取值，让TypeScript自动识别newValue的类型，确保属性访问安全：

function CustomSelect<IsMulti extends boolean = false>(props: SelectProps<IsMulti>) {
  const handleChange = (
    newValue: IsMulti extends true ? MultiValue<Option> : SingleValue<Option>,
    actionMeta: ActionMeta<Option>
  ) => {
    if (props.isMulti) {
      // 此时TypeScript明确知道newValue是Option数组
      const selectedValues = (newValue as MultiValue<Option>).map(item => item.value);
      console.log('多选选中值:', selectedValues);
    } else {
      // 此时TypeScript明确知道newValue是单个Option或null
      if (newValue) {
        console.log('单选选中值:', newValue.value);
      }
    }
    props.onChange(newValue, actionMeta);
  };

  return <Select {...props} onChange={handleChange} />;
}

3. 使用组件时的自动类型约束 #

调用组件时，TypeScript会根据isMulti的取值自动约束onChange的参数类型，无需手动指定泛型：

// 单选模式：onChange的newValue是SingleValue<Option>
<CustomSelect
  options={[{ value: '1', label: '选项1' }, { value: '2', label: '选项2' }]}
  onChange={(newValue) => {
    if (newValue) {
      console.log(newValue.value); // 类型安全，无报错
    }
  }}
/>

// 多选模式：onChange的newValue是MultiValue<Option>
<CustomSelect
  isMulti={true}
  options={[{ value: '1', label: '选项1' }, { value: '2', label: '选项2' }]}
  onChange={(newValue) => {
    const values = newValue.map(item => item.value); // 类型安全，无报错
    console.log(values);
  }}
/>

为什么之前的联合类型会报错？ #

你之前用SingleValue<Option> | MultiValue<Option>作为newValue类型时，TypeScript无法确定它到底是单个Option对象还是Option数组，所以直接访问newValue.value会提示属性不存在。而泛型+条件类型让TypeScript能根据isMulti的取值精确推断类型，从根源上解决了这个问题。

内容的提问来源于stack exchange，提问作者Red Baron