Using ‘Keyof’ Type Operator in TypeScript

Overview

TypeScript’s ‘keyof’ type operator provides a way to use the keys of an object as a type. It allows developers to create more robust and flexible code by ensuring that the string they use is actually a key on a specific object.

What is ‘keyof’ and How to Use It?

In TypeScript, keyof is a type operator that takes an object type and produces a string or numeric literal union of its keys. This is particularly handy when we want to make sure the string we are working with is a guaranteed property of an object.

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

let personProp: keyof Person; // 'name' | 'age'

personProp = 'name'; // OK
personProp = 'age'; // OK
personProp = 'height'; // Error: Type '"height"' is not assignable to type '"name" | "age"'.

Using ‘keyof’ with Generics

The true power of keyof is revealed when used with generics. Here’s how you can enforce function parameters to be a property of a given object:

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

const person = {
    name: 'Alice',
    age: 25
};

const personName = getProperty(person, 'name'); // OK
const personAge = getProperty(person, 'age'); // OK
const personHeight = getProperty(person, 'height'); // Error: Argument of type '"height"' is not assignable to parameter of type '"name" | "age"'.

Dynamically Creating Object Types with ‘keyof’

Another advanced usage of keyof is dynamically creating object types based on existing object keys.

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

type ReadonlyPerson = {
    [K in keyof Person]: Readonly<Person[K]>;
};

const person: ReadonlyPerson = {
    name: 'Bob',
    age: 30,
    location: 'New York'
};

// All properties of person are now readonly, thus the following will raise an error
person.age = 31; // Error: Cannot assign to 'age' because it is a read-only property.

Combining ‘keyof’ with Mapped Types and Conditional Types

keyof becomes even more powerful when combined with mapped and conditional types. Suppose you want to have a function that returns object values but only for keys that correspond to string properties.

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

function getStringProperties(obj: T) {
    const result: {[K in keyof T]: T[K] extends string ? T[K] : never} = {};
    for (const key in obj) {
        if (typeof obj[key] === 'string') {
            result[key] = obj[key];
        }
    }
    return result;
}

const person = {
    name: 'Eve',
    age: 28,
    location: 'London'
};

const stringPropsOfPerson = getStringProperties(person);
// { name: 'Eve'; location: 'London'; age: never }

Summary

The keyof type operator is an essential feature in TypeScript’s type system. It enables developers to create self-contained, type-safe code that can adapt dynamically to changes in data structures. With the proper understanding and judicious use, leveraging keyof will certainly level up your TypeScript programming skills.