Day 34 of 100: Why TypeScript — Types Catch Bugs Before Runtime

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

---

TypeScript = JavaScript + types. Everything from Days 1-33 still applies. Types add a compile-time safety net that catches bugs before tests even run.

Setup

mkdir ts-for-qa && cd ts-for-qa
npm init -y
npm install -D typescript tsx
npx tsc --init           # creates tsconfig.json

echo "const msg: string = 'typed hello'; console.log(msg)" > hello.ts
npx tsx hello.ts          # run TS directly

The Bug Types Catch

function calcTotal(price: number, qty: number): number {
  return price * qty;
}

calcTotal(9.99, 3);        // 29.97
// calcTotal('9.99', 3);   // COMPILE ERROR — caught before running!
// In plain JS this returns '9.999.999.99' silently and your
// assertion fails with a confusing message at runtime.

Why SDETs Specifically Benefit

• Playwright is written in TS — typed API autocomplete for every method
• Missing await on a Promise → lint error, not flaky test
• Refactor a Page Object → compiler finds every broken usage
• Test data typos (user.emial) → instant red squiggle

Tomorrow (Day 35): Basic types — string, number, boolean, arrays.