# Harnessing The Power Of The keyof Operator

> See how we can use the TypeScript operator keyof to dig into our types.

- Canonical: https://dennisokeeffe.com/blog/2023-06-21-harnessing-the-power-of-the-keyof-operator
- Published: 2023-06-21
- Updated: 2023-06-21
- Tags: typescript

This post will is 7 of 20 for my [series on intermediate-to-advance TypeScript tips](https://blog.dennisokeeffe.com/blog/series/20-days-of-type-script).

All tips can be run on the [TypeScript Playground](https://www.typescriptlang.org/play).

## 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](https://www.typescriptlang.org/docs/handbook/2/keyof-types.html).

## Practical Example 1: Basic Usage of keyof

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

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

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

```typescript
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:

```typescript
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:

```typescript
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](https://www.typescriptlang.org/play?#code/C4TwDgpgBACg9gSwHbCgXigbygDwFxRICuAtgEYQBOA3FCAceVVAL7UBQoks6UA1hBBwAZrEQpaAekk8EAZ0JwA7lABEOVVAA+akKvadw0AIKVKAQxDyAFr2wBtJA1IVKAXQJEkfJMqSsOLhNeASFRUwsrOWspGWMoeUUVRlcDIKgAWXMwGzsoez4COWBKZABzDygyODgAGwhzfzZDbgyQwRFM7JtYzISFXxVi0qQy7UIXKiA).

## References

- [TypeScript Documentation: Keyof Type Operator](https://www.typescriptlang.org/docs/handbook/2/keyof-types.html)
- [Snippets on the TypeScript playground](https://www.typescriptlang.org/play?#code/C4TwDgpgBACg9gSwHbCgXigbygDwFxRICuAtgEYQBOA3FCAceVVAL7UBQoks6UA1hBBwAZrEQpaAekk8EAZ0JwA7lABEOVVAA+akKvadw0AIKVKAQxDyAFr2wBtJA1IVKAXQJEkfJMqSsOLhNeASFRUwsrOWspGWMoeUUVRlcDIKgAWXMwGzsoez4COWBKZABzDygyODgAGwhzfzZDbgyQwRFM7JtYzISFXxVi0qQy7UIXKiA)

_Photo credit: [`jannerboy62`](https://unsplash.com/@jannerboy62)_