Javascript Typescript:X类型的参数不能分配给Y类型的参数&；X.类型X不能分配给类型Y

对于按钮链接组件，我试图根据传递的道具在HTMLButtonAttributes和HtmlanchoraAttribute之间进行选择。 我对打字脚本的知识相当有限

我有以下类型和接口：

interface CommonButtonProps {
   // custom props
}

export interface ButtonProps extends CommonButtonProps,
    React.ButtonHTMLAttributes<HTMLButtonElement> {}

export interface ButtonLinkProps extends CommonButtonProps,
    React.AnchorHTMLAttributes<HTMLAnchorElement> {
  href: string;
}

export type ButtonOrButtonLinkProps = ButtonProps | ButtonLinkProps;

export const isButtonLink = (props: ButtonOrButtonLinkProps,): props is ButtonLinkProps => guard logic

类型为“MouseEvent”的参数不可用 可分配给“MouseEvent&MouseEvent”类型的参数。类型 “MouseEvent”不可分配给类型 “MouseEvent”。 类型“HtmlButtoneElement”缺少类型“HtmlLanchoreElement”中的以下属性：字符集、coords、下载、hreflang和19 更多

当前的

onClick

类型似乎是

为什么HTMLButtoneElement的MouseEvent的事件类型和交集是

&

HTMLLanchoreElement的MouseEvent？我有点期待它会成为一个联盟——要么是一个，要么是另一个

你知道如何解决这个问题吗？

也许你不应该这样做 您的组件的道具是独立代码块的公共API，所以您不想将其扩展得太远。最好的解决方案是不要将所有链接/按钮道具包含在

按钮

道具中，而只包含必要的道具

但如果你不得不这么做的话 问题是typescript不理解什么是

onClick

type，因为它可能根据您传递的道具而有所不同。当typescript变成

props.onClick（execution）

时，props的类型仍然存在歧义

解决方案 使用typeguard让typescript知道什么类型的道具

export const Button: React.FC<...> = props => {
  // props is of type `ButtonProps | ButtonLinkProps` here
  // so `onClick` is ambiguous too

  if (isButtonLink(props)) {
    // Do button link stuff
    // props is of type `ButtonLinkProps` here
  } else {
    // Do button stuff
    // props is of type `ButtonProps` here
  }

  // props is again of type `ButtonProps | ButtonLinkProps` here
  
  return (...);
}

导出常量按钮：React.FC=props=>{ //这里的道具类型为“ButtonProps | ButtonLinkProps” //所以“onClick”也有歧义 如果（按钮链接（道具））{ //做按钮链接的东西 //这里的道具类型为“ButtonLinkProps” }否则{ //做按钮的事 //这里的道具是“按钮式”道具 } //这里的道具也是“ButtonProps | ButtonLinkProps”类型 回报率（…）； }

---

请在中提供您的代码结构

  if (props.onClick) {
    props.onClick(event); // Error
  }

export const Button: React.FC<...> = props => {
  // props is of type `ButtonProps | ButtonLinkProps` here
  // so `onClick` is ambiguous too

  if (isButtonLink(props)) {
    // Do button link stuff
    // props is of type `ButtonLinkProps` here
  } else {
    // Do button stuff
    // props is of type `ButtonProps` here
  }

  // props is again of type `ButtonProps | ButtonLinkProps` here
  
  return (...);
}