TypeScript Advanced Patterns: Codebases at Scale

TypeScript has evolved far beyond standard interfaces and static type annotations. In large-scale React and Node.js codebases, utilizing advanced type patterns is essential to write self-documenting code that prevents run-time crashes.

1. Conditional Types & Infer keyword

Conditional types allow you to declare dynamic types that switch depending on checking rules. By coupling conditional types with the infer keyword, you can extract inner types from generic wrappers:

type UnwrapPromise<T> = T extends Promise<infer U> ? U : T;
type Result = UnwrapPromise<Promise<string>>; // Resolves to: string

2. Mapped Types and Modifiers

Mapped types let you transform type properties. For example, if you want to create a utility that strips away read-only modifiers or makes all keys optional:

type Mutable<T> = {
  -readonly [P in keyof T]: T[P];
};

The -readonly modifier removes the read-only restriction on mapped keys, allowing mutability safely when processing clones.

3. Discriminated Unions for Clean State Management

When modeling fetch states in React, avoid separate optional flags like loading: boolean, data?: Data, error?: string. Instead, model them using a discriminated union:

type FetchState<T> = 
  | { status: "loading" }
  | { status: "success"; data: T }
  | { status: "error"; error: Error };

By checking the status property, TypeScript narrows down the available fields in your code, preventing you from accessing data when the status is loading or error.

Mastering these concepts transforms your codebase, reducing redundant checks and making refactoring a breeze.