keyof typeof Object
Tags: typescript, javascript, tutorial, beginners
Published: 2023-06-10 15:19:54

## Introduction
I'm going to talk about keyof typeof in typescript and how it could be helpful. I will start explaining typeof and key separate and in which case you might want to use it.

## Literal types
Literal types in TypeScript are more specific types of string, number or boolean. Let's elaborate with an example, "Hey" is a **string**, but a **string** is not "Hey". "Hey" is a more specific type of type string, so it is a literal type.

A literal type can be declared as following:

```javascript
type Saludo = "Hey"
```
 
This means that the object of type **Saludo** can have only a **string** value **"Hey"** and no other **string** value or any other value of any other type as shown in the following code:

```javascript
let saludo: Saludo
saludo = "Hey" //Ok
saludo = "hi" // Error: Type "hi" is not assignable to type "Hey"
```

Literal types are not useful on their own, however when combined with union types, type aliases and type guards they become powerful.

Following is an example of union of literal types:

```javascript
type Saludo = "Hey" | "Hi" | "Welcome"
```

Now the object of type **Saludo** can have the value either **"Hey"**, **"Hi"** or **"Welcome"**.

```javascript
let saludo: Saludo
saludo = "Hey" //Ok
saludo = "Hi" //Ok
saludo = "Welcome" //Ok
saludo = "Good" //Error: type "Good" is not assignable to type Saludo
```

## keyof
**keyof** of some type **T** gives you a new type that is a union of literal types and these literal types are the names of the properties of **T**. The resulting type is a subtype of string.

For example, consider the following **interface**:

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

Using the **keyof** operator on the type **Person** will give you a new type as shown in the following code:

```javascript
type SomeNewType = keyof Person
```

This **SomeNewType** is a union of literal types ("name" | "age" | "location") that is made from the properties of type **Person**.

Now you can create objects of type **SomeNewType**:

```javascript
let newTypeObject: SomeNewType
newTypeObject = "name" //ok
newTypeObject = "age" //ok
newTypeObject = "location" //ok
newTypeObject = "other" //Error..

```

## keyof typeof together on an object
The **typeof** operator gives you the type of an object. In the above example of **Person** interface, we already knew the type, so we just had to use the **keyof** operator on type **Person**.

But what to do when we do not know the type of an object or we just have a value and not a type of that value like the following?

```javascript
const bmw = {name: "bmw", power: "100ph"}

```

This is where we use **keyof typeof** together.

The **typeof bmw** gives you the type: **{name: string, power: string}**

Ant then **keyof** operator gives you the literal type union as shown in the following code:

```javascript
type CarLiteralType = keyof typeof bmw;

let carPropertyLiteral: CarLiteralType
carPropertyLiteral = "name" //Ok
carPropertyLiteral = "power" //Ok
carPropertyLiteral = "other" //Error
```

Basically what it means is that if the value is inside of the object we will be able to call the property since the **keyof typeof** give us that advantage.

## Conclusion
I found really interesting this use of keyof type object and I recommend to use it. I will be posting more things about typescript and how to type react components.

Cheers, Lautaro.