typescriptANYtypescriptutility-typesnonnullable
typescript
type MaybeUser = { id: string } | null | undefined;
type User = NonNullable<MaybeUser>;Useful after validation or guard logic has removed nullable cases.
TypeScript Utility Types and Recipes
Built-in utility types and practical application patterns.
Export
Copy the compact sheet, download it, or print it.
Download
`D` dense toggle · `C` copy all
Common Utility Type Recipes
Reusable helpers for app code and API modeling.
typescriptANYtypescriptutility-typesextract
typescript
type Shape = "circle" | "square" | 42;
type StringShape = Extract<Shape, string>;Helpful when refining broad unions into a specific subset.
typescriptANYtypescriptutility-typesexclude
typescript
type Shape = "circle" | "square" | 42;
type NumericFree = Exclude<Shape, number>;`Exclude` is the inverse of `Extract` and useful for filtering unions.
typescriptANYtypescriptutility-typesparameters
typescript
type Fn = (id: string, active: boolean) => void;
type FnArgs = Parameters<Fn>; // [id: string, active: boolean]Great for wrappers, event helpers, and higher-order functions.
typescriptANYtypescriptutility-typesinstancetype
typescript
class UserService {}
type UserServiceInstance = InstanceType<typeof UserService>;Useful in dependency injection helpers or factory utilities.
API and Domain Modeling Recipes
Patterns for strongly typed forms, APIs, and state machines.
typescriptANYtypescriptapigenerics
typescript
type Paginated<T> = {
items: T[];
total: number;
page: number;
pageSize: number;
};A generic wrapper keeps API contracts DRY across entities.
typescriptANYtypescriptformsrecordpartial
typescript
type FieldErrors<T> = Partial<Record<keyof T, string>>;This pattern works well for forms, settings pages, and API validation results.
typescriptANYtypescriptstate-machinesunions
typescript
type AsyncState<T> =
| { status: "idle" }
| { status: "loading" }
| { status: "success"; data: T }
| { status: "error"; error: string };Discriminated unions make UI rendering branches easier to reason about.
typescriptANYtypescripteventsmaps
typescript
type Events = {
"user.created": { id: string };
"user.deleted": { id: string };
};A typed event map pairs well with `keyof` and indexed access helpers.
More in TypeScript
TypeScript tsconfig and Tooling
tsconfig.json patterns, diagnostics, and project references.
TypeScript Classes and Modules
Classes, access modifiers, inheritance, modules, and validation boundaries.
TypeScript Functions and Narrowing
Function typing, overloads, control-flow narrowing, and async typing.
TypeScript Types and Generics
Advanced type operators, mapped types, conditional types, and utility types.
TypeScript Cheat Sheet
Core TypeScript syntax, typing patterns, and compiler commands.