pfftdammitchris

interface UserState {
  loading: boolean
  data?: User
  error?: Error
}

pfftdammitchris

// Loading, but somehow also has data AND an error?
const weird: UserState = { loading: true, data: user, error: new Error() }

// Not loading, no data, no error — what does that even mean?
const empty: UserState = { loading: false }

pfftdammitchris

type UserState =
  | { status: 'loading' }
  | { status: 'success'; data: User }
  | { status: 'error'; error: Error }

pfftdammitchris

function renderUser(state: UserState): string {
  switch (state.status) {
    case 'loading':
      return 'Loading…'
    case 'success':
      // TypeScript knows `state.data` exists here
      return `Welcome, ${state.data.name}`
    case 'error':
      // …and `state.error` exists here
      return `Something went wrong: ${state.error.message}`

pfftdammitchris

type UserState =
  | { status: 'loading' }
  | { status: 'success'; data: User }
  | { status: 'error'; error: Error }
  | { status: 'refreshing'; data: User } // new

pfftdammitchris

function assertNever(value: never): never {
  throw new Error(`Unhandled state: ${JSON.stringify(value)}`)
}

function renderUser(state: UserState): string {
  switch (state.status) {
    case 'loading':
      return 'Loading…'
    case 'success':
      return `Welcome, ${state.data.name}`

pfftdammitchris

type CheckoutState =
  | { step: 'cart'; items: CartItem[] }
  | { step: 'shipping'; items: CartItem[]; address: Address }
  | { step: 'payment'; items: CartItem[]; address: Address; method: PayMethod }
  | { step: 'confirmed'; orderId: string }

type CheckoutAction =
  | { type: 'addAddress'; address: Address }
  | { type: 'addPayment'; method: PayMethod }
  | { type: 'confirm'; orderId: string }

pfftdammitchris

// Bad: `status` is `string`, so TypeScript can't narrow
interface Loose { status: string; data?: User }

// Good: literal union enables narrowing
type Tight = { status: 'idle' } | { status: 'ready'; data: User }

pfftdammitchris

interface UserState {
  loading: boolean
  data?: User
  error?: Error
}

pfftdammitchris

// Loading, but somehow also has data AND an error?
const weird: UserState = { loading: true, data: user, error: new Error() }

// Not loading, no data, no error — what does that even mean?
const empty: UserState = { loading: false }