Reactjs Typescript对道具类型的反应有两种可能

我正试图在我的新React项目中学习并实现Typescript。我有一个组件

ToggleButton

，我想在两种情况下使用，

排序

和

过滤

产品。每个切换选项都有自己的按钮，但根据它是

排序

还是

过滤

选项，会有细微的区别

type OrderBy = {
  value: ProductOrderBy
  children: ReactNode
  onClick: (arg0: ProductOrderBy) => void
}

type SizeFilter = {
  value?: ProductSize
  children: ReactNode
  onClick: (arg0?: ProductSize) => void
}

const ToggleButton = ({ value, children, onClick }: OrderBy | SizeFilter) => {
  const handleClick = () => onClick(value)
  return <Button onClick={handleClick}>{children}</Button>
}

type OrderBy={
值：ProductOrderBy
子节点：反应节点
onClick：（arg0:ProductOrderBy）=>void
}
类型SizeFilter={
值？：产品大小
子节点：反应节点
onClick：（arg0？：ProductSize）=>void
}
const-ToggleButton=（{value，children，onClick}:OrderBy | SizeFilter）=>{
常量handleClick=（）=>onClick（值）
返回{children}
}

如您所见，如果是

过滤器

选项，

值

是可选的。由于

值

用作回调中的参数，因此回调参数也是可选的

我希望union

|

会声明道具必须匹配

OrderBy

或

SizeFilter

类型。但在我的IDE智能化的意义上，这两种类型似乎都合并了

我的代码按预期工作，但我的IDE在

onClick（value）

上告诉我：“ProductOrderBy | ProductSize | undefined”类型的

参数不能分配给“never”类型的参数。

我可以想出许多解决方法来解决这个问题，但由于我仍在努力学习Typescript，我想知道为什么我的键入没有按预期工作…？

const-ToggleButton=（{value，children，onClick}:OrderBy | SizeFilter）=>{
const ToggleButton = ({ value, children, onClick }: OrderBy | SizeFilter) => {
  if(!value) {
    return null;
  }
  const handleClick = () => onClick(value)
  return <Button onClick={handleClick}>{children}</Button>
}

如果（！值）{
返回null；
}
常量handleClick=（）=>onClick（值）
返回{children}
}

---

这是因为SizeFilter的值可以是未定义的。

在size filter的情况下，值是可选的