TypeScript Utility Types Deep Dive

TypeScript provides powerful utility types for common type transformations. Here's a comprehensive guide to using them effectively.

Partial and Required#

interface User {
  id: number;
  name: string;
  email: string;
  age?: number;
}

// Make all properties optional
type PartialUser = Partial<User>;
// { id?: number; name?: string; email?: string; age?: number; }

// Make all properties required
type RequiredUser = Required<User>;
// { id: number; name: string; email: string; age: number; }

// Practical use: update functions
function updateUser(id: number, updates: Partial<User>): User {
  const user = getUser(id);
  return { ...user, ...updates };
}

updateUser(1, { name: 'John' }); // Only update name

Readonly and Mutable#

interface Config {
  apiUrl: string;
  timeout: number;
  retries: number;
}

// Make all properties readonly
type ReadonlyConfig = Readonly<Config>;
// { readonly apiUrl: string; readonly timeout: number; readonly retries: number; }

const config: ReadonlyConfig = {
  apiUrl: 'https://api.example.com',
  timeout: 5000,
  retries: 3,
};

// config.timeout = 10000; // Error: Cannot assign to 'timeout'

// Create mutable version (custom utility)
type Mutable<T> = {
  -readonly [P in keyof T]: T[P];
};

type MutableConfig = Mutable<ReadonlyConfig>;

Pick and Omit#

interface Article {
  id: number;
  title: string;
  content: string;
  author: string;
  createdAt: Date;
  updatedAt: Date;
}

// Pick specific properties
type ArticlePreview = Pick<Article, 'id' | 'title' | 'author'>;
// { id: number; title: string; author: string; }

// Omit specific properties
type ArticleInput = Omit<Article, 'id' | 'createdAt' | 'updatedAt'>;
// { title: string; content: string; author: string; }

// Combine for complex types
type EditableArticle = Omit<Article, 'id' | 'createdAt'> & { id: number };

Record#

// Create object type with specific keys
type Status = 'pending' | 'approved' | 'rejected';
type StatusMessages = Record<Status, string>;

const messages: StatusMessages = {
  pending: 'Awaiting review',
  approved: 'Application approved',
  rejected: 'Application rejected',
};

// Dynamic keys
type UserRoles = Record<string, string[]>;

const roles: UserRoles = {
  admin: ['read', 'write', 'delete'],
  user: ['read'],
  guest: [],
};

// Numeric keys
type IndexedItems = Record<number, { name: string }>;

Extract and Exclude#

type AllTypes = string | number | boolean | null | undefined;

// Extract types that extend a condition
type Primitives = Extract<AllTypes, string | number | boolean>;
// string | number | boolean

// Exclude types that extend a condition
type NonNullTypes = Exclude<AllTypes, null | undefined>;
// string | number | boolean

// Practical use: event types
type MouseEvents = 'click' | 'dblclick' | 'mousedown' | 'mouseup';
type KeyboardEvents = 'keydown' | 'keyup' | 'keypress';
type AllEvents = MouseEvents | KeyboardEvents;

type OnlyMouseEvents = Extract<AllEvents, MouseEvents>;
type WithoutMouseEvents = Exclude<AllEvents, MouseEvents>;

NonNullable#

type MaybeString = string | null | undefined;
type DefinitelyString = NonNullable<MaybeString>;
// string

// Practical use
function processValue<T>(value: T): NonNullable<T> {
  if (value === null || value === undefined) {
    throw new Error('Value cannot be null or undefined');
  }
  return value as NonNullable<T>;
}

const result = processValue<string | null>('hello');
// result is string, not string | null

ReturnType and Parameters#

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

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

// Get parameter types
type CreateUserParams = Parameters<typeof createUser>;
// [string, number]

// Useful for wrapping functions
function loggedCreateUser(...args: Parameters<typeof createUser>): ReturnType<typeof createUser> {
  console.log('Creating user with:', args);
  return createUser(...args);
}

InstanceType and ConstructorParameters#

class ApiClient {
  constructor(baseUrl: string, timeout: number) {
    // ...
  }
}

// Get instance type
type Client = InstanceType<typeof ApiClient>;
// ApiClient

// Get constructor parameters
type ClientParams = ConstructorParameters<typeof ApiClient>;
// [string, number]

// Factory function
function createClient(...args: ConstructorParameters<typeof ApiClient>): InstanceType<typeof ApiClient> {
  return new ApiClient(...args);
}

