Deep Dive Into TypeScript Utility Types

Published on February 18, 2024

Last updated on March 30, 2025

868

// 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 comes with a set of built-in utility types that help manipulate and transform existing types. These utilities are particularly useful for type transformations without manually rewriting types, ensuring type safety and reducing code duplication.

Key Features:

Zero runtime overhead - purely for type checking
Built into TypeScript - no additional dependencies
Highly composable - can be combined for complex transformations
Type-safe transformations
Reduces type definition duplication

Core Utility Types

Partial<Type>

Makes all properties optional:

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

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

Required<Type>

Makes all properties required:

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

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

Readonly<Type>

Makes all properties immutable:

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:

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:

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:

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:

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

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

NonNullable<Type>

Removes null and undefined from a type:

type Response = string | null | undefined;

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

Parameters<Type>

Extracts parameter types from a function:

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

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

Common Use Cases

API Response Handling

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

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

Configuration Objects

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

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

Event Handling

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

Best Practices

Compose Utility Types

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

Use with Generics

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

Type Inference with Utilities

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

Conclusion

TypeScript's utility types are powerful tools for type manipulation that help maintain type safety while reducing code duplication. Understanding and effectively using these utilities can significantly improve your TypeScript development experience.

Quick Recap:

Utility types help reduce type definition duplication
They provide type-safe transformations at compile time
They can be composed to create complex type transformations
They work well with generics for reusable type utilities
They help maintain type safety in large codebases

Next Steps:

Start using utility types in your existing codebase
Create reusable type utilities for common patterns
Combine utility types with generics for more flexible type definitions
Use them to improve type safety in your API contracts
Explore more advanced combinations for complex type scenarios

References

GET IN TOUCH

Let's work together

I build fast, accessible, and delightful digital experiences for the web.
Whether you have a project in mind or just want to connect, I’d love to hear from you.

WRITE AN EMAIL

or reach out directly at hello@mohammadshehadeh.com