One feature through both builds
To make the arc "click", trace one feature through both builds — you'll see exactly what the types added.
Take the picture detail (detail) you built in lesson 14.
The vanilla version worked — but with hidden traps:
img.src = pic.hdurl || pic.url; // works ONLY because you remembered "|| pic.url"
if (pic.copyright) { // works ONLY because you remembered this if
credit.textContent = `© ${pic.copyright}`;
}
Both lines are correct — but nothing enforced that you'd write them. A new teammate copying code could easily drop the || pic.url or the if — and the app would crash on a video day, or on a picture with no owner.
The TypeScript version makes those bugs unwritable:
if (pic.media_type === 'image') {
img.src = pic.hdurl ?? pic.url; // hdurl is reachable ONLY after the media_type check
}
if (pic.copyright !== undefined) { // the compiler REQUIRES this check
credit.textContent = `© ${pic.copyright}`;
}
The difference isn't style — it's what enforces correctness. Vanilla: your memory and discipline. TypeScript: a compiler that refuses to compile until you handle every case. Forgetting becomes impossible — not because you got more careful, but because the language no longer allows it.
The same shows up everywhere:
| Place | Vanilla | TypeScript |
|---|---|---|
| media_type | "remember the check" | narrowing required |
| state | isLoading + error separate | LoadStatus union (can't have both) |
| API response | trusts any |
a type guard at the boundary |
| sorting | switch with no default |
assertNever — all variants |
| rating | any number |
Rating = 0..5 |
On every line, TypeScript turned "you have to remember" into "you can't forget". That IS the course — not "TypeScript is good", but "here's exactly which of your own bugs it catches, and why vanilla didn't".