如何表示依赖于其他属性值的函数类型

Question

在React项目中，我有一个onChange处理程序，它是一个接受一个参数的函数。参数的类型可以是字符串或字符串数组，这取决于另一个布尔属性(multiSelect(

我试着这样表达：

type MultiSelect = {
multiSelect: boolean;
onChange: (value: string[]) => void;
};
type SingleSelect = {
multiSelect?: false;
onChange: (value: string) => void;
};
type Select = SingleSelect | MultiSelect;
type Props = {otherStuff: string} & Select;

但通过这种方式，typescript说参数的类型是string & string[]，并在我尝试使用它时给了我一个错误：

if (multiSelect) {
onChange(['a', 'b']);
} else {
onChange('c');
}

第一个分支出现以下错误：类型"string[]"不可分配给类型"string&string[]'。

对于第二个分支：类型"string"不可分配给类型"string&string[]'。

Answer 1

您就快到了。将你的Props表示为并集，并确保你没有过早地破坏props——如果你破坏props，你使用并集表达的关系将不再保留。

一个工作示例：

import * as React from 'react';
type Props = (
| { multiSelect: true; onChange: (value: string[]) => void }
| { multiSelect: false; onChange: (value: string) => void }
) & { otherStuff: string };
const MyComponent: React.FunctionComponent<Props> = props => {
if (props.multiSelect) {
props.onChange(['foo', 'bar']);
} else {
props.onChange('foo')
}
return null;
}

Answer 2

您可以在Typescript中混合使用条件类型和泛型来实现您想要实现的

function onChange<T extends boolean>(input: T extends true ? string[] : string) : any {
console.log(input)
}

onChange<true>(['a', 'b'])
onChange<false>("a")