5.6 — keyof and Generics

Now let's explore more sophisticated uses of keyof that you'll encounter in real TypeScript codebases. These patterns form the foundation of many utility types and advanced type-level programming techniques.

Pattern 1: Filtering properties by type. What if you want to extract only the properties whose values are strings? Combine keyof with mapped types and conditional types:

// Extract only string-valued props
type StringProps<T> = {
  [K in keyof T as
    T[K] extends string
      ? K : never
  ]: T[K];
};

type User = {
  name: string;
  age: number;
  email: string;
  active: boolean;
};
type UserStrings =
  StringProps<User>;
// { name: string; email: string }

The as clause in the mapped type acts as a filter — when T[K] extends string, the key is kept; otherwise it's replaced with never, which removes it from the final type. We'll dive deeper into mapped types in Stage 7.

Pattern 2: Extracting required keys. You can identify which keys of a type are required (not optional) using a clever conditional check:

type RequiredKeys<T> = {
  [K in keyof T]-?:
    {} extends Pick<T, K>
      ? never : K
}[keyof T];

type Config = {
  host: string;
  port?: number;
  debug?: boolean;
};
type Req = RequiredKeys<Config>;
// "host"

The trick: {} extends Pick<T, K> is true only when the property is optional — an empty object can satisfy an optional property. If it's required, the condition fails and we get the key name instead of never.

Pattern 3: The Object.keys gotcha. At runtime, Object.keys(obj) returns the actual keys of an object. But TypeScript types it as string[], not (keyof T)[]. This is a deliberate design decision — TypeScript cannot guarantee that the runtime object has exactly the keys its type declares. To safely iterate with typed keys:

const obj = { a: 1, b: 2, c: 3 };

Object.keys(obj);
// Type: string[]
// Not ("a"|"b"|"c")[] !

// Safe cast — use with caution!
const keys =
  Object.keys(obj) as (
    keyof typeof obj
  )[];

keys.forEach(k => {
  // k is "a" | "b" | "c"
  console.log(obj[k]);
});

Pattern 4: keyof with classes. You can use keyof to create type-safe class methods that access properties by name:

class Store<T> {
  private data: T;

  constructor(data: T) {
    this.data = data;
  }

  get(key: keyof T): T[keyof T] {
    return this.data[key];
  }
}

const s = new Store({
  x: "chai",
  y: 42,
});
s.get("x"); // string | number

Note that without a second generic for the key, get returns T[keyof T] — the union of all value types. For precise returns, add K extends keyof T to the method signature.

Pattern 5: keyof as the foundation of utility types. All the built-in utility types you use daily — Partial<T>, Required<T>, Readonly<T>, Pick<T, K>, Omit<T, K> — are built on keyof and mapped types. For example, Partial<T> is essentially { [K in keyof T]?: T[K] } and Pick<T, K extends keyof T> is { [P in K]: T[P] }. Understanding keyof means understanding how these utilities work under the hood. We'll build our own utility types from scratch in Stage 7!