TypeScript含枚举的联合类型显示为string|number问题排查

问题场景 #

我定义了以下联合类型：

type Preset = `${TextPreset}` | TextPresetKey;

其中：

• TextPreset 是枚举类型
• TextPresetKey 为 keyof typeof TEXT_PRESET_KEY
• TEXT_PRESET_KEY 是标注了 as const、且显式指定类型为 { [key: string]: string } 的对象

异常现象 #

在IDE中悬浮查看 Preset 类型时，显示结果为 string | number，而非预期的枚举字面量集合与 TextPresetKey 的联合。
如果移除 TextPresetKey，仅保留 type Preset = ${TextPreset};，则能正常显示所有枚举字面量的联合类型。

疑问 #

预期类型应为枚举字面量集合与对象键字面量的联合，为何实际显示为 string | number？

原因解析 #

问题核心出在 TEXT_PRESET_KEY 的类型定义上：
你给它显式标注了 { [key: string]: string } 索引签名，即便加了 as const，TypeScript 也会优先采用这个显式标注的类型，而非推导 as const 带来的字面量键类型。

这会导致：

1. keyof typeof TEXT_PRESET_KEY 被解析为 string（因为索引签名的键类型是 string）
2. 当 string 和 ${TextPreset}（枚举字面量的字符串形式）做联合时，TypeScript 会做类型简化——字符串字面量联合类型与 string 联合后，会被收缩为 string
3. 如果 TextPreset 是数字枚举，枚举本身的原始类型包含 number，最终联合类型就会被简化为 string | number

解决方法 #

去掉 TEXT_PRESET_KEY 的显式类型标注，让 TypeScript 通过 as const 自动推导字面量键类型：

修改前：

const TEXT_PRESET_KEY: { [key: string]: string } = {
  // 你的对象内容
} as const;

修改后：

const TEXT_PRESET_KEY = {
  // 你的对象内容
} as const;

此时 keyof typeof TEXT_PRESET_KEY 会变成对象实际键的字面量联合类型，和 ${TextPreset} 联合后，就能得到预期的枚举字面量 + 对象键字面量的联合类型。

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