More in TypeScript & Web APIs — page 12
The `never` Type: A Value That Should Never Exist
The `never` type represents a value that should never occur. It's used for functions that always throw an error or for exhaustive checks in switch statements to signal impossible states. The footgun is confusing it with `void`, which means 'returns nothing'.
TypeScript Utility Types: Don't Reinvent the Type
Utility types are pre-built functions for your types, transforming them without manual effort. Use `Partial<T>` for update functions or `Readonly<T>` for immutable objects.
keyof: A Union Type of an Object's Keys
`keyof` is like `Object.keys()` for the type system, creating a union type of an object's property names. It's used to write generic functions that safely access properties on unknown objects.
TypeScript Index Signatures: Typing Dynamic Keys
An index signature is a blueprint for a dictionary, letting you type objects where you don't know property names ahead of time, but you know their values' type. Use it for configs or caches.
TypeScript: How Type Guards Narrow Union Types
Type guards are runtime checks that teach TypeScript about your types, allowing it to 'narrow' a broad union type. This lets you use type-specific methods safely. Without a guard, TypeScript will error because it can't guarantee the type is correct.
TypeScript's `typeof`: Get a Type from a Value
TypeScript's `typeof` operator grabs the static type from a runtime value, like a variable. It's essential for utilities like `ReturnType`, letting you derive a type from a function's implementation without duplicating definitions.
History API: Change URLs Without Page Reloads
The History API lets you manipulate browser session history, enabling single-page app (SPA) routing without full page reloads. It's used to create "virtual" pages by changing the URL and state.
Smooth Animations with requestAnimationFrame
Sync your code to the browser's repaint cycle for smooth, efficient animations with `requestAnimationFrame`. Use it for any visual change over time, like moving an element or running a game loop.
The JavaScript Event Loop: Asynchronicity on a Single Thread
The event loop is a queue that lets single-threaded JavaScript handle asynchronous tasks without blocking. It processes callbacks from Web APIs like `fetch` or `setTimeout` one at a time. The footgun: `setTimeout(fn, 0)` doesn't run instantly, just next.
Event Bubbling vs. Capturing: The DOM's Two-Way Street
An event fired on a nested element travels in two phases: first down from the root (capturing), then back up (bubbling). This is how all DOM events work, like clicks.
Browser Object Model: The Browser's Unruly API
The Browser Object Model (BOM) is the collection of non-standard APIs browsers expose for interacting with the browser window. Unlike the standardized DOM, its implementation is up to each vendor, creating a major cross-browser compatibility footgun.
DOM Traversal: Navigating the HTML Tree
DOM traversal is navigating a family tree of HTML nodes. You move between elements using properties like `parentNode` and `nextSibling`. This is key for finding elements relative to a known start point.
DOM Manipulation: Treating Your Webpage Like a Live Object
The DOM is a live tree of your webpage's HTML. DOM manipulation is how JavaScript changes that tree—adding, removing, or updating elements. This is key for all interactive web development. The footgun: direct, frequent manipulation is slow.
Web Storage API: Browser Key-Value Stores
Web Storage provides simple browser key-value stores: `localStorage` and `sessionStorage`. Use `localStorage` for data that persists across sessions, like user settings, and `sessionStorage` for data tied to a single tab.
The DOM: Your HTML as a Live Object Tree
The DOM is the browser's live model of a webpage, represented as a tree of objects. JavaScript uses it to find elements, change content, and react to clicks. The footgun: DOM changes are in-memory; they don't edit the original HTML file on the server.
The `document` Object: Your Page's API
The `document` object is the root of the DOM tree, representing the entire webpage in your script. Use it to find elements (`getElementById`), create new ones (`createElement`), or read page info. The main footgun: accessing an element before it's been parsed.
The `window` Object: Your Browser's Global Scope
Think of the `window` object as the global stage for your JavaScript. It represents the browser tab and holds all global variables and APIs like `fetch` and `setTimeout`. You use it constantly, often implicitly.
Literal Types: Be More Specific Than `string`
Literal types specify the *exact* value a variable must hold, not just its general type like `string`. They're great for creating fixed option sets with unions, like `type Status = "pending" | "complete"`.
TypeScript Enums: Named Constants for Clarity
TypeScript enums give friendly names to a fixed set of values, like `Status.Success` instead of a magic number. Use them for API response codes or state machines. The footgun: default numeric enums are just numbers at runtime, making them hard to debug.
tsconfig.json: The Rulebook for Your TypeScript Project
The tsconfig.json file is the rulebook for the TypeScript compiler, defining which files to process and what rules to enforce. It's essential for setting strictness, module resolution, and output targets.