TypeScript函数参数联合类型问题：onChange类型推断异常求助

问题原因 #

你的代码中Props是联合类型，但解构onChange和value后，TypeScript无法关联这两个属性属于联合类型的同一分支。因此onChange的类型被推断为两个分支函数类型的交集——要求参数同时满足string[]和string（即never类型），自然无法正常调用。

解决方案 #

方案1：使用类型守卫缩小类型范围 #

通过判断isMultiselect或value的类型，让TypeScript明确当前分支的类型，从而正确匹配onChange和value：

interface BaseProps {
  label?: string;
}

interface MultiProps extends BaseProps {
  isMultiselect: true;
  value: string[];
  onChange: (value: string[]) => void;
}

interface SingleProps extends BaseProps {
  isMultiselect?: false;
  value: string;
  onChange: (value: string) => void;
 }

type Props = MultiProps | SingleProps;

// 方法A：判断isMultiselect
const example = ({ onChange, value, isMultiselect }: Props) => {
  if (isMultiselect) {
    onChange(value); // 此时value为string[]，onChange参数类型匹配
  } else {
    onChange(value); // 此时value为string，onChange参数类型匹配
  }
};

// 方法B：判断value是否为数组
const example2 = ({ onChange, value }: Props) => {
  if (Array.isArray(value)) {
    onChange(value);
  } else {
    onChange(value);
  }
};

方案2：用泛型绑定value与onChange的类型 #

通过泛型将isMultiselect、value和onChange的类型绑定，让TypeScript在使用时自动推断对应类型：

interface BaseProps {
  label?: string;
}

// 泛型Props，根据T是否为true决定分支类型
type Props<T extends boolean = false> = BaseProps & (T extends true 
  ? {
      isMultiselect: true;
      value: string[];
      onChange: (value: string[]) => void;
    } 
  : {
      isMultiselect?: false;
      value: string;
      onChange: (value: string) => void;
    });

// 泛型函数，自动推断类型
const example = <T extends boolean>({ onChange, value }: Props<T>) => onChange(value);

// 测试示例
const singleDemo = { value: "hello", onChange: (val: string) => console.log(val) };
example(singleDemo); // 正常执行，val类型为string

const multiDemo = { 
  isMultiselect: true, 
  value: ["foo", "bar"], 
  onChange: (val: string[]) => console.log(val) 
};
example(multiDemo); // 正常执行，val类型为string[]

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