函数参数上的 TypeScript 类型联合

Question

我创建了一个类型联合，以便我可以动态地将参数发送到我的函数，它应该推断该值是

string

还是

string[]

，以及

onChange

是否应该采用

string

或

string[]

作为一个论点：

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;

const example = ({ onChange, value }: Props) => onChange(value);

但是在最后一行，当我尝试调用

onChange

时，它不起作用。我得到

onChange

的类型为

onChange: (value: string[] & string) => void

。

我不明白为什么，以及我应该做什么才能得到我想要的行为。

我希望

onChange

具有类似

onChange: (value: string[] | string) => void

的类型签名，并根据

isMultiselect

推断它，或者

value

是字符串或数组。

Answer 1

为了满足 TS，有时 JS 应该非常丑陋，为了快速修复，你可以使标记的联合受益：

const example = ({ onChange, value, isMultiselect}: Props) => isMultiselect ? onChange(value) : onChange(value);