Deep Dive Into TypeScript Utility Types

Published on February 18, 2024Last updated on March 30, 20253 min read

typescript
// Example of common utility types usage
interface User {
  id: string;
  name: string;
  email: string;
  isActive?: boolean;
}

// Make all properties optional type PartialUser = Partial<User>;

// Make all properties required type RequiredUser = Required<User>;

// Make all properties readonly type ReadonlyUser = Readonly<User>;

// Pick specific properties type UserCredentials = Pick<User, 'email' | 'password'>;

What are Utility Types?

TypeScript ships with built-in utility types that transform existing types. They let you reshape types without rewriting them by hand, which keeps your code type-safe and avoids duplication.

Key Features:

Zero runtime overhead - purely for type checking
Built into TypeScript - no additional dependencies
Composable - combine them for complex transformations
Type-safe transformations
Reduces type definition duplication

Core Utility Types

Partial<Type>

Makes all properties optional:

typescript
interface Todo {
  title: string;
  description: string;
}

type PartialTodo = Partial<Todo>; // Equivalent to: // { // title?: string; // description?: string; // }

Required<Type>

Makes all properties required:

typescript
interface Config {
  cache?: boolean;
  timeout?: number;
}

type RequiredConfig = Required<Config>; // Equivalent to: // { // cache: boolean; // timeout: number; // }

Readonly<Type>

Makes all properties immutable:

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

type ReadonlyUser = Readonly<User>;
// Cannot modify properties after creation

const user: ReadonlyUser = { id: '1', name: 'John' };
// user.name = "Jane";
// Error!

Record<Keys, Type>

Creates an object type with specific key-value pairs:

typescript
type CatInfo = {
  age: number;
  breed: string;
};

type CatName = 'miffy' | 'boris' | 'mordred';

const cats: Record<CatName, CatInfo> = {
  miffy: { age: 10, breed: 'Persian' },
  boris: { age: 5, breed: 'Maine Coon' },
  mordred: { age: 16, breed: 'British Shorthair' }
};

Pick<Type, Keys>

Creates a type by picking specific properties:

typescript
interface Post {
  id: string;
  title: string;
  content: string;
  published: boolean;
}

type PostPreview = Pick<Post, 'id' | 'title'>;
// Equivalent to:
// { id: string; title: string; }

Omit<Type, Keys>

Creates a type by excluding specific properties:

typescript
interface User {
  id: string;
  name: string;
  password: string;
}

type PublicUser = Omit<User, 'password'>; // Equivalent to: // { // id: string; // name: string; // }

Advanced Utility Types

Exclude<UnionType, ExcludedMembers>

Removes types from a union:

typescript
type Status = 'pending' | 'active' | 'deleted' | 'banned';

type ActiveStatus = Exclude<Status, 'deleted' | 'banned'>; // Result: "pending" | "active"

NonNullable<Type>

Removes null and undefined from a type:

typescript
type Response = string | null | undefined;

type ValidResponse = NonNullable<Response>; // Result: string

Parameters<Type>

Extracts parameter types from a function:

typescript
type FetchUser = (id: string, includeDetails: boolean) => Promise<User>;

type FetchUserParams = Parameters<FetchUser>; // Result: [id: string, includeDetails: boolean]

Common Use Cases

API Response Handling

typescript
interface APIResponse<T> {
  data: T;
  error?: string;
  status: number;
}

type SafeResponse<T> = Required<Omit<APIResponse<T>, 'error'>>;

Configuration Objects

typescript
interface Config {
  api: string;
  timeout?: number;
  retries?: number;
}

type RequiredConfig = Required<Config>; type ReadonlyConfig = Readonly<RequiredConfig>;

Event Handling

typescript
type EventHandler = (event: MouseEvent) => void;
type EventParams = Parameters<EventHandler>;
type SafeEventHandler = (...args: NonNullable<EventParams>) => void;

Best Practices

Compose Utility Types

typescript
type SafeReadonly<T> = Readonly<NonNullable<T>>;

Use with Generics

typescript
function pick<T, K extends keyof T>(obj: T, keys: K[]): Pick<T, K> {
  // Implementation
}

Type Inference with Utilities

typescript
function update<T>(obj: T, updates: Partial<T>): T {
  return { ...obj, ...updates };
}

Conclusion

TypeScript's utility types manipulate types while keeping your code type-safe and free of duplication. Learn them well, and they will sharpen your day-to-day TypeScript work.

Quick Recap: