TypeScript中通过枚举键取值的高效方案（替代Switch语句）

我在TypeScript中定义了如下枚举对象（注：原代码存在语法错误，已修正）：

export enum AllGroup {
  GROUP_AUS = 'A',
  GROUP_IN = 'B'
}

当传入键值（如const input = 'GROUP_IN'）时，期望得到对应值B。目前我使用Switch语句实现，但枚举过长时该方式繁琐，请问是否有更优方法？

我当前的实现代码：

const renderValue = (input: string): JSX.Element => {
  switch (input) {
    case AllGroup.GROUP_AUS:
      return <>A</>;
    case AllGroup.GROUP_IN:
      return <>B</>;
    default:
      return <div></div>;
  }
};

方法1：直接利用枚举的索引访问 #

TypeScript的字符串枚举本身支持通过键名获取对应值，直接用索引访问就能大幅简化代码：

const renderValue = (input: string): JSX.Element => {
  // 类型断言确保input是枚举的合法键
  const value = AllGroup[input as keyof typeof AllGroup];
  return value ? <> {value} </> : <div></div>;
};

方法2：抽离映射对象（更易扩展） #

如果后续需要给映射逻辑加额外定制，可以单独定义和枚举对应的映射对象，再通过对象访问取值：

// 定义映射对象，与枚举键值对应
const groupMap: Record<keyof typeof AllGroup, JSX.Element> = {
  GROUP_AUS: <>A</>,
  GROUP_IN: <>B</>
};

const renderValue = (input: string): JSX.Element => {
  return groupMap[input as keyof typeof AllGroup] || <div></div>;
};

方法3：类型安全的键约束 #

如果想避免无效输入，可以直接限定参数为枚举的合法键，编译阶段就会拦截错误：

const renderValue = (input: keyof typeof AllGroup): JSX.Element => {
  return <> {AllGroup[input]} </>;
};

这种方式下，调用renderValue时传入非枚举键会直接触发TypeScript编译报错，无需额外处理默认值（业务允许的情况下）。

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