TypeScript中enum枚举类型的常用姿势
[ 2023/04/08, JavaScript , 3789阅, 0评 ]

1、转换为字面量的联合类型

1.1、数字枚举

enum Test1 {
  red,
  green,
  yellow,
}
type KeyTest1 = keyof typeof Test1 // "red" | "green" | "yellow"
type ValTest1 = `${Test1}` // "0" | "1" | "2"

type StrToNum<Str> = Str extends `${infer Num extends number}` ? Num : Str
type NumValTest1 = StrToNum<`${Test1}`> // 0 | 1 | 2

1.2、字符串枚举

enum Test2 {
  red = '红',
  green = '绿',
  yellow = '黄',
}
type KeyTest2 = keyof typeof Test2 // "red" | "green" | "yellow"
type ValTest2 = `${Test2}` // "红" | "绿" | "黄"

2、获取枚举的键数组

TypeScript 中的枚举是真实的对象,存在于运行时,因此我们可以使用Object.keys方法来获取枚举的键数组。

2.1、数字枚举

console.log(Object.keys(Test1))
// ['0', '1', '2', 'red', 'green', 'yellow']
// 数字枚举的输出包括值,因此我们必须使用filter方法从数组中过滤掉任何不需要的值。
const arrKeyTest1 = Object.keys(Test1).filter((v) => isNaN(Number(v)))
console.log(arrKeyTest1)
// ['red', 'green', 'yellow']

2.2、字符串枚举

console.log(Object.keys(Test2))
// ['red', 'green', 'yellow']

3、获取枚举的键值数组

我们可以使用Object.values方法来获取枚举的键值数组。

3.1、数字枚举

console.log(Object.values(Test1))
// ['red', 'green', 'yellow', 0, 1, 2]
// 数字枚举的输出包括键,因此我们必须使用filter方法从数组中过滤掉任何不需要的值。
const arrValTest1 = Object.values(Test1).filter((v) => !isNaN(Number(v)))
console.log(arrValTest1)
// [0, 1, 2]

3.2、字符串枚举

console.log(Object.values(Test2))
// ['红', '绿', '黄']

有朋自远方来...评论一下呗O(∩_∩)O