使用自定义类型时react-select赋值options遇TypeScript警告原因

问题出在你自定义组件的泛型参数GroupType上：它默认继承了GroupBase<Participant>，导致CreatableSelect的options属性类型被推断为readonly (Participant | GroupType)[]，而你传入的纯Participant数组和这个联合类型不兼容。

针对无需分组的业务场景，有两种直接的解决方式：

1. 彻底禁用分组功能（推荐） #

修改泛型约束，将GroupType的上限设为never并默认值设为never，这样options的类型就只会限定为Participant数组，从根源上消除类型冲突：

import { CreatableSelect, Props, GroupBase } from 'react-select';

interface Participant {
  name: string;
  id: string;
}

const p1: Participant = {
  name: "Bill",
  id: "1"
}

export function MyCustomMultiSelect<
  Participant,
  IsMulti extends boolean = true,
  GroupType extends never = never
>(props: Props<Participant, IsMulti, GroupType>) {
  return (
    <CreatableSelect options={[p1]} {...props} />
  );
}

2. 类型断言快速修复 #

如果不想修改泛型结构，可以在传入options时进行类型断言，明确告知TypeScript这是纯Participant数组：

export function MyCustomMultiSelect<
  Participant,
  IsMulti extends boolean = true,
  GroupType extends GroupBase<Participant> = GroupBase<Participant>
>(props: Props<Participant, IsMulti, GroupType>) {
  return (
    <CreatableSelect options={[p1] as readonly Participant[]} {...props} />
  );
}

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