为什么TypeScript字符串枚举不允许计算值？如何实现枚举成员值复用？

报错原因 #

你遇到的报错是TypeScript字符串枚举的语法约束导致的：

Computed values are not permitted in an enum with string valued members.

字符串枚举的成员值仅支持静态字符串字面量，不允许使用计算值，你代码中${HOME}/dashboard属于运行时拼接的计算值，不符合语法要求因此抛出错误。

可行方案 #

方案1：保留枚举结构，直接写死完整路径 #

如果一定要用原生Enum实现，直接写出拼接后的完整路径即可：

export enum RouteUrls {
  HOME = '/home',
  DASHBOARD = '/home/dashboard'
}

• 优点：完全遵循Enum的语法规范，支持Enum所有原生特性（比如反向映射、遍历枚举成员）
• 缺点：路径前缀重复，后续修改HOME路径时需要同步修改所有关联的子路径，维护成本高

方案2：用as const常量对象替代Enum（更推荐） #

TS中可以用带as const断言的对象实现和Enum完全一致的类型效果，同时支持计算值拼接：

// 定义常量集合
export const RouteUrls = {
  HOME: '/home',
  DASHBOARD: `${RouteUrls.HOME}/dashboard`
} as const

// 提取出对应的类型，实现和Enum一样的类型约束能力
export type RouteUrls = typeof RouteUrls[keyof typeof RouteUrls]

• 优点：支持动态拼接路径，修改前缀只需要改HOME一处即可，维护成本低，同时可以获得完整的TS类型提示，完全满足路由常量的使用场景
• 缺点：本质是普通对象，不支持Enum专属的反向映射特性，但路由场景下几乎不需要用到该特性

方案3：拆分基础路径枚举，拼接后显式断言 #

如果需要保留Enum的使用习惯，可以拆分基础路径，拼接后加as const断言规避语法校验：

enum BaseRoute {
  HOME = '/home'
}

export enum RouteUrls {
  HOME = BaseRoute.HOME,
  DASHBOARD = `${BaseRoute.HOME}/dashboard` as const
}

• 优点：拆分了基础前缀，修改时只需要改BaseRoute即可，同时保留了Enum的结构
• 缺点：属于语法绕弯实现，不如方案2直观

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