如何在TypeScript中使用Enum确定条件返回值类型

问题根因 #

你的代码推导失效的核心原因有两个：

• 首先你定义的CarColor类型本身不符合预期，也没有和实际的data变量绑定：
  你定义时用了ColorLookup<CarType>，传入的是整个CarType枚举联合类型，推导出来的结果直接是string | number，无法对应到每个枚举值单独的返回类型。同时你的实际data结构是value字段，类型定义里写的是color，完全和实际结构不匹配，这个类型声明等于没生效。
• 其次data没有绑定正确的关联类型，TS默认推导data的索引返回值是{value: string | number}联合类型，就算传入的泛型T是具体枚举值，TS也无法建立T和返回值的映射关系，所以返回类型永远是联合类型。

修复方案 #

首先定义正确的映射类型，遍历每个枚举值生成对应的value类型：

enum CarType {
  Sedan, SUV
}

type ColorLookup<T extends CarType> = T extends CarType.Sedan ? string : number

// 定义遍历枚举的映射类型，每个枚举值对应自己的value类型
type CarDataType = {
  [K in CarType]: {
    value: ColorLookup<K>
  }
}

然后给data显式绑定上面的类型，再给select函数关联返回类型即可：

// 显式声明data的类型
const data: CarDataType = {
  [CarType.Sedan]: { value: "red" },
  [CarType.SUV]: { value: 123123 }
}

// 用索引查询关联泛型T和返回值类型
const select = <T extends CarType>(type: T): CarDataType[T]['value'] => {
  return data[type].value
}

// 现在类型推导正常
var a: string = select(CarType.Sedan) // 无报错
var b: number = select(CarType.SUV) // 无报错

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