能否递增/递减TypeScript枚举值设置switch条件并约束取值范围

TypeScript数字枚举完全可以实现你要的switch判断、点击增减层级的需求，之前运行异常是两个写法问题导致的，修正后即可正常使用。

原有代码的错误点 #

• case匹配值写错：默认数字枚举的成员值是数字类型，MenuLevel.TYPE对应值为0，不是字符串"TYPE"，写case "TYPE"永远无法命中分支。正确写法是直接用枚举成员作为case判断条件，不要手写字符串或裸数字，还能获得TS的类型校验能力。
• 增减操作未做边界校验：TS不会自动约束算术运算的结果为枚举成员范围，直接对枚举值做+1/-1得到的是普通number类型，自然可能出现负数、超出最大枚举值的异常结果，导致switch分支匹配失败。

可直接复用的正确实现 #

1. 枚举定义与边界处理工具 #

enum MenuLevel {
  TYPE,
  SUBTYPE,
  SUBTYPEITEM,
  ITEMOPTION,
  // 内置边界值，无需手动维护枚举最值
  __MIN = TYPE,
  __MAX = ITEMOPTION
}

/**
 * 安全切换菜单层级，结果永远约束在枚举范围内
 * @param current 当前层级
 * @param step 切换步长：1为下一级，-1为上一级
 */
const getSafeLevel = (current: MenuLevel, step: 1 | -1): MenuLevel => {
  const nextValue = current + step
  // 越界时直接返回边界值，也可根据业务需求改为禁止切换/循环切换
  if (nextValue < MenuLevel.__MIN) return MenuLevel.__MIN
  if (nextValue > MenuLevel.__MAX) return MenuLevel.__MAX
  return nextValue as MenuLevel
}

2. switch渲染逻辑 #

const renderLevelMenu = (currentLevel: MenuLevel) => {
  switch (currentLevel) {
    case MenuLevel.TYPE:
      return <TypeMenu />
    case MenuLevel.SUBTYPE:
      return <SubTypeMenu />
    case MenuLevel.SUBTYPEITEM:
      return <SubtypeItemMenu />
    case MenuLevel.ITEMOPTION:
      return <ItemOptionMenu />
    default:
      // 兜底分支，异常值默认返回第一级菜单
      return <TypeMenu />
  }
}

3. React组件内调用逻辑 #

// 菜单层级状态，初始值为第一级
const [currentLevel, setCurrentLevel] = useState<MenuLevel>(MenuLevel.TYPE)

// 进入下一级
const handleGoNext = () => {
  setCurrentLevel(prev => getSafeLevel(prev, 1))
}

// 返回上一级
const handleGoBack = () => {
  setCurrentLevel(prev => getSafeLevel(prev, -1))
}

额外注意事项 #

• 不要尝试用MenuLevel.1这种方式访问枚举，枚举只能通过成员名访问，数字是运行时的实际存储值，不能作为访问键。
• 所有case都用枚举成员编写时，TS会自动做穷尽检查，后续新增枚举成员如果漏写对应分支，TS会直接抛出类型错误，比硬编码字符串/数字的可维护性高很多。
• 如果不想在枚举里加__MIN/__MAX辅助值，也可以运行时通过Object.values(MenuLevel).filter(v => typeof v === 'number')过滤出所有数字枚举值再取最值，但加辅助值的写法性能更好、代码更直观。

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