In this article, we are going to learn about the Keyof Type Operator which is available in Typescript. 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;
Here, ObjectType is the type of object whose keys that you want to extract, and KeysOfType is the resulting type that is a union of all the keys in ObjectType.
How to use 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;
Example 1: Accessing object properties using the Keyof Type Operator: 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. Next, we define 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 simply return the value of obj[key]. Finally, we test the getProperty function by calling it with the person object and various keys such as “name”, “age”, and, “gender”. All three calls are successful as we can see in the output.
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:
Example 2: Using Keyof Type Operator with mapped types: In this example, we have defined an interface Person with three properties: name, age, and gender. Next, we have defined a mapped type ReadonlyPerson that uses the keyof operator to create a read-only version of the Person interface. 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.
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:
