Typescript Keyof Type Operator

In TypeScript, the keyof operator is used to extract the keys of a type as a union type. It is a type operator that allows you to access the keys of an object type or an interface.

We can use it to define generic functions that work with any object type, without knowing the specific keys of that type. It can also be used to create read-only versions of an interface or to extract specific keys from an interface.

Syntax

type KeysOfType = keyof ObjectType;

How to use the Keyof Type Operator?

We have defined an interface “Person” with three different properties: name, age, and gender. We then define a type PersonKeys that is equal to keyof Person, which is a union type of “name” | “age” | “gender”.

interface Person {
      name: string;
      age: number;
      gender: string;
}
type PersonKeys = keyof Person;

Examples Showing Keyof Type Operator

Let’s look at some examples of Keyof type operator in TypeScript. These examples will help you understand the working of Keyof type operator.

1. Accessing object properties:

Example: In this example, we define an interface Person with three properties: name, age, and gender. We also define a variable person of type Person with some values.

Javascript

interface Person {
    name: string;
    age: number;
    gender: string;
}

const person: Person = {
    name: "John",
    age: 25,
    gender: "male",
};

function getProperty<T, K extends keyof T>(obj: T, key: K) {
    return obj[key];
}

console.log(getProperty(person, "name")); // "John"
console.log(getProperty(person, "age")); // 25
console.log(getProperty(person, "gender")); // "male"

Output: 

Accessing object properties using the Keyof Type Operator

Explanation:

We have defined a function getProperty that takes an object obj of type T and a key of type K, where K extends keyof T. It means that key must be one of the keys of the object obj. Inside the getProperty function, we have simply returned the value of obj[key].

2. Using mapped Type:

Example: In this example, we have defined an interface Person with three properties: name, age, and gender.

Javascript

interface Person {
    name: string;
    age: number;
    gender: string;
}

type ReadonlyPerson = {
    readonly [K in keyof Person]: Person[K];
}

const person: ReadonlyPerson = {
    name: "John",
    age: 25,
    gender: "male",
};

console.log(person.name); // "John"
console.log(person.age); // 25
console.log(person.gender); // "male"

Output:

Using Keyof Type Operator with mapped types

Explanation:

The syntax [K in keyof Person] means that for each key K in the Person interface, we have created a new property with the same key K and the same value type Person[K], but with the read-only modifier. We have then defined a variable person of type ReadonlyPerson with some values. Since a person is of type ReadonlyPerson, we cannot modify its properties.