Day 46 of 100: Record and Readonly — Typed Lookup Tables

Day 46 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.

---

Record types lookup tables. Readonly locks them. Config maps done right.

Record

type Env = 'local' | 'staging' | 'prod';

const URLS: Record = {
  local: 'http://localhost:3000',
  staging: 'https://staging.example.com',
  prod: 'https://example.com',
  // forget a key → compile error; add 'qa' to Env → forced here too
};

function urlFor(env: Env): string { return URLS[env]; }

const STATUS_LABELS: Record = {
  200: 'OK', 201: 'Created', 404: 'Not Found', 500: 'Server Error',
};

Readonly Deep Lock

const CONFIG = {
  timeout: 30_000,
  retries: 2,
  browsers: ['chromium', 'firefox'],
} as const;
// as const: every field readonly, arrays become readonly tuples,
// values become literal types. Mutation = compile error.

// CONFIG.timeout = 5  — error
// CONFIG.browsers.push('webkit')  — error

Pattern: Exhaustive Env Handling

// Record forces a value for EVERY union member —
// add an environment, the compiler lists every map to update.
const SEED_USERS: Record = {
  local: { email: 'dev@test.com' },
  staging: { email: 'stage@test.com' },
  prod: { email: 'smoke@test.com' },
};

Tomorrow (Day 47): Type narrowing — guards that make unknown safe.