React+TypeScript互斥Props高效处理策略咨询

一、自定义标签互斥方案的修正（可行且优化体验） #

你尝试的自定义标签思路是可行的，但之前的类型工具逻辑有误导致约束失效。以下是修正后的方案，可实现严格互斥约束、优化自动补全，并支持例外属性：

实现代码 #

// 用唯一标识的标签类型区分互斥组，避免类型冲突
type Red = { __tag: 'red' };
type Blue = { __tag: 'blue' };

// 公共属性：所有场景都需要的属性
interface CommonProps {
  prop1: string;
  prop2: string;
  prop3: string;
}

// 红组互斥属性：只能和红组其他属性共存
interface RedExclusiveProps {
  prop4?: string & Red;
  prop5?: string & Red;
  prop6?: string & Red;
}

// 蓝组互斥属性：只能和蓝组其他属性共存
interface BlueExclusiveProps {
  prop7?: string & Blue;
  prop8?: string & Blue;
  prop9?: string & Blue;
}

// 例外属性：不受互斥约束，可与任意组属性共存
interface ExceptionProps {
  exceptionProp?: boolean;
}

// 生成互斥联合类型：要么选红组+公共+例外，要么选蓝组+公共+例外
type MutexComponentProps = 
  (CommonProps & ExceptionProps & RedExclusiveProps) | 
  (CommonProps & ExceptionProps & BlueExclusiveProps);

// 组件定义
const MyComponent = (props: MutexComponentProps) => {
  return <div>MyComponent</div>;
};

效果验证 #

• ✅ 合法场景：只传红组或蓝组属性时，自动补全仅提示当前组的专属属性
• ❌ 非法场景：同时传入红组和蓝组属性，TypeScript直接报错
• ✅ 例外属性：exceptionProp可与任意组属性同时使用

二、其他提升开发体验的互斥Props处理策略 #

1. 区分联合类型（Discriminated Union）—— 官方推荐最佳实践 #

通过一个标识字段（如type）明确区分不同的props分支，TypeScript会自动根据标识字段做类型收窄，自动补全体验极佳：

interface CommonProps {
  commonProp1: string;
}

interface Component1Branch extends CommonProps {
  type: 'component1';
  component1Prop?: string;
}

interface Component2Branch extends CommonProps {
  type: 'component2';
  component2Prop?: string;
}

type ComponentProps = Component1Branch | Component2Branch;

const MyComponent = (props: ComponentProps) => {
  switch (props.type) {
    case 'component1':
      // 此处仅能访问component1的专属属性，自动补全精准
      return <div>{props.component1Prop}</div>;
    case 'component2':
      return <div>{props.component2Prop}</div>;
  }
};

2. 通用互斥类型工具 #

如果需要复用互斥逻辑，可封装通用类型工具，减少重复代码：

// 通用互斥类型：生成T和U的互斥联合类型
type Mutex<T, U> = (T & Omit<U, never>) | (U & Omit<T, never>);

// 使用示例
type ComponentProps = Mutex<Component1Branch, Component2Branch> & CommonProps;

3. 运行时校验（可选增强） #

为了避免类型断言绕过编译检查，可在组件内部添加运行时校验：

const MyComponent = (props: MutexComponentProps) => {
  const hasRedProps = [props.prop4, props.prop5, props.prop6].some(prop => prop !== undefined);
  const hasBlueProps = [props.prop7, props.prop8, props.prop9].some(prop => prop !== undefined);

  if (hasRedProps && hasBlueProps) {
    throw new Error('红组与蓝组属性不能同时传入');
  }

  return <div>MyComponent</div>;
};

4. 拆分组件——最彻底的解耦方案 #

如果互斥props对应的组件逻辑差异较大，直接拆分为独立组件是最清晰的选择，完全避免互斥属性的维护成本：

const Component1 = (props: CommonProps & { component1Prop?: string }) => { /* ... */ };
const Component2 = (props: CommonProps & { component2Prop?: string }) => { /* ... */ };

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