This post will is 7 of 20 for my series on intermediate-to-advance TypeScript tips.

All tips can be run on the TypeScript Playground.

In TypeScript, the keyof operator is a powerful tool that can be used to extract the keys of a given type. The operator takes an object type and produces a string or numeric literal union of its keys. This feature becomes especially useful when combined with mapped types. For a more detailed explanation, you can refer to the official TypeScript documentation here.

Let's start with a simple example. Suppose we have a Point type defined as follows:

type Point = { x: number; y: number };
copy

We can use the keyof operator to get the keys of the Point type:

type P = keyof Point; // P is now "x" | "y"
copy

In this case, P is a type that represents either "x" or "y", which are the keys of the Point type.

The keyof operator also works with index signatures. Consider the following example:

type Arrayish = { [n: number]: unknown };
type A = keyof Arrayish; // A is now number
copy

Here, A is a type that represents a number, which corresponds to the numeric index signature of the Arrayish type.

When the type has a string index signature, keyof will return a union of string and number. This is because JavaScript object keys are always coerced to a string. Here's an example:

type Mapish = { [k: string]: boolean };
type M = keyof Mapish; // M is now string | number
copy

In this case, M is a type that represents either a string or a number, which corresponds to the string index signature of the Mapish type.

The keyof operator in TypeScript is a powerful tool that allows us to extract the keys of a given type. It works with both regular object types and types with index signatures. By understanding and harnessing the power of the keyof operator, we can write more flexible and robust TypeScript code.

All code snippets above are available here on the TypeScript playground.

Photo credit: jannerboy62