TypeScript实现State联合类型的逗号分隔模板字面量类型Filters

给定基础类型 #

type State = 
  | 'read'
  | 'rejected'
  | 'sent'
  | 'refused'
  | 'expired' 
  | 'draft'

需求说明 #

需要定义模板字面量类型Filters，匹配1到所有State成员、以英文逗号分隔、无重复状态、无前后多余逗号的任意合法字符串，替代手动枚举不同长度联合分支的低效、易遗漏写法。

实现方案 #

通过分布式条件类型+递归构造即可实现通用逻辑，无需手动枚举不同长度的联合分支：

type Filters<T extends string = State, U extends string = T> =
  T extends unknown
    ? T | `${T},${Filters<Exclude<U, T>>}`
    : never;

实现原理 #

• 借助TypeScript分布式条件类型特性：当联合类型传入T extends unknown判断时，类型系统会自动遍历联合的每一个成员单独做处理，天然覆盖所有排列组合情况
• 基础匹配逻辑：单个State成员本身就是合法值，覆盖长度为1的场景
• 递归拼接逻辑：选中当前状态后拼接英文逗号，再通过Exclude<U, T>把已选状态从可选池中移除，递归构造剩余部分的合法类型，自动覆盖长度从2到全部6个状态拼接的所有场景，从类型层面避免重复选值、多余逗号的非法情况

匹配效果验证 #

• 可正常匹配的合法值示例：
  • 'draft'（单个状态）
  • 'sent,refused'（两个状态任意顺序）
  • 'read,rejected,sent,refused,expired,draft'（全量状态任意顺序）
• 会被类型拦截的非法值示例：
  • 'draft,draft'（重复状态）
  • 'invalid_state'（不存在的状态值）
  • 'sent,'/',sent'（首尾多余逗号）

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