TypeScript 中的“keyof typeof”是什么意思？

小编典典

TypeScript 中的“keyof typeof”是什么意思？

all

向我解释keyof typeofTypeScript 中的含义

例子：

enum ColorsEnum {
    white = '#ffffff',
    black = '#000000',
}

type Colors = keyof typeof ColorsEnum;

最后一行相当于：

type Colors = "white" | "black"

但它是如何工作的？

我希望typeof ColorsEnum返回类似的东西"Object"，然后keyof "Object"不做任何有趣的事情。但我显然错了。

阅读 100

2022-06-28

共1个答案

小编典典

keyof接受一个对象类型并返回一个接受任何对象键的类型。

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

const coordinate: P = 'z' // Type '"z"' is not assignable to type '"x" | "y"'.

typeof 与 TypeScript 类型

typeof在 javascript 对象上调用时的行为与在 typescript 类型上调用时的行为不同。

TypeScript 在运行时对 javascript 值调用时使用javascript 的 typeof并返回其中之一"undefined", "object", "boolean", "number", "bigint", "string", "symbol", "function"
TypeScript 的 typeof在类型值上调用，但在类型表达式中也可以在 javascript 值上调用。它还可以推断 javascript 对象的类型，返回更详细的对象类型。

type Language = ‘EN’ | ‘ES’;
const userLanguage: Language = ‘EN’;
const preferences = { language: userLanguage, theme: ‘light’ };

console.log(typeof preferences); // “object”
type Preferences = typeof preferences; // type ‘{language: ‘EN’‘; theme: string; }’

因为第二个typeof preferences是在类型表达式中，所以它实际上是 TypeScript 自己的typeof，而不是
javascript 的。

类型的键

因为keyof是一个 TypeScript 概念，我们将调用 TypeScript 的typeof.

keyof typeof将推断 javascript
对象的类型并返回一个类型，该类型是其键的并集。因为它可以推断出键的确切值，所以它可以返回其文字类型的联合，而不仅仅是返回“字符串”。

type PreferenceKeys = keyof typeof preferences; // type '"language" | "theme"'

2022-06-28