Day 38 of 100: Union and Intersection Types — Modeling Test States

Day 38 of 100 — 100 Days of Playwright with TypeScript Challenge. Phase: TypeScript. JavaScript (Days 1-33) → TypeScript (Days 34-63) → Playwright (Days 64-96) → AI Framework Capstone (Days 97-100).

🎭 Want to master this with real projects? Join the Playwright Automation Mastery course at The Testing Academy.

---

Unions say ‘one of these’. Intersections say ‘all of these’. Test states and combined configs, modeled precisely.

Unions

type TestStatus = 'passed' | 'failed' | 'skipped' | 'flaky';
type Id = string | number;

function report(status: TestStatus): string {
  // switch over a union — compiler ensures all cases handled
  switch (status) {
    case 'passed': return 'green';
    case 'failed': return 'red';
    case 'skipped': return 'gray';
    case 'flaky': return 'orange';
  }
}
// report('error')  — compile error: not in union

Intersections

type Timestamps = { createdAt: string; updatedAt: string };
type WithId = { id: number };

type DbUser = WithId & Timestamps & { name: string };
// Must have ALL: id, createdAt, updatedAt, name

Discriminated Unions — The Power Pattern

type ApiResult =
  | { ok: true; data: { id: number } }
  | { ok: false; error: string };

function handle(res: ApiResult) {
  if (res.ok) {
    res.data.id;        // TS knows data exists here
  } else {
    res.error;          // and error exists here — no casts needed
  }
}

Tomorrow (Day 39): Enums and literal types — when each wins.