如何将Select onChange事件中e.target.value转为自定义字符串联合类型？

问题场景 #

定义字符串联合类型后，React Select组件的onChange事件中e.target.value默认是string类型，导致原本要求接收联合类型参数的update函数不得不放宽类型，失去了联合类型的类型约束意义：

原始类型与函数定义：

type UnionOfStrings = 'a' | 'b' | 'c'
const Arr : UnionOfStrings[] = ['a','b','c']
const update = (val: UnionOfStrings ) => {
  // 处理逻辑
}

Select组件代码：

<select
  onChange={e => update(e.target.value)}
>
  {Arr.map(val => <option value={val}>{val}</option>)}
</select>

被迫修改的update函数（失去类型约束）：

const update = (val: UnionOfStrings | string) => {
  // 处理逻辑
}

解决办法 #

1. 直接使用类型断言

因为明确知道所有option的value都是UnionOfStrings的成员，所以可以直接把e.target.value断言为联合类型，无需修改update函数：

<select
  onChange={e => update(e.target.value as UnionOfStrings)}
>
  {Arr.map(val => <option value={val}>{val}</option>)}
</select>

2. 用类型守卫做严谨校验

如果需要确保输入合法性，避免非法值传入，可以在update函数内部添加类型守卫，先校验值是否属于联合类型，再执行逻辑，这样update的参数可以保持string类型，但内部能约束为合法的联合类型成员：

// 定义类型守卫函数
const isUnionOfStrings = (val: string): val is UnionOfStrings => {
  return Arr.includes(val); // 直接用已定义的数组做校验，避免重复写值
};

const update = (val: string) => {
  if (!isUnionOfStrings(val)) {
    // 非法值处理：抛出错误、提示用户或直接返回
    throw new Error(`不支持的值：${val}`);
  }
  // 此处val的类型已被推断为UnionOfStrings，可安全处理
  // 处理逻辑
};

3. 改用枚举类型替代联合类型

如果场景适合，可以把联合类型换成枚举，通过枚举的键值映射来实现类型安全：

enum StringEnum {
  A = 'a',
  B = 'b',
  C = 'c'
}

// 生成枚举值数组
const Arr = Object.values(StringEnum);

const update = (val: StringEnum ) => {
  // 处理逻辑
};

对应的Select组件：

<select
  onChange={e => {
    // 将字符串值转换为枚举类型
    const enumVal = StringEnum[e.target.value as keyof typeof StringEnum];
    update(enumVal);
  }}
>
  {Arr.map(val => <option value={val}>{val}</option>)}
</select>

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