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

Question

向我解释 keyof typeof 在 TypeScript 中的含义

例子：

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

type Colors = keyof typeof ColorsEnum;

最后一行相当于：

 type Colors = "white" | "black"

但它是如何工作的？

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

原文由 user1283776 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 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 在运行时对 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"'

原文由 James EJ 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

为了找到任何值的类型，我们使用 typeof 操作。例如

const user = {
   getPersonalInfo(){},
   getLocation(){}
}

这里 user 是一个值，所以这里 typeof 运算符会派上用场

type userType = typeof user

这里 userType 给出了用户是一个对象的类型信息，它有两个属性 getPersonalInfo 和 getLocation 并且都是函数 return void

现在，如果您想查找用户的密钥，可以使用 keyof

 type userKeys = keyof userType

其中说 userKeys= ‘getPersonalInfo’| ‘获取位置’

请注意，如果您尝试获取用户的密钥，例如 type userKeys = keyof user 您将收到错误 “用户”引用一个值，但在此处用作类型。您的意思是“typeof 用户”吗？

原文由 Akash Singh 发布，翻译遵循 CC BY-SA 4.0 许可协议