React(TypeScript)中如何实现组件某一Prop传入时另一Prop必传的约束？

嘿，这个需求我之前做项目的时候也碰到过，在TypeScript里实现这种关联Prop的必传约束，用联合类型就能轻松搞定，咱们一步步来拆解～

首先，我们可以把组件的Props分成两种明确的场景：

• 场景1：不需要展示错误文本，这时候error可选，errorText完全不用传
• 场景2：需要展示错误文本，这时候error必须传（甚至可以约束它为true，更符合实际业务逻辑），同时errorText也得传

基于这两种场景，我们可以定义对应的类型，再通过联合类型组合起来：

// 基础场景：无错误文本，error可选
type InputBaseProps = {
  error?: boolean;
  // 这里可以加其他基础Props，比如placeholder、value之类的
};

// 错误场景：有错误文本时，error必须传（如果想更严谨，可设为error: true）
type InputWithErrorProps = {
  error: boolean; // 或者直接写error: true，强制错误状态下才传文本
  errorText: string;
};

// 最终的Props类型：两种场景二选一
type InputProps = InputBaseProps | InputWithErrorProps;

接下来组件就用这个联合类型来定义Props：

const Input = ({ error, errorText }: InputProps) => {
  // 组件逻辑示例
  return (
    <div className="input-container">
      <input type="text" />
      {error && errorText && <span className="error-text">{errorText}</span>}
    </div>
  );
};

现在来测试一下不同的调用情况，TypeScript会帮我们自动校验：

• <Input /> ✅ 完全没问题，两个错误相关的Prop都不传
• <Input error={true} /> ✅ 只传error也合法
• <Input errorText="请输入正确内容" /> ❌ 直接报错！因为传了errorText却没传error
• <Input error={true} errorText="请输入正确内容" /> ✅ 同时传两个Prop，完全符合约束

如果你的业务逻辑里，只有当error为true时才应该显示errorText，可以把InputWithErrorProps里的error改成true：

type InputWithErrorProps = {
  error: true;
  errorText: string;
};

这样就算有人传了error={false} errorText="xxx"，TypeScript也会直接报错，约束更严谨～

这种联合类型的方式是TypeScript处理这类关联Prop约束最常用的方案，逻辑清晰，也不需要额外的类型守卫代码，上手起来特别方便。

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