TypeScript，获取枚举（enum）的keys类型

2023年11月8日 • ... • ☕️ 1 min read

// 定义一个enum
enum CheckTypesEnum {
  'all' = 'one',
  'allTodo' = 'two',
  'allDone' = 'three'
}

type CheckType = keyof typeof CheckTypesEnum;

其中的keyof typeof CheckTypesEnum就等价于'all' | 'allTodo' | 'allDone'。

keyof

keyof可以取到interface或type的键。这一点和Object.keys有点类似。

type Point = { x: number; y: number };
type P = keyof Point; // type P = 'x' | 'y'

typeof

我们知道，typeof是js的基本概念。他可以获取到操作数的字符串类型（“undefined”, “object”, “boolean”, “number”, “bigint”, “string”, “symbol”, “function”）

typeof 42; // 'number'
typeof 'bubble'; // 'string'
typeof true; // 'boolean'

但是在ts中不太一样：作为值的时候，它返回”undefined”, “object”, “boolean”, “number”, “bigint”, “string”, “symbol”, “function” 作为类型的时候，它会返回一个对象各个key的详细类型

const preferences = { language: true, theme: 'light' };
console.log(typeof preferences); // 'object'
type PType = typeof preferences; // type PType = {language: boolean;theme: string;}

enum类型上使用keyof typeof

首先，要知道enum在运行时其实是个对象存在的。上面的例子编译为js就是

var CheckTypesEnum = {
  all: 'one',
  allTodo: 'two',
  allDone: 'three'
}

首先是typeof CheckTypesEnum，等价于

type theTypes = {
    all: string;
    allTodo: string;
    allDone: string;
}

然后是keyof theTypes，等价于

type keyTypes = "all" | "allTodo" | "allDone"