The keyof & typeof Type Operators

Type Inference & Literal Types (const vs. let)

Discover how TypeScript infers types automatically and how let versus const declarations shape wide types versus narrow literal types.

1. Querying Runtime Code in Type Space

TypeScript provides two key operators to bridge the gap between runtime JavaScript values and compile-time types: typeof and keyof.

2. The typeof Operator (in Type Space)

In type space, typeof queries the static TypeScript type of a runtime JavaScript variable or object:

const appConfig = {
  apiEndpoint: "https://api.devloom.dev",
  timeout: 5000,
  maxRetries: 3,
};

// Extract type shape directly from the runtime variable!
type AppConfig = typeof appConfig;
/*
Inferred as:
type AppConfig = {
  apiEndpoint: string;
  timeout: number;
  maxRetries: number;
};
*/

3. The keyof Operator

The keyof operator takes an object type and produces a string or numeric union of its property keys:

type User = {
  id: number;
  name: string;
  email: string;
};

type UserKeys = keyof User; // Inferred as: "id" | "name" | "email"

const key: UserKeys = "name"; // Valid!
// const badKey: UserKeys = "age"; // Error: Type '"age"' is not assignable

4. Combining keyof typeof

Extract property keys directly from a runtime JavaScript object:

const COLORS = {
  primary: "#3178C6",
  secondary: "#F7DF1E",
  accent: "#FF4081",
} as const;

type ColorKey = keyof typeof COLORS; // "primary" | "secondary" | "accent"

5. Common Mistakes

• Confusing Runtime typeof with Type-Space typeof: Runtime typeof x === "string" evaluates a string at runtime. Type-space type T = typeof x queries static compile-time type shapes!

6. Next Steps

Use keyof typeof for type-safe dictionary lookups. Next, let's explore Conditional Types and the infer keyword!