React组件中Button类型定义不符合预期，寻求优化方案

针对你遇到的类型校验不严谨、错误提示不友好的问题，我们可以通过明确的可辨识联合类型来实现更精准的类型约束，同时优化错误提示的清晰度：

import { ComponentPropsWithRef, ReactNode } from 'react';

type IconPosition = "icon-only" | "icon-right" | "icon-left";
type IconName = "avatar" | "circle" | "email";

// 基础按钮属性：剥离原生button中需要分支控制的属性
type BaseButtonProps = {
  fullWidth?: boolean;
} & Omit<ComponentPropsWithRef<"button">, 'aria-label' | 'children'>;

// 无图标按钮分支：禁止图标相关属性，允许children
type ButtonNoIconProps = BaseButtonProps & {
  iconPosition?: never;
  iconName?: never;
  children: ReactNode; // 可根据需求改为可选：children?: ReactNode
};

// 带图标（非仅图标）分支：必填图标属性，允许children，可选禁用aria-label
type ButtonWithIconProps = BaseButtonProps & {
  iconPosition: Exclude<IconPosition, "icon-only">;
  iconName: IconName;
  children?: ReactNode;
  aria-label?: never; // 若业务允许同时存在children和aria-label，可删除此约束
};

// 仅图标按钮分支：必填图标、aria-label，禁止children
type ButtonIconOnlyProps = BaseButtonProps & {
  iconPosition: "icon-only";
  iconName: IconName;
  "aria-label": string;
  children?: never;
};

// 最终组件Props：三个分支的可辨识联合
type ButtonProps = ButtonNoIconProps | ButtonWithIconProps | ButtonIconOnlyProps;

// 组件示例
const Button = (props: ButtonProps) => {
  return <button {...props} />;
};

核心改进说明 #

1. 精准的类型分支匹配
   每个分支以iconPosition作为唯一辨识符，TypeScript会严格匹配对应分支的属性约束，彻底解决Attempt One中icon-only模式下缺少iconName不报错的问题——只要传入iconPosition: "icon-only"，就必须匹配ButtonIconOnlyProps分支，强制校验iconName和aria-label。

2. 友好的错误提示
   通过children?: never明确禁止仅图标按钮传入children，此时若误传children，TypeScript会直接提示：Type 'ReactNode' is not assignable to type 'undefined'，错误指向children属性本身，而非混淆到iconPosition。

3. 清晰的职责拆分
   将原生button属性中需要分支控制的aria-label和children从基础属性中剥离，每个分支单独定义这些属性的规则，避免交叉类型带来的逻辑混乱。

可选调整 #

• 若无图标按钮允许空内容，可将ButtonNoIconProps中的children改为可选类型：children?: ReactNode
• 若业务允许带文字的图标按钮同时设置aria-label，可删除ButtonWithIconProps中的aria-label?: never约束

内容的提问来源于stack exchange，提问作者John Marsden