如何用TypeScript定义React组件的互斥Props？

云原生阿岚

2026-8-13

实现互斥Props的TypeScript类型定义（最佳智能提示版）

要给你的MyComponent定义符合要求的Props，同时保证编辑器智能提示精准友好，咱们可以利用TypeScript的联合类型和属性排除实现互斥约束，具体步骤如下：

1. 拆分Props结构

把Props拆成三个逻辑部分：

公共属性：必填的selected、onSelect，可选的margin
互斥组1：宽度范围相关的compact、minWidth、maxWidth
互斥组2：固定宽度的width

2. 编写类型定义

// 公共基础Props：所有场景都需要的属性
type BaseProps = {
  selected: string;
  onSelect: () => void;
  margin?: string;
};

// 第一组互斥Props：宽度范围配置，禁止传入width
type WidthRangeProps = {
  compact?: boolean;
  minWidth?: number;
  maxWidth?: number;
  width?: never; // 明确禁止该属性，避免同时传入
};

// 第二组互斥Props：固定宽度配置，禁止传入第一组的属性
type FixedWidthProps = {
  width?: number;
  compact?: never;
  minWidth?: never;
  maxWidth?: never;
};

// 最终组件Props：公共属性 + 二选一的互斥组
type MyComponentProps = BaseProps & (WidthRangeProps | FixedWidthProps);

3. 组件使用示例

const MyComponent = (props: MyComponentProps) => {
  // 根据宽度配置生成样式
  const widthStyles = props.width 
    ? { width: `${props.width}px` }
    : { minWidth: props.minWidth, maxWidth: props.maxWidth };
  
  return (
    <div style={{ margin: props.margin, ...widthStyles }}>
      {/* 组件内容 */}
    </div>
  );
};