To comprehend the utilization of keyof typeof in TypeScript, it is crucial to grasp the concept of literal types and union of literal types first. Let's delve into these concepts before delving into a detailed explanation of keyof and typeof. Subsequently, we will revisit enum to address the question at hand. Although lengthy, the examples provided are straightforward for better understanding.

---

Literal Types

In TypeScript, literal types are more specific variations of string, number, or boolean. For instance, while "Hello World" is a string, a generic string does not equate to "Hello World". Hence, "Hello World" qualifies as a type of its own within the string category—a literal type.

A declaration of a literal type looks like this:

type Greeting = "Hello"

This signifies that an object of type Greeting can exclusively hold the value "Hello", rejecting any other string value or values of different types, as demonstrated below:

let greeting: Greeting
greeting = "Hello" // Works fine
greeting = "Hi"    // Error: Type '"Hi"' cannot be assigned to type '"Hello"'

While standalone, literal types may seem limited, their potency amplifies when merged with union types, type aliases, and type guards.

Below is an illustration of a union of literal types:

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

Consequently, an object of type Greeting embodies either "Hello", "Hi", or "Welcome".

let greeting: Greeting
greeting = "Hello"       // Fine
greeting = "Hi"          // Fine
greeting = "Welcome"     // Fine
greeting = "GoodEvening" // Error: Type '"GoodEvening"' cannot be assigned to 'Greeting'

---

keyof Only

The keyof operator on a type T produces a fresh type comprising a union of literal types, represented by the property names within T. This resultant type is a subset of string.

Consider the subsequent interface:

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

Employing the keyof operator on the type

Person</code} yields the ensuing type:</p>
<pre><code>type SomeNewType = keyof Person

This newly formed SomeNewType encapsulates a union of literal types (

"name" | "age" | "location"

) extracted from the properties of Person.

Objects conforming to

SomeNewType</code} can now be initiated:</p>
<pre><code>let newTypeObject: SomeNewType
newTypeObject = "name"           // Enforced
newTypeObject = "age"            // Enforced
newTypeObject = "location"       // Enforced
newTypeObject = "anyOtherValue"  // Rejected...

---

keyof typeof Cohesion within an Object

The typeof operator retrieves the type of an object. In the aforementioned example featuring the Person interface, knowing the type permitted us to employ the keyof operator on Person.

However, situations arise where an object's type is unknown or only a value is available without the corresponding type, exemplified here:

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

This scenario necessitates the united application of keyof typeof.

typeof bmw identifies the type: { name: string, power: string }

Subsequently, employing the keyof operator engenders a union of literal types, depicted in the ensuing code snippet:

type CarLiteralType = keyof typeof bmw

let carPropertyLiteral: CarLiteralType
carPropertyLiteral = "name"       // Permissible
carPropertyLiteral = "power"      // Permissible
carPropertyLiteral = "anyOther"   // Rejected...

---

keyof typeof Utilization on an enum

Within TypeScript, enums primarily serve as compile-time types to reinforce constant type integrity. Post compilation from TypeScript to JavaScript, they become basic objects. Consequently, similar principles apply to enum objects. The following excerpt mirrors the OP's query:

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

Given that ColorsEnum exists as a runtime object rather than merely a type, combining keyof typeof is indispensable:

type Colors = keyof typeof ColorsEnum

let colorLiteral: Colors
colorLiteral = "white"  // Valid
colorLiteral = "black"  // Valid
colorLiteral = "red"    // Rejected...

The use of an enum results in the creation of a tangible entity. By employing typeof, we are able to access the automatically assigned type of this particular enum.

Subsequently, through utilizing keyof, all potential indices can be obtained in order to restrict Colors to only one valid option.

The truth about TypeScript

Many people think of TypeScript as simply a layer of types on top of JavaScript, separate from the actual values. However, in reality, some things in TypeScript are both types and values at the same time.

Specifically, this applies to:

• classes,
• enums,
• namespaces.

When is it appropriate to use keyof?

The keyof keyword is designed to be used at the type level only. It cannot be applied to a JavaScript value directly.

When do you require keyof typeof?

If you are working with something that acts as both a type and a value simultaneously (such as a class or an enum), but you specifically want to focus on the type aspect of that value.

For example:

const foo = { bar: 42 };
type Foo = typeof foo;

type KeyOfFoo = keyof Foo; // "keyof Foo" equals "keyof typeof foo", which results in "bar"

In essence, when you encounter this:

type A = keyof typeof B;

The typeof B segment instructs TypeScript to consider the type of B. This can be likened to converting B into its type representation—a bit like transforming a two-dimensional object into a one-dimensional form.

Due to the fact that typeof B represents a type rather than a value, we can now utilize keyof on it.

An Illustrative Example

Classes in TypeScript possess characteristics of both types and values. You can instantiate them, but also apply keyof to them.

declare class Foo {
    static staticProperty: string;

    dynamicProperty: string;
}

type Constructor = typeof Foo;
type Instance = Foo;

type A = keyof Constructor; // "prototype" | "staticProperty"
type B = keyof Instance; // "dynamicProperty"

Through the combination of typeof and keyof, we have the ability to switch between utilizing keyof against the instance type or the constructor type.

To determine the data type of a value, we can utilize the typeof operator. For example:

const person = {
   getDetails(){},
   getLocation(){}
}

In this case, 'person' is considered a value, hence the typeof operator is useful.

type personType = typeof person

The personType provides information that 'person' is an object with two properties - getDetails and getLocation, both functions returning void.

If you wish to identify the keys of 'person', you can use keyof:

type personKeys = keyof personType

This indicates that personKeys= 'getDetails'| 'getLocation'

It's important to note that attempting to access 'person''s keys directly using type personKeys = keyof person will result in an error message: 'person' refers to a value, but is being used as a type here. Did you mean 'typeof person'?