TypeScript结合enum与计算属性名定义映射类型报错如何解决

错误原因 #

• 你对keyof Action的使用存在误区：Action是枚举类型，keyof Action获取的是枚举类型本身的原型属性（比如toString、valueOf等内置方法），并非你定义的action1/action2枚举成员。要获取你声明的枚举成员名称的联合类型，需要使用keyof typeof Action，typeof Action会拿到你定义的枚举值（枚举对象）的类型，它的键才是你声明的枚举成员。
• 上述错误导致遍历得到的key类型不符合ActionState的键的类型要求，所以会抛出“无法用于索引类型”的错误。

正确解法 #

最简写法 #

直接提取ActionState所有值的联合类型作为ActionModelState的键即可：

type ActionModelState = Record<typeof ActionState[keyof typeof ActionState], boolean>

从枚举遍历的写法 #

如果你需要严格从Action枚举出发做映射，可以用如下写法：

type ActionModelState = {
  [K in keyof typeof Action as `${typeof ActionState[Action[K]]}`]: boolean
}

两种写法得到的ActionModelState都符合你预期的结构，和BaseAction交叉后的EnrichedAction可以直接用于你给出的示例代码，没有类型错误。

内容的提问来源于stack exchange，提问作者Jozef - Spatialized.io