Intermediate everything in TypeScript & Web APIs, page 6
The FormData API: From HTML Forms to Typed Objects
FormData serializes an HTML form into key/value pairs for fetch. In TypeScript, its main footgun is that get() returns a generic string | File | null, requiring you to validate and cast the data before using it safely.
Typing NodeList vs. HTMLCollection in TypeScript
NodeList can contain any node (elements, text, comments), while HTMLCollection only holds elements. TypeScript forces you to handle this. Use querySelectorAll for a NodeList, or getElementsByTagName for an HTMLCollection.
Strongly-Typed Event Listeners in TypeScript
TypeScript turns addEventListener's magic strings into a compile-time checked dictionary. It knows a button has a "click" event, preventing typos and inferring the event object's type.
The DOM's Inheritance Chain: EventTarget > Node > Element
Every HTML element is a stack of types: an EventTarget for events, a Node for tree structure, and an Element for common attributes. This lets you write type-safe DOM code, knowing a div has properties from all its ancestors.
TypeScript Class Access Modifiers
Access modifiers are like privacy settings for class members, controlling what code can see them. Use public (default), private (class-only), and protected (class and subclasses) to enforce encapsulation.
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.
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.
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.
TypeScript Function Types: Expressions vs. Signatures
TypeScript describes function shapes with type expressions or call signatures. Use a simple expression like (s: string) => void for callbacks. For functions with properties, use a call signature. The footgun: parameter names are required in type expressions.
TypeScript Interfaces: Naming the Shape of Your Data
An interface is a contract for an object's shape, caring what properties it has, not its class. Use it to define function parameters or API responses. The footgun: TypeScript allows objects with extra properties, checking only for the required ones.
Union Types: When a Value Can Be One of Several Things
A Union Type is an 'OR' for your types, letting a value be one of several options, like string | number. Use it for flexible function arguments or varied API responses. The footgun: you can only use properties common to all types until you narrow.
We are hiring for this. Every open role lists the topics its interview covers, so you can prepare for the real thing rather than guessing.
See open roles