Back to home

Harnessing The Power Of The keyof Operator

Published: Jun 21, 2023

Last updated: Jun 21, 2023

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.

Introduction

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.

Practical Example 1: Basic Usage of keyof

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

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

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

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

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

Practical Example 2: keyof with Index Signatures

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

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

Practical Example 3: keyof with String Index Signatures

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

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.

Summary

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.

References

Photo credit: jannerboy62

Personal image

Dennis O'Keeffe

@dennisokeeffe92
  • Melbourne, Australia

Hi, I am a professional Software Engineer. Formerly of Culture Amp, UsabilityHub, Present Company and NightGuru.
I am currently working on Visibuild.

1,200+ PEOPLE ALREADY JOINED ❤️️

Get fresh posts + news direct to your inbox.

No spam. We only send you relevant content.

Harnessing The Power Of The keyof Operator

Introduction

Share this post