reactjs - 如何处理一个重载中存在而另一重载中不存在的属性？

Question

我使用 React 16 和 Typescript 3。我创建了一个组件，该组件根据是否设置属性 to 返回按钮或链接。该组件可以获取 to 或 onClick 属性，但不能同时获取两者。

我找到了issue on TypeScript repository这准确地描述了我的问题，它似乎在 2.2 版本中修复了，但以某种奇怪的方式，它不起作用。

为此，我创建了接口(interface)并按如下方式使用它们:

interface GeneralProps {/* whatever here, it works */}
interface LinkProps extends GeneralProps { to: string }
interface ButtonProps extends GeneralProps { 
  onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void 
  // onClick might be as well undefined
}

function Button (props: LinkProps | ButtonProps): JSX.Element {
  const Component: AnyStyledComponent = props.to ? Link : Button
  return (
    <Component to={props.to} onClick={props.onClick}>
      {props.children}
    </Component>
  )
}

或者，我也尝试这样编写这个函数:

function Button (props: LinkProps): JSX.Element
function Button (props: ButtonProps): JSX.Element {
  const Component: AnyStyledComponent = props.to ? Link : Button
  return (
    <Component to={props.to} onClick={props.onClick}>
      {props.children}
    </Component>
  )
}

上面 Button 函数的第一个实现抛出两个错误，第二个实现仅抛出第一个错误:

Property 'to' does not exist on type 'LinkProps | ButtonProps'. Property 'to' does not exist on type 'ButtonProps'.

Property 'onClick' does not exist on type 'LinkProps | ButtonProps'. Property 'onClick' does not exist on type 'LinkProps'.

为了避免错误，我采用了愚蠢的解决方法:

function Button (props: LinkProps | ButtonProps): JSX.Element {
  const properties = Object.keys(props)
  const to = properties.find((el) => el === 'to')
  const Component: AnyStyledComponent = to ? Link : Button
  return (
    <Component {...props}>
      {props.children}
    </Component>
  )
}

但是，这并不能解决我的问题，因为我仍然可以将 to 和 onClick 属性传递给 Button 组件。

我的代码中是否存在某种阻止我实现目标的错误，我应该从不同的角度解决这个问题，还是这根本不可能做到？

Answer 1

感谢 jcalz 发布的帖子，我想出了一个解决方案，它实际上按照我的预期工作。我的解决方案是不同的(我使用接口(interface)，而不是类型)，但是该线程让我想到使用 never 类型。我之前也使用过它，但是作为必需的属性，然后 typescript 要求传递一个值，当你传递它时， typescript 要求删除它。从不键入的属性必须是可选的。

interface GeneralProps {/* whatever here, it works */}
interface LinkProps extends GeneralProps { 
  to: string
  onClick?: never
}
interface ButtonProps extends GeneralProps { 
  onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void 
  to?: never
}
function Button (props: LinkProps | ButtonProps): JSX.Element { ... }

使用当前的解决方案， typescript 始终会识别类型上存在的两个属性，to和onClick，当我通过其中任何一个时都不会抛出错误属性，但当我传递这两个属性时抛出。