TypeScript判别式联合在React组件Props中失效问题

问题出在你当前的ButtonProps类型定义逻辑上：BaseButtonProps & conditionalProps这种交叉联合类型的写法，会让TypeScript把两个分支的所有属性合并成可选属性，无法通过type字段实现类型区分。

直接调整类型定义，让ButtonProps成为区分联合类型（Discriminated Union），就能让TypeScript根据type自动匹配对应属性提示：

// 重新定义ButtonProps为区分联合类型
export type ButtonProps = 
  | ({ type?: "block" } & BlockButtonProps)
  | ({ type?: "link" } & LinkButtonProps);

（注：因为BlockButtonProps和LinkButtonProps已经继承了BaseButtonProps，所以不需要再单独交叉BaseButtonProps）

接着调整组件实现，建议不要提前解构所有props（避免类型歧义），而是在组件内部通过type窄化类型：

const Button = ({
  type = "block",
  children,
  ...rest
}: ButtonProps): JSX.Element => {
  if (type === "link") {
    // 此处rest会自动推导为LinkButtonProps的属性
    return <LinkButton {...rest}>{children}</LinkButton>;
  }
  // 此处rest自动推导为BlockButtonProps的属性
  return <BlockButton {...rest}>{children}</BlockButton>;
};

修改完成后，当你使用<Button type="link">时，编辑器只会提示LinkButtonProps的属性；使用type="block"时，仅提示BlockButtonProps的属性，不会再出现属性合并的混乱提示。

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