typescript - “keyof typeof”在TypeScript中是什么意思？

例:

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

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

type Colors = keyof typeof ColorsEnum;

最后一行等效于:

type Colors = "white" | "black"

但是它是如何工作的呢？

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

最佳答案

要了解Typescript中keyof typeof的用法，首先需要了解什么是文字类型的文字类型和联合。因此，我将首先解释这些概念，然后分别详细解释keyof和typeof。之后，我将返回enum回答问题中的要求。答案很长，但是示例很容易理解。

文字类型
Typescript中的文字类型是string，number或boolean的更特定类型。例如，"Hello World"是string，但string不是"Hello World"。 "Hello World"是string类型的更具体的类型，因此它是文字类型。
文字类型可以声明如下:

type Greeting = "Hello"

这意味着Greeting类型的对象只能具有string值"Hello"，而不能具有其他字符串值或任何其他类型的其他值，如以下代码所示:

let greeting: Greeting
greeting = "Hello" // OK
greeting = "Hi"    // Error: Type '"Hi"' is not assignable to type '"Hello"'

文字类型本身并不是有用的，但是当与联合类型，类型别名和类型保护结合使用时，它们将变得强大。
以下是文字类型的并集的示例:

type Greeting = "Hello" | "Hi" | "Welcome"

现在，类型Greeting的对象可以具有值"Hello"，"Hi"或"Welcome"。

let greeting: Greeting
greeting = "Hello"       // OK
greeting = "Hi"          // OK
greeting = "Welcome"     // OK
greeting = "GoodEvening" // Error: Type '"GoodEvening"' is not assignable to type 'Greeting'

仅keyof 某种类型的keyof T为您提供了一个新类型，它是文字类型的联合，这些文字类型是T属性的名称。结果类型是字符串的子类型。
例如，考虑以下interface:

interface Person {
    name: string
    age: number
    location: string
}

在keyof类型上使用Person运算符将为您提供一个新类型，如以下代码所示:

type SomeNewType = keyof Person

此SomeNewType是由类型"name" | "age" | "location"的属性组成的文字类型(Person)的并集。
现在，您可以创建SomeNewType类型的对象:

let newTypeObject: SomeNewType
newTypeObject = "name"           // OK
newTypeObject = "age"            // OK
newTypeObject = "location"       // OK
newTypeObject = "anyOtherValue"  // Error...

keyof typeof一起放在一个对象上
您可能已经知道，typeof运算符为您提供对象的类型。
在上面的Person接口(interface)示例中，我们已经知道类型，因此，我们只需要在keyof类型上使用Person运算符即可。
但是，当我们不知道对象的类型或者只有一个值而不是像下面这样的值的类型时该怎么办？

const bmw = { name: "BMW", power: "1000hp" }

这是我们一起使用keyof typeof的地方。typeof bmw为您提供类型:{ name: string, power: string }然后keyof运算符为您提供文字类型的并集，如以下代码所示:

type CarLiteralType = keyof typeof bmw

let carPropertyLiteral: CarLiteralType
carPropertyLiteral = "name"       // OK
carPropertyLiteral = "power"      // OK
carPropertyLiteral = "anyOther"   // Error...

keyof typeof上的enum在 typescript 中，枚举是真实的对象。因此，以上对象的说明也适用于此。 OP在问题中给出的示例是:

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

这里ColorsEnum是一个对象，而不是类型。因此，我们需要一起调用keyof typeof运算符，如以下代码所示:

type Colors = keyof typeof ColorsEnum

let colorLiteral: Colors
colorLiteral = "white"  // OK
colorLiteral = "black"  // OK
colorLiteral = "red"    // Error...

而已!希望能有所帮助。