时间戳

首页 > 解决方案 > Typescript React 道具类型有两种可能性

reactjs - Typescript React 道具类型有两种可能性

问题描述

我正在尝试在我的新 React 项目中学习和实现 Typescript。我有一个ToggleButton我想在两个场合使用的组件sorting和filtering产品。每个切换选项都有自己的按钮，但取决于它是一个sorting还是filtering选项，会有细微的差别

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>
}

如您所见，如果它是一个filter选项，则value是可选的。因为value在回调中用作参数，所以回调参数也是可选的。

我希望工会|会声明道具必须匹配OrderByorSizeFilter类型。但在我的 IDE 的智能感知中，这两种类型似乎都合并了。

我的代码按预期工作，但我的 IDE 告诉我onClick(value)以下内容：Argument of type 'ProductOrderBy | ProductSize | undefined' is not assignable to parameter of type 'never'.

我可以想出很多解决方法来解决这个问题，但是由于我仍在尝试学习 Typescript，我想知道为什么我的打字没有按预期工作......？

标签： reactjstypescripttypescript-typings

解决方案

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

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

推荐阅读