──────────────────────────────────────────────────────────────────────
TypeScript as a Design Tool for UI Engineers
Type systems are not just for catching bugs — they're a design language. Strict TypeScript forces you to think through component APIs before writing a line of JSX.
Most engineers treat TypeScript as a spell-checker for JavaScript. That's useful. But it misses the more interesting use of a type system: as a medium for designing APIs before you build them.
Types Are Contracts
When I start a new component, I write the type before I write the component. The type IS the spec. If the type is hard to write, the API is hard to use.
Discriminated Unions as UX Decisions
type ButtonState =
| { status: 'idle' }
| { status: 'loading'; progress?: number }
| { status: 'success'; message: string }
| { status: 'error'; error: Error }This type isn't just describing behavior — it's preventing a class of UI bugs where loading and error states coexist. The type system is enforcing UX decisions.
The Feedback Loop
Strict TypeScript with noUncheckedIndexedAccess, exactOptionalPropertyTypes, and strictNullChecks turns your compiler into a design critic. One that's available at 2am and never has meetings.