React组件中TypeScript联合类型数组Prop禁止重复选项的实现问题

我们可以通过类型层面的约束，实现数组元素仅来自指定联合类型、且无重复值的校验效果，具体实现步骤如下：

第一步：定义基础联合类型 #

首先基于你的业务需求定义允许的元素类型集合：

type ControlledLayerTypes = 'overlay' | 'baselayer' | 'clusterlayer';

第二步：实现无重数组工具类型 #

通过TypeScript条件类型+递归逻辑，构造仅允许元素唯一的数组类型：

/**
 * 生成元素不重复的数组类型
 * @template T 数组元素允许的类型集合
 * @template Used 递归过程中已使用的类型，外部调用不需要传参
 */
type UniqueArray<T, Used extends T = never> =
  // 所有允许的类型都已被使用，只能是空数组
  Exclude<T, Used> extends never
    ? []
    : // 可选不追加元素，或追加一个未使用过的元素后继续递归
      | []
      | [Exclude<T, Used>, ...UniqueArray<T, Used | Exclude<T, Used>>]

第三步：绑定组件Prop类型 #

将构造好的无重数组类型应用到组件Prop定义中：

type ComponentProps = {
  someProp: UniqueArray<ControlledLayerTypes>
  // 其他Prop定义...
}

const YourComponent = (props: ComponentProps) => {
  // 组件业务逻辑
  return <></>
}

校验效果 #

配置完成后TypeScript会自动校验someProp的取值：

• ✅ 合法示例：

<YourComponent someProp={['overlay']} />
<YourComponent someProp={['overlay', 'baselayer']} />
<YourComponent someProp={['clusterlayer', 'overlay', 'baselayer']} />

• ❌ 非法示例（TS会直接抛出类型错误）：

// 重复传入overlay报错
<YourComponent someProp={['overlay', 'overlay']} />
// 重复传入baselayer报错
<YourComponent someProp={['baselayer', 'overlay', 'baselayer']} />

可选：添加运行时校验 #

如果组件可能被非TypeScript环境调用，可以补充运行时防重逻辑：

const YourComponent = ({ someProp }: ComponentProps) => {
  if (new Set(someProp).size !== someProp.length) {
    throw new Error('someProp参数不允许传入重复值');
  }
  // 其余组件逻辑...
}

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