ThisParameterType and OmitThisParameter#

function greet(this: { name: string }, greeting: string): string {
  return `${greeting}, ${this.name}!`;
}

// Get 'this' type
type GreetThis = ThisParameterType<typeof greet>;
// { name: string }

// Remove 'this' parameter
type GreetWithoutThis = OmitThisParameter<typeof greet>;
// (greeting: string) => string

// Bind function
const boundGreet: GreetWithoutThis = greet.bind({ name: 'World' });
boundGreet('Hello'); // 'Hello, World!'

Awaited#

type PromiseString = Promise<string>;
type ResolvedString = Awaited<PromiseString>;
// string

// Works with nested promises
type NestedPromise = Promise<Promise<Promise<number>>>;
type ResolvedNumber = Awaited<NestedPromise>;
// number

// Useful for async function return types
async function fetchData(): Promise<{ data: string }> {
  return { data: 'result' };
}

type FetchResult = Awaited<ReturnType<typeof fetchData>>;
// { data: string }

Uppercase, Lowercase, Capitalize, Uncapitalize#

type Greeting = 'hello world';

type Upper = Uppercase<Greeting>;       // 'HELLO WORLD'
type Lower = Lowercase<'HELLO WORLD'>; // 'hello world'
type Cap = Capitalize<Greeting>;        // 'Hello world'
type Uncap = Uncapitalize<'Hello'>;    // 'hello'

// Practical use: event handlers
type EventName = 'click' | 'focus' | 'blur';
type HandlerName = `on${Capitalize<EventName>}`;
// 'onClick' | 'onFocus' | 'onBlur'

type Handlers = {
  [K in EventName as `on${Capitalize<K>}`]: (event: Event) => void;
};
// { onClick: ..., onFocus: ..., onBlur: ... }

Combining Utility Types#

interface Entity {
  id: number;
  createdAt: Date;
  updatedAt: Date;
}

interface User extends Entity {
  name: string;
  email: string;
  role: 'admin' | 'user';
}

// Create input type (without auto-generated fields)
type CreateUserInput = Omit<User, keyof Entity>;
// { name: string; email: string; role: 'admin' | 'user' }

// Create update type (all fields optional except id)
type UpdateUserInput = Partial<Omit<User, 'id'>> & Pick<User, 'id'>;
// { id: number; name?: string; email?: string; ... }

// Readonly entity
type ReadonlyUser = Readonly<User>;

// Pick with partial
type PartialPick<T, K extends keyof T> = Partial<Pick<T, K>>;
type OptionalUserInfo = PartialPick<User, 'name' | 'email'>;
// { name?: string; email?: string }

Custom Utility Types#

// Deep Partial
type DeepPartial<T> = {
  [P in keyof T]?: T[P] extends object ? DeepPartial<T[P]> : T[P];
};

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

// Nullable
type Nullable<T> = T | null;

// Optional keys
type OptionalKeys<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>;

// Required keys
type RequiredKeys<T, K extends keyof T> = Omit<T, K> & Required<Pick<T, K>>;

// Pick by type
type PickByType<T, U> = {
  [P in keyof T as T[P] extends U ? P : never]: T[P];
};

// Usage
interface Mixed {
  id: number;
  name: string;
  active: boolean;
  count: number;
}

type StringProps = PickByType<Mixed, string>;
// { name: string }

type NumberProps = PickByType<Mixed, number>;
// { id: number; count: number }

Best Practices#

Common Patterns:
✓ Partial for update functions
✓ Pick/Omit for API responses
✓ Record for dictionaries
✓ ReturnType for function wrappers

Type Safety:
✓ Use Readonly for constants
✓ Use NonNullable after null checks
✓ Combine utilities for complex types
✓ Create custom utilities for reuse

Avoid:
✗ Over-nesting utility types
✗ Complex type gymnastics
✗ Ignoring readability
✗ Reinventing built-in types

Performance:
✓ Keep type complexity manageable
✓ Use type aliases for readability
✓ Document complex transformations
✓ Test types with assertions

TypeScript's utility types provide powerful, composable tools for type transformations. Use Partial and Required for optionality, Pick and Omit for property selection, Record for dictionaries, and Extract/Exclude for union manipulation. Combine them to create precise types for your domain, and build custom utilities for patterns specific to your codebase. These tools enable type-safe APIs while keeping your code DRY.