TypeScript：Button组件指定Subtle变体时如何强制要求level属性？

我为可渲染为button或anchor元素的Button组件创建了TypeScript类型。当使用特定变体Subtle时，要求必须提供level属性。目前类型定义接近正确，但选择Subtle变体却未指定level时，本该提示缺少level，却错误显示缺少href属性。需要修正类型以实现预期效果。

Button组件需要覆盖以下场景：

• 渲染为button元素
  • 普通按钮：选择除Subtle外的任意变体
  • Subtle按钮：必须提供level属性
• 渲染为类按钮的anchor元素
  • 当存在href且不存在type时渲染
  • 普通类按钮：选择除Subtle外的任意变体
  • Subtle类按钮：必须提供level属性

问题出在当前联合类型的分支匹配逻辑不够精准：当使用Subtle变体但未传level时，TypeScript无法匹配到按钮分支的Subtle约束，转而尝试匹配锚点分支，因此错误提示缺少href。

我们需要调整类型结构，明确区分按钮和锚点的核心特征，同时精准绑定Subtle变体与level的强制关系：

export enum ButtonV2Variant {
  Primary = 'Primary',
  Secondary = 'Secondary',
  Destructive = 'Destructive',
  Subtle = 'Subtle',
  Text = 'Text',
}

export enum ButtonV2Size {
  Sm = 'Small',
  Md = 'Medium',
  Lg = 'Large',
}

export enum ButtonV2Level {
  Zero = '0',
  One = '1',
  Two = '2',
}

type ButtonV2PropsBase = {
  children: string
  size?: ButtonV2Size
  isLoading?: boolean
  leftIconName?: IconName
  rightIconName?: IconName
}

// 明确Button元素的核心标识：存在type、不存在href
type ButtonElementConstraints = {
  type?: 'button' | 'submit' | 'reset'
  href?: never
}

// 明确Anchor元素的核心标识：存在href、不存在type
type AnchorElementConstraints = {
  href: string
  type?: never
}

// Subtle变体强制约束：必须传level
type SubtleVariantRequired = {
  variant: ButtonV2Variant.Subtle
  level: ButtonV2Level
}

// 非Subtle变体约束：level不可传
type NonSubtleVariantOptional = {
  variant?: Exclude<ButtonV2Variant, ButtonV2Variant.Subtle>
  level?: never
}

// 组合最终类型：明确区分按钮/锚点分支，各自绑定变体约束
type ButtonV2Props = ButtonV2PropsBase & (
  (ButtonElementConstraints & React.ComponentProps<'button'> & (SubtleVariantRequired | NonSubtleVariantOptional)) |
  (AnchorElementConstraints & React.ComponentProps<'a'> & (SubtleVariantRequired | NonSubtleVariantOptional))
)

关键改动说明 #

1. 拆分出ButtonElementConstraints和AnchorElementConstraints，用type/href的存在性作为明确分支标识，让TypeScript能快速区分元素类型
2. 提取SubtleVariantRequired和NonSubtleVariantOptional，把变体与level的约束逻辑单独封装，避免类型交叉混乱
3. 重新组合联合类型，确保每个分支的特征足够清晰，TypeScript能精准匹配对应约束，不会出现分支推断错误

调整后，当使用Subtle变体但未传level时，TypeScript会正确识别到无论是按钮还是锚点分支都强制要求level，从而给出正确的缺失提示。

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