TypeScript keyof and typeof Guide

The keyof and typeof operators are fundamental tools for building dynamic, type-safe code in TypeScript.

typeof Operator#

// typeof extracts type from a value
const user = {
  name: 'John',
  age: 30,
  active: true
};

type User = typeof user;
// { name: string; age: number; active: boolean }

// Works with any value
const PI = 3.14159;
type PIType = typeof PI;  // number

// Const assertion gives literal types
const config = {
  host: 'localhost',
  port: 3000
} as const;

type Config = typeof config;
// { readonly host: 'localhost'; readonly port: 3000 }

// Function types
function greet(name: string): string {
  return `Hello, ${name}`;
}

type GreetFn = typeof greet;
// (name: string) => string

keyof Operator#

// keyof extracts keys as a union type
interface User {
  id: number;
  name: string;
  email: string;
}

type UserKeys = keyof User;
// 'id' | 'name' | 'email'

// Works with any object type
type ObjectKeys = keyof { a: 1; b: 2; c: 3 };
// 'a' | 'b' | 'c'

// Array/tuple
type ArrayKeys = keyof string[];
// number | 'length' | 'push' | 'pop' | ... (array methods)

type TupleKeys = keyof [string, number];
// number | '0' | '1' | 'length' | ...

// Index signatures
type StringMap = { [key: string]: unknown };
type StringMapKeys = keyof StringMap;
// string | number (number keys coerce to string)

type NumberMap = { [key: number]: unknown };
type NumberMapKeys = keyof NumberMap;
// number

Combining keyof and typeof#

// Get keys from a value's type
const themes = {
  light: { bg: '#fff', text: '#000' },
  dark: { bg: '#000', text: '#fff' },
  blue: { bg: '#00f', text: '#fff' }
};

type ThemeNames = keyof typeof themes;
// 'light' | 'dark' | 'blue'

// Type-safe theme selector
function getTheme(name: keyof typeof themes) {
  return themes[name];
}

getTheme('light');  // OK
// getTheme('green');  // Error

// Enum-like object
const Status = {
  Pending: 0,
  Active: 1,
  Completed: 2
} as const;

type StatusKeys = keyof typeof Status;
// 'Pending' | 'Active' | 'Completed'

type StatusValues = typeof Status[StatusKeys];
// 0 | 1 | 2

Generic Constraints#

// Constrain generic to object keys
function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {
  return obj[key];
}

const user = { name: 'John', age: 30 };

getProperty(user, 'name');  // string
getProperty(user, 'age');   // number
// getProperty(user, 'email');  // Error: 'email' not in keyof user

// Multiple key access
function pick<T, K extends keyof T>(obj: T, keys: K[]): Pick<T, K> {
  const result = {} as Pick<T, K>;
  keys.forEach(key => {
    result[key] = obj[key];
  });
  return result;
}

const picked = pick(user, ['name']);
// { name: string }

Indexed Access Types#

interface User {
  id: number;
  name: string;
  address: {
    street: string;
    city: string;
  };
  tags: string[];
}

// Access property type
type UserId = User['id'];  // number
type UserName = User['name'];  // string

// Nested access
type City = User['address']['city'];  // string

// Array element type
type Tag = User['tags'][number];  // string

// Union of property types
type IdOrName = User['id' | 'name'];  // number | string

// All property types
type AllValues = User[keyof User];
// number | string | { street: string; city: string } | string[]

Mapped Types with keyof#

// Make all properties optional
type Partial<T> = {
  [K in keyof T]?: T[K];
};

// Make all properties required
type Required<T> = {
  [K in keyof T]-?: T[K];
};

// Make all properties readonly
type Readonly<T> = {
  readonly [K in keyof T]: T[K];
};

// Pick specific properties
type Pick<T, K extends keyof T> = {
  [P in K]: T[P];
};

// Custom mapped type
type Nullable<T> = {
  [K in keyof T]: T[K] | null;
};

interface User {
  id: number;
  name: string;
}

type NullableUser = Nullable<User>;
// { id: number | null; name: string | null }

Key Remapping#

// Rename keys with 'as'
type Getters<T> = {
  [K in keyof T as `get${Capitalize<string & K>}`]: () => T[K];
};

interface User {
  name: string;
  age: number;
}

type UserGetters = Getters<User>;
// { getName: () => string; getAge: () => number }

// Filter keys
type OnlyStrings<T> = {
  [K in keyof T as T[K] extends string ? K : never]: T[K];
};

interface Mixed {
  id: number;
  name: string;
  email: string;
  active: boolean;
}

type StringProps = OnlyStrings<Mixed>;
// { name: string; email: string }

// Exclude specific keys
type OmitId<T> = {
  [K in keyof T as K extends 'id' ? never : K]: T[K];
};

Template Literal Types with keyof#

// Event handlers
type EventHandlers<T> = {
  [K in keyof T as `on${Capitalize<string & K>}Change`]: (value: T[K]) => void;
};

interface Form {
  name: string;
  email: string;
  age: number;
}

type FormHandlers = EventHandlers<Form>;
// {
//   onNameChange: (value: string) => void;
//   onEmailChange: (value: string) => void;
//   onAgeChange: (value: number) => void;
// }

// API endpoints
type ApiEndpoints<T> = {
  [K in keyof T as `fetch${Capitalize<string & K>}`]: () => Promise<T[K]>;
} & {
  [K in keyof T as `update${Capitalize<string & K>}`]: (value: T[K]) => Promise<void>;
};

interface Data {
  user: User;
  posts: Post[];
}

type DataApi = ApiEndpoints<Data>;
// {
//   fetchUser: () => Promise<User>;
//   fetchPosts: () => Promise<Post[]>;
//   updateUser: (value: User) => Promise<void>;
//   updatePosts: (value: Post[]) => Promise<void>;
// }

ReturnType and Parameters#

// Get function return type
function createUser(name: string, age: number) {
  return { id: Date.now(), name, age };
}

type UserReturn = ReturnType<typeof createUser>;
// { id: number; name: string; age: number }

// Get parameter types
type UserParams = Parameters<typeof createUser>;
// [name: string, age: number]

type FirstParam = Parameters<typeof createUser>[0];  // string
type SecondParam = Parameters<typeof createUser>[1]; // number

// Constructor parameters
class User {
  constructor(public name: string, public age: number) {}
}

type UserConstructorParams = ConstructorParameters<typeof User>;
// [name: string, age: number]

Real-World Patterns#

// Type-safe object entries
function entries<T extends object>(obj: T): [keyof T, T[keyof T]][] {
  return Object.entries(obj) as [keyof T, T[keyof T]][];
}

// Type-safe object keys
function keys<T extends object>(obj: T): (keyof T)[] {
  return Object.keys(obj) as (keyof T)[];
}

// Type-safe property setter
function setProperty<T, K extends keyof T>(obj: T, key: K, value: T[K]): void {
  obj[key] = value;
}

// Deep readonly
type DeepReadonly<T> = {
  readonly [K in keyof T]: T[K] extends object
    ? DeepReadonly<T[K]>
    : T[K];
};

// Path type for nested access
type Path<T, K extends keyof T = keyof T> = K extends string
  ? T[K] extends object
    ? `${K}.${Path<T[K]>}` | K
    : K
  : never;

interface User {
  name: string;
  address: {
    street: string;
    city: string;
  };
}

type UserPaths = Path<User>;
// 'name' | 'address' | 'address.street' | 'address.city'

Discriminated Unions with keyof#

// Type guard using keyof
interface Circle {
  kind: 'circle';
  radius: number;
}

interface Square {
  kind: 'square';
  size: number;
}

type Shape = Circle | Square;

function isCircle(shape: Shape): shape is Circle {
  return shape.kind === 'circle';
}

// Property existence check
function hasKey<T extends object>(obj: T, key: keyof any): key is keyof T {
  return key in obj;
}

const obj = { a: 1, b: 2 };
const key = 'a' as string;

if (hasKey(obj, key)) {
  console.log(obj[key]);  // Type-safe access
}

Best Practices#

// DO: Use keyof for type-safe property access
function getValue<T, K extends keyof T>(obj: T, key: K): T[K] {
  return obj[key];
}

// DO: Combine with typeof for value-derived types
const config = { port: 3000, host: 'localhost' } as const;
type ConfigKey = keyof typeof config;

// DO: Use mapped types for transformations
type Flags<T> = { [K in keyof T]: boolean };

// DON'T: Use keyof with 'any'
type BadKeys = keyof any;  // string | number | symbol (too broad)

// DON'T: Forget 'as const' for literal types
const routes = ['/', '/about', '/contact'];  // string[]
type Route = typeof routes[number];  // string (not literal union)

const routes2 = ['/', '/about', '/contact'] as const;
type Route2 = typeof routes2[number];  // '/' | '/about' | '/contact'

Summary#

typeof:
✓ Extract type from value
✓ Use with 'as const' for literals
✓ Get function types
✓ Derive types from implementation

keyof:
✓ Get union of object keys
✓ Constrain generic parameters
✓ Build mapped types
✓ Type-safe property access

Combinations:
✓ keyof typeof for value keys
✓ Indexed access T[K]
✓ Mapped types with key remapping
✓ Template literal transformations

The keyof and typeof operators are powerful tools for building type-safe abstractions. Use typeof to derive types from runtime values and keyof to work with object keys as types. Combine them with mapped types, template literals, and indexed access to create sophisticated type transformations that catch errors at compile time while keeping your code DRY.