← Study Notes Frontend


Frontend

TypeScript

A typed superset of JavaScript that adds static types, interfaces and generics, catching whole classes of bugs at compile time and powering editor autocomplete and safe refactors. It is close to essential on large codebases. The cost is a build step and time spent modelling types — and since types vanish at runtime, you still validate external input.


Purpose

TypeScript is JavaScript plus a static type system — interfaces, unions, generics — that catches type errors at compile time instead of in production. Just as valuable, the types power the editor: precise autocomplete, inline documentation and refactors that update every usage safely.

When to Use It

It is close to essential on large or long-lived codebases and anywhere multiple people touch the same code — the types are enforced, always-current documentation. Shared type definitions between a TypeScript API and its frontend eliminate a whole class of contract drift.

Trade-offs

You pay a build step and time spent modelling types, and complex generic types can become their own puzzle. Crucially, types are erased at runtime — they verify your code's internal consistency, not the outside world's honesty — so external input (API responses, forms) still needs runtime validation with a library like Zod.

Implementation

Enable strict mode from day one; infer types where obvious and annotate public boundaries. Model states that cannot coexist as discriminated unions rather than optional-field soup, avoid any (prefer unknown plus narrowing), and validate at the edges so compile-time and runtime guarantees meet.