Step‑by‑step breakdown
1const colors = { red: '#ff0000', green: '#00ff00' };
2// ^^^^^ this is a value, not a type
3
4// 1. typeof colors (in type position) = the type of that value
5type ColorsType = typeof colors;
6// same as: { red: string; green: string }
7
8// 2. keyof ColorsType = union of its keys
9type Keys = keyof ColorsType; // "red" | "green"
10
11// 3. Combine: keyof typeof colors
12type ColorKeys = keyof typeof colors; // "red" | "green"
1const colors = { red: '#ff0000', green: '#00ff00' };
2// ^^^^^ this is a value, not a type
3
4// 1. typeof colors (in type position) = the type of that value
5type ColorsType = typeof colors;
6// same as: { red: string; green: string }
7
8// 2. keyof ColorsType = union of its keys
9type Keys = keyof ColorsType; // "red" | "green"
10
11// 3. Combine: keyof typeof colors
12type ColorKeys = keyof typeof colors; // "red" | "green"
Common use cases
1. Getting the keys of an object constant
typescript
1const routes = {
2 home: '/',
3 about: '/about',
4 contact: '/contact'
5} as const;
6
7type Route = keyof typeof routes; // "home" | "about" | "contact"
1const routes = {
2 home: '/',
3 about: '/about',
4 contact: '/contact'
5} as const;
6
7type Route = keyof typeof routes; // "home" | "about" | "contact"
2. Restricting a variable to valid object keys
typescript
1function getColor(key: keyof typeof colors) {
2 return colors[key];
3}
4getColor('red'); // ok
5getColor('blue'); // error
1function getColor(key: keyof typeof colors) {
2 return colors[key];
3}
4getColor('red'); // ok
5getColor('blue'); // error
3. When you don't need typeof – if you already have a type:
typescript
1interface User {
2 id: number;
3 name: string;
4}
5type UserKeys = keyof User; // "id" | "name" (no typeof needed)
1interface User {
2 id: number;
3 name: string;
4}
5type UserKeys = keyof User; // "id" | "name" (no typeof needed)
Common mistakes
❌ keyof colors – colors is a value, but keyof expects a type.
✅ keyof typeof colors
❌ typeof colors alone gives the shape, not the keys.
✅ Add keyof to get the keys.
Pro tip: as const with keyof typeof
typescript
1const sizes = ['small', 'medium', 'large'] as const;
2type Size = typeof sizes[number]; // "small" | "medium" | "large"
3// not keyof – arrays have numeric indices
1const sizes = ['small', 'medium', 'large'] as const;
2type Size = typeof sizes[number]; // "small" | "medium" | "large"
3// not keyof – arrays have numeric indices
✅ Remember: typeof turns a value into a type; keyof turns a type into a union of its keys. Use them together when starting from a value.
