Day 37 of 100: Interfaces — and the interface vs type Debate Settled

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

---

Interfaces describe object shapes too. The eternal question: interface or type? Settled today.

Interface Syntax

interface TestConfig {
  baseUrl: string;
  timeout: number;
  retries: number;
}

interface CIConfig extends TestConfig {   // extension
  shards: number;
}

const ci: CIConfig = {
  baseUrl: 'http://localhost', timeout: 30000, retries: 2, shards: 4,
};

Interface vs Type — Real Differences

• extends syntax (interface) vs intersection & (type) — cosmetic difference
• Interfaces merge across declarations (used to extend Playwright matchers!)
• Types handle unions, primitives, tuples — interfaces cannot
• Performance/behavior: identical for plain object shapes

The Practical Rule

// Objects/classes that might extend → interface
interface PageObject { readonly url: string; goto(): Promise; }

// Unions, functions, utility compositions → type
type Status = 'pass' | 'fail' | 'skip';
type Handler = (route: unknown) => void;
type WithId = T & { id: number };

// Declaration merging — why custom Playwright matchers use interface:
// declare global { namespace PlaywrightTest {
//   interface Matchers { toBeLoggedIn(): R; }
// }}

Tomorrow (Day 38): Union and intersection types — modeling test states.