React TypeScript中Dispatch联合类型传参及类型不兼容问题

场景一错误原因 #

你把MyComponent的setSelected属性定义为Dispatch<SetStateAction<string>> | Dispatch<SetStateAction<string[]>>，这是两个函数类型的联合。TypeScript对联合类型函数的调用有严格规则：调用时传入的参数必须能被联合类型中的每一个函数分支都接受，也就是参数类型是各分支参数类型的交集（&）。

具体来说：

• Dispatch<SetStateAction<string>>要求参数是string或(prev: string) => string
• Dispatch<SetStateAction<string[]>>要求参数是string[]或(prev: string[]) => string[]

两者的交集是同时满足这两个要求的类型，显然['x']（string[]类型）无法满足第一个分支的参数要求，所以报错。错误信息里用&而非你定义的|，正是因为调用联合函数时，TypeScript会取各分支参数的交集作为合法参数类型。

场景二错误原因 #

这里核心是TypeScript的函数参数逆变规则：函数参数类型越宽泛，函数本身的类型越“窄”（即更严格），反之亦然。

Dispatch<T>本质是(value: T) => void，现在：

• 你传入的是Dispatch<SetStateAction<string[]>>，它只能接受string[]或基于string[]的更新函数
• 目标类型是Dispatch<SetStateAction<string | string[]>>，它要求能接受string | string[]或基于string | string[]的更新函数

根据逆变规则，只有当目标参数类型比传入的参数类型更窄时，赋值才合法。这里目标参数类型（string | string[]）比传入的（string[]）更宽泛，所以Dispatch<SetStateAction<string[]>>无法赋值给Dispatch<SetStateAction<string | string[]>>，导致报错。

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