TypeScript — Keyof Type Operator: Explained with Examples

Introduction – What Is the keyof Operator in TypeScript?

The keyof operator in TypeScript is a powerful tool for extracting the keys of a type as a union of string (or numeric) literal types. This allows you to build more dynamic, type-safe applications by referencing property names programmatically.

In this guide, you’ll learn:

• How the keyof operator works
• Syntax and output patterns
• Use cases with objects, generics, and mapped types
• Real-world examples to deepen your understanding

What Is the keyof Type Operator?

The keyof operator takes an object type and returns a union of its property names as string or number literal types.

Basic Syntax

type Keys = keyof ObjectType;

Example

type Point = { x: number; y: number };
type P = keyof Point; // "x" | "y"

• keyof Point extracts 'x' and 'y' as a union of string literal types.

How Does keyof Work with Index Signatures?

If your object has an index signature, keyof behaves differently.

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

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

Why string | number?
In JavaScript, all object keys are coerced to strings, so even obj[0] is treated as obj["0"].

Practical Use in Generic Functions

You can use keyof to enforce type-safe key access in objects:

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

const user = { name: "Alice", age: 30 };
const userName = getProperty(user, "name"); //  OK
const invalid = getProperty(user, "email"); //  Error

• Ensures key is one of the valid keys of T, avoiding typos and runtime errors.

Combining keyof with Mapped Types

Mapped types often rely on keyof to iterate through object keys.

Example: Optional Properties

type Person = {
  name: string;
  age: number;
};

type OptionalPerson = {
  [K in keyof Person]?: Person[K];
};
// Equivalent to: { name?: string; age?: number; }

Example: Readonly

type ReadonlyPerson = {
  readonly [K in keyof Person]: Person[K];
};

These constructs help dynamically transform types based on their structure.

keyof in Real-World Use

Consider a deeply nested API response:

type APIResponse = {
  user: {
    id: string;
    profile: {
      email: string;
      name: string;
    }
  }
};

type UserKeys = keyof APIResponse['user']; // "id" | "profile"
type ProfileKeys = keyof APIResponse['user']['profile']; // "email" | "name"

This usage ensures your access patterns remain strongly typed, even with nested structures.

keyof with Template Literals and Remapping

Using TypeScript 4.1+, you can even remap keys during iteration:

type Getter<T> = {
  [K in keyof T as `get${Capitalize<string & K>}`]: () => T[K];
};

type Car = { brand: string; speed: number };
type CarGetters = Getter<Car>;
// Result: { getBrand: () => string; getSpeed: () => number }

This opens the door to highly dynamic and reusable utility types.

Summary – Recap & Next Steps

The keyof operator unlocks the ability to dynamically reference and manipulate keys in TypeScript types.

Key Takeaways:

• keyof returns a union of an object’s property names.
• Works great with generics, index signatures, and mapped types.
• Enables type-safe property access and dynamic type transformations.

Real-world relevance:
Use keyof in utility types, form validation schemas, dynamic table headers, and API models to enforce type safety and reduce bugs.

FAQs

What does keyof return?

A union of the keys of an object type as string or number literal types.

type Person = { name: string; age: number };
type P = keyof Person; // "name" | "age"

Can keyof be used with nested types?

Yes. You can chain key access with keyof and bracket notation.

type FriendKeys = keyof APIResponse['user']['profile']; // "email" | "name"

Does keyof include symbol keys?

By default, keyof includes string | number | symbol, but you can limit it using keyofStringsOnly in tsconfig.json.

How is keyof different from typeof?

• typeof is used to get the type of a value
• keyof is used to get the keys of a type

const user = { id: 1, name: "Alice" };
type UserKeys = keyof typeof user; // "id" | "name"

Can keyof be used with arrays?

Yes, especially with index signatures:

type Arrayish = { [n: number]: string };
type Keys = keyof Arrayish; // number