React TypeScript中如何约束组件Props：让additionalButton与additionalButtonCallback需同时存在或都不定义

嘿，这个需求太常见了——我们经常遇到需要让某些Props成对出现的场景，用TypeScript的联合类型就能完美解决这个问题！

先拆解下你的问题：当前的IInputProps把additionalButton和additionalButtonCallback都设为可选，导致可能出现只传其中一个的情况，但你希望这两个属性要么同时提供，要么都不提供，从类型层面就阻止不合法的传参。

下面是具体的实现方案：

步骤1：抽离基础Props接口 #

先把除了按钮相关的属性之外，所有通用的Props抽成一个基础接口：

interface IBaseInputProps {
  name: string;
  type: React.HTMLInputTypeAttribute;
  register: any;
  watch?: string;
  label?: string;
  // 把你已有的其他属性都放在这里，比如required、error等
  required?: string;
  error?: any;
}

步骤2：定义两个分支类型 #

我们需要两个明确的分支类型，分别对应“无额外按钮”和“有额外按钮”的场景：

// 场景1：完全不包含按钮相关属性
type IInputWithoutAdditionalButton = IBaseInputProps;

// 场景2：同时包含按钮文本和回调（两个属性设为必填）
type IInputWithAdditionalButton = IBaseInputProps & {
  additionalButton: string;
  additionalButtonCallback: () => void;
};

步骤3：合并成最终的Props类型 #

把两个分支合并成联合类型，这就是组件最终要使用的Props类型：

type IInputProps = IInputWithoutAdditionalButton | IInputWithAdditionalButton;

现在验证效果 #

接下来你的组件使用时，TypeScript会自动帮你校验传参是否合法：

✅ 合法情况1：完全不传按钮相关属性

<InputComponent
  register={register}
  name="newEmail"
  type="text"
  label="New Email"
  required="Please, enter your email"
  error={errors.newEmail}
/>

✅ 合法情况2：同时传按钮文本和回调

<InputComponent
  register={register}
  name="newEmailCode"
  type="text"
  label="New Email Verification Code"
  additionalButton="Get code"
  additionalButtonCallback={() => {
    // 这里写你的回调逻辑
    console.log('发送验证码请求');
  }}
/>

❌ 不合法情况：只传其中一个属性

这时候TypeScript会直接抛出错误，提示你缺少另一个必填属性：

<InputComponent
  register={register}
  name="newEmailCode"
  type="text"
  label="New Email Verification Code"
  additionalButton="Get code"
  // ❌ TypeScript报错：缺少 required 属性 'additionalButtonCallback'
/>

原理说明 #

联合类型让TypeScript明确知道，组件Props只能是两种情况之一：要么完全没有按钮相关属性，要么同时拥有按钮文本和回调函数。这样就从类型层面约束了属性的成对出现，避免了业务逻辑上的潜在错误。如果之后需要添加其他可选属性，直接加到IBaseInputProps里就可以，完全不影响这个约束逻辑~

备注：内容来源于stack exchange，提问作者trapsack