TypeScript枚举类型是什么？如何定义接收任意枚举的函数参数类型？

让我来一步步解答你的这两个TypeScript枚举相关问题：

在TypeScript里，枚举其实有两个核心层面：类型层面和值层面，这也是它和普通类型、普通对象不一样的地方：

• 类型层面：枚举本身会被当作一个联合类型，包含它所有成员的取值。比如你定义一个Color枚举，Color作为类型时，代表的是Color.Red | Color.Green | Color.Blue这样的联合类型，变量只能取枚举成员的有效值。
• 值层面：编译后，枚举会变成一个真实的JavaScript对象。对于数字枚举，这个对象还会包含反向映射（数字键对应成员名称）；字符串枚举则只有成员名称到值的映射。

举个直观的例子：

enum Color {
  Red, // 默认值0
  Green, // 1
  Blue // 2
}

// 类型层面：color变量只能取Color的成员值
let color: Color = Color.Red;

// 值层面：Color是一个带反向映射的对象
console.log(Color); 
// 输出: { 0: "Red", 1: "Green", 2: "Blue", Red: 0, Green: 1, Blue: 2 }

字符串枚举的例子：

enum Status {
  Active = "ACTIVE",
  Inactive = "INACTIVE"
}

console.log(Status);
// 输出: { Active: "ACTIVE", Inactive: "INACTIVE" }（没有反向映射）

你的场景是要写一个通用方法，处理任意字符串/数字枚举来生成dat.GUI选项——这里要注意：我们要接收的是枚举的“值”（也就是编译后的那个对象），而不是枚举的类型。

要描述这种任意枚举对象的结构，我们可以定义一个通用的Enum类型：

// 通用枚举类型，覆盖数字和字符串枚举
type Enum = {
  [key: string]: string | number;
  [key: number]: string;
};

这个类型的逻辑是：

• 字符串键对应枚举的成员值（可能是数字或字符串）
• 数字键对应枚举成员的名称（只有数字枚举会有这个反向映射）

然后用这个类型来定义函数参数，再在函数里过滤掉数字键（因为我们只需要枚举的成员名称和对应值），生成dat.GUI需要的选项：

function buildGUIOptions(myEnum: Enum) {
  // 过滤掉数字键，只保留枚举成员的名称
  const enumMemberNames = Object.keys(myEnum).filter(key => isNaN(Number(key)));
  
  // 转换成dat.GUI常用的选项格式：{ 成员名称: 成员值 }
  return enumMemberNames.reduce((options, name) => {
    options[name] = myEnum[name];
    return options;
  }, {} as Record<string, string | number>);
}

// 测试数字枚举
enum Direction {
  Left, Right, Up, Down
}
console.log(buildGUIOptions(Direction));
// 输出: { Left: 0, Right: 1, Up: 2, Down: 3 }

// 测试字符串枚举
enum UserStatus {
  Online = "ONLINE",
  Offline = "OFFLINE",
  Away = "AWAY"
}
console.log(buildGUIOptions(UserStatus));
// 输出: { Online: "ONLINE", Offline: "OFFLINE", Away: "AWAY" }

如果你想更严格地区分数字枚举和字符串枚举，也可以拆分出两个更精确的类型：

type NumericEnum = {
  [key: string]: number;
  [key: number]: string;
};

type StringEnum = {
  [key: string]: string;
};

// 通用枚举类型二选一
type GenericEnum = NumericEnum | StringEnum;

这样函数参数用GenericEnum的话，TypeScript会更精准地检查传入的枚举类型。

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