TypeScript中不使用string类型时如何精简冗长联合类型

核心思路是通过只读常量数组派生联合类型，既不需要重复手写冗余的字面量联合，又能保留精确的类型约束，后续新增选项只需要修改常量数组即可，完全适配Redux状态后续扩展的需求。

1. 抽离可选值常量集合 #

把所有允许的固定选项值定义为带as const约束的只读数组，建议统一抽离到公共的constants.ts或者types.ts文件中方便全局复用：

// 本地select状态的可选值
export const SELECT_OPTIONS = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h'] as const;
// Redux中group.set的可选值，基于SELECT_OPTIONS扩展，避免重复写重复值
export const GROUP_SET_OPTIONS = [...SELECT_OPTIONS, 'i', 'j', 'k'] as const;

如果后续两个场景的可选值完全统一，直接复用同一个常量数组即可，不需要拆分。

2. 从常量派生精确联合类型 #

用typeof搭配数组下标类型，直接从常量数组提取字符串字面量联合，不需要手动逐个写联合项：

// 本地select的类型，包含初始空值
type SelectValue = '' | (typeof SELECT_OPTIONS)[number];
// group.set字段的类型
type GroupSetValue = (typeof GROUP_SET_OPTIONS)[number];

3. 替换原有冗余写法 #

本地useState替换 #

直接用派生的类型替换原来冗长的联合定义即可：

const [select, setSelect] = useState<SelectValue>('');

Redux接口优化 #

按照TS规范建议将接口名调整为大驼峰格式，替换set字段类型，后续新增字段如果是固定字面量联合，都可以用同样的方式抽离，避免后续维护时多处修改：

export interface Group {
  id: string;
  set: GroupSetValue;
  groupStatus: boolean;
  // 后续扩展的字段可以按同样逻辑抽离类型
}

方案优势 #

• 维护成本低：后续新增/删除可选值，只需要修改对应常量数组，类型会自动同步更新，不需要同时改值列表和类型定义
• 复用性强：定义的常量数组可以直接用于下拉选项渲染、表单校验、逻辑判断等场景，不需要重复维护两份相同的列表
• 类型安全：完全保留精确的类型检查能力，传入不在可选范围内的值时TS会直接报错，不会退化为宽泛的string类型

如果你更习惯枚举语法，也可以用字符串枚举实现相同效果，但常量数组派生的方案没有额外运行时代码，复用场景更多，整体维护成本更低。

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