Typescript Patterns

TypeScript Patterns

Rules (always apply)

| Pattern | Do | Don't | | ------------- | ------------------------------ | ------------------- | | Object shapes | interface | type | | Composition | interface extends | type & | | Unions | discriminated, = | { status: "idle" } | { status: "loading" } | { status: "success"; data: T } | { status: "error"; error: Error }

// ❌ allows impossible states type AsyncState = { status: string; data?: T; error?: Error }

## satisfies for Validation

```ts
// ✅ validates + infers literal types
return { type, severity, description } satisfies Partial

// ❌ loses inference
function createConfig(): Partial { return { timeout: 5000 } }

Explicit undefined vs Optional

// ✅ forces acknowledgment
interface CreateUser { referrerId: string | undefined }

// ❌ silent omission possible
interface CreateUser { referrerId?: string }

interface extends > type &

// ✅ cached, flat
interface ButtonProps extends BaseProps, InteractiveProps {
  variant: "primary" | "secondary"
}

// ❌ recursive merge, slow
type ButtonProps = BaseProps & InteractiveProps & { variant: "primary" | "secondary" }

Use & only for: type A = (B | C) & D

as const > enum

// ✅ tree-shakeable, no runtime
const Status = { Pending: "pending", Active: "active" } as const
type Status = (typeof Status)[keyof typeof Status]

// ❌ generates runtime code
enum Status { Pending = "pending" }

Immutability

// ✅ spread
const updated = { ...user, name: "New" }
const added = [...items, newItem]

// ❌ mutation
user.name = "New"
items.push(newItem)

Parallel Async

// ✅ parallel
const [users, markets] = await Promise.all([fetchUsers(), fetchMarkets()])

// ❌ sequential (when independent)
const users = await fetchUsers()
const markets = await fetchMarkets()

Large Unions (>10 members)

// ❌ O(n²)
type Status = "pending" | "processing" | "confirmed" | "shipped" | ...

// ✅ nested
type Status =
  | { category: "active"; state: "pending" | "processing" }
  | { category: "completed"; state: "delivered" | "shipped" }

Exhaustiveness Checking

switch (state.status) {
  case "success": return ...
  default: {
    const _exhaustive: never = state
    throw new Error("Unhandled state")
  }
}

Extract Complex Conditionals

// ❌ recalculated
interface Api { fetch(x: U): U extends TypeA ? ProcessA : U }

// ✅ cached
type FetchResult = U extends TypeA ? ProcessA : U
interface Api { fetch(x: U): FetchResult }

When type is Correct

• Unions: type Result = Success | Error
• Mapped types: type Readonly = { readonly [K in keyof T]: T[K] }
• Conditionals: type Unwrap = T extends Promise ? U : T
• Tuples: type Pair = [string, number]
• Schema derivation: type User = Infer
• Generic constraints needing index signatures

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: JasonDocton
• Source: JasonDocton/rad-claude
• License: MIT

Install and usage instructions live in the source repository linked above.