向我解释keyof typeofTypeScript 中的含义
keyof typeof
例子:
enum ColorsEnum { white = '#ffffff', black = '#000000', } type Colors = keyof typeof ColorsEnum;
最后一行相当于:
type Colors = "white" | "black"
但它是如何工作的?
我希望typeof ColorsEnum返回类似的东西"Object",然后keyof "Object"不做任何有趣的事情。但我显然错了。
typeof ColorsEnum
"Object"
keyof "Object"
keyof接受一个对象类型并返回一个接受任何对象键的类型。
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在 javascript 对象上调用时的行为与在 typescript 类型上调用时的行为不同。
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 的。
typeof preferences
因为keyof是一个 TypeScript 概念,我们将调用 TypeScript 的typeof.
keyof typeof将推断 javascript 对象的类型并返回一个类型,该类型是其键的并集。因为它可以推断出键的确切值,所以它可以返回其文字类型的联合,而不仅仅是返回“字符串”。
type PreferenceKeys = keyof typeof preferences; // type '"language" | "theme"'