TypeScript Discriminated Unions

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

function handleResult(result: Result<User>) {
  switch (result.status) {
    case 'loading':
      // TypeScript knows: no data, no error
      return <Spinner />;
    
    case 'success':
      // TypeScript knows: result.data exists
      return <UserCard user={result.data} />;
    
    case 'error':
      // TypeScript knows: result.error exists
      return <ErrorMsg error={result.error} />;
  }
}

type ApiResponse<T> =
  | { ok: true; data: T }
  | { ok: false; error: string };

async function fetchUser(id: string): Promise<ApiResponse<User>> {
  try {
    const user = await api.getUser(id);
    return { ok: true, data: user };
  } catch (e) {
    return { ok: false, error: e.message };
  }
}

// Usage - TypeScript enforces the check
const result = await fetchUser('123');
if (result.ok) {
  console.log(result.data.name); // ✅ Safe
} else {
  console.log(result.error); // ✅ Safe
}

type FormState =
  | { step: 'info'; name: string; email: string }
  | { step: 'payment'; cardNumber: string }
  | { step: 'confirm'; orderId: string };

function FormStep({ state }: { state: FormState }) {
  switch (state.step) {
    case 'info':
      return <InfoForm name={state.name} />;
    case 'payment':
      return <PaymentForm card={state.cardNumber} />;
    case 'confirm':
      return <Confirmation id={state.orderId} />;
  }
}