typescript 中是如何遍历枚举的?

Question

代码如下

export enum Icons {
    ADD,
    API,
    APPS,
    ARTICLE
}

for (var icon in Icons) {
  console.log(icon);
}

我现在用的是 for in, 但是结果不是很符合需求, 前面会输出索引

如果不输出索引, 只要获取 ADD, API, APPS, ARTICLE 这四个值, 有没有其他的遍历方式?

Answer 1

指定下每个枚举值对应的value，就不会生成索引的key了

export enum Icons {
    ADD = 'ADD',
    API = 'API',
    APPS = 'APPS',
    ARTICLE = 'ARTICLE'
}

for (var icon in Icons) {
  console.log(icon);
}

但是这样就很麻烦，所以我很不喜欢用枚举，我更喜欢直接用union type来枚举所有情况：

type Icons = 'ADD' | 'API' | 'APPS' | 'ARTICLE'

---

Answer 2

枚举在TS中不是一种纯类型，它混入了运行时，编译后是这样：

var Icons;
(function (Icons) {
    Icons[Icons["ADD"] = 0] = "ADD";
    Icons[Icons["API"] = 1] = "API";
    Icons[Icons["APPS"] = 2] = "APPS";
    Icons[Icons["ARTICLE"] = 3] = "ARTICLE";
})(Icons || (Icons = {}));

从类型的角度来说for (var icon in Icons)这段代码应该报错，因为Icons是类型定义，不应该被使用在运行时代码逻辑里，但由于TS设计的特殊性，所以这样是可以的，但是TS也是可以通过const将枚举声明成纯类型定义即：

export const enum Icons {
    ADD,
    API,
    APPS,
    ARTICLE
}

当你这样声明枚举时，for in将会报错，因为它不会有运行时的代码。所以并不建议将类型和运行混用

Answer 3

type B = keyof typeof Icons

Answer 4

目前能想到的一种解决办法

for (let key = 0; true; key++) {
  if (Icons[key]) {
    console.log(Icons[key])
  } else {
    break;
  }
}

Answer 5

你把数字过滤掉不就行了

export enum Icons {
    ADD,
    API,
    APPS,
    ARTICLE
}

enum Icons {
    ADD ,
    API,
    APPS,
    ARTICLE
}
console.log(Object.keys(Icons).filter(item => isNaN(Number(item)))) // ["ADD", "API", "APPS", "ARTICLE"]

Answer 6

有三种情况，但是可以用一行代码拿到 Enum 的 keys

Enum number value (default)

enum Icons {
  ADD,
  API,
  APPS,
  ARTICLE
}

const keys = Object.keys(Icons)
// [ADD", "API", "APPS", "ARTICL", "0", "1", "2", "3"]

Enum string value

enum Icons {
  ADD = "add",
  API = "app",
  APPS = "apps",
  ARTICLE = "article"
}

const keys = Object.keys(Icons)
// [ADD", "API", "APPS", "ARTICL"]

Enum mixed value(string + number)

enum Icons {
  ADD,
  API,
  APPS = "apps",
  ARTICLE = "article"
}

const keys = Object.keys(Icons)
// ["0", "1", "ADD", "API", "APPS", "ARTICL"]

总结

以上的情况只有当 enum 的所有项都有 string value 的时候，keys 才不会包含数字。

所以通过一下一行代码就可以拿到想要的结果

const keys = Object.keys(Icons).filter(key => Number.isNaN(Number(key)))