传递变量给React+TS选择器组件类型校验失败，直接传值正常

问题分析 #

你的核心问题是：当使用变量传递多选模式的value时，TypeScript错误地将泛型T推断为数组类型（如number[]），导致多选模式要求value为T[]（即number[][]），与实际值类型冲突。而直接使用数组字面量时，TypeScript能正确推断T为单个选项的类型（如number），这是因为字面量的类型推断逻辑更精确。

解决方案（无需显式指定泛型） #

方案1：使用函数重载替代联合类型Props #

函数重载的类型推断逻辑比联合类型更清晰，能让TypeScript根据multiple参数准确匹配对应分支：

// 单选模式重载
function Select<T>(props: {
  value: T | undefined | null;
  multiple?: false | undefined;
  onChange?: (value: T | null) => void;
}): JSX.Element;

// 多选模式重载
function Select<T>(props: {
  value: T[];
  multiple: true;
  onChange?: (value: T[]) => void;
}): JSX.Element;

// 组件实现
function Select<T>(props: any) {
  return <div>...</div>;
}

const n = [1];
// 自动推断T为number，onChange参数v类型为number[]
const a = <Select value={n} multiple onChange={(v) => {}}></Select>;

方案2：调整泛型约束，强制T为单个选项类型 #

修改SelectProps，让泛型T始终代表单个选项的类型，通过multiple约束value和onChange的类型：

type SelectProps<T> = {
  multiple?: boolean;
} & (
  {
    multiple?: false | undefined;
    value: T | undefined | null;
    onChange?: (value: T | null) => void;
  } | {
    multiple: true;
    value: T[];
    onChange?: (value: T[]) => void;
  }
);

function Select<T>(props: SelectProps<T>) {
  return <div>...</div>;
}

const n = [1];
// 自动推断T为number，匹配多选模式分支
const a = <Select value={n} multiple onChange={(v) => {}}></Select>;

方案3：为变量添加精确类型断言（最小侵入式） #

如果不想修改组件代码，可通过类型断言让变量的类型更明确：

// 直接指定变量为number[]类型
const n = [1] as number[];
// 若数组元素固定，可使用const断言（需组件支持readonly数组）
const n = [1] as const;

const a = <Select value={n} multiple onChange={(v) => {}}></Select>;

原代码推断错误的原因 #

原代码中，TypeScript匹配SelectProps<T>时会优先尝试第一个分支（单选模式），将value的number[]类型推断为T，导致多选模式要求value为T[]（即number[][]），与实际值冲突。调整后的方案通过明确分支区分逻辑，引导TypeScript优先匹配多选模式分支，从而正确推断T为单个选项的类型。

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