Intermediate everything in Frontend Dev, page 22
TypeScript's Optional Chaining (`?.`)
Optional chaining (?.) lets you safely access nested properties without crashing on null or undefined. Use it to replace verbose && checks when traversing deep objects. The footgun is that it only checks the value to its left, not the entire chain.
TypeScript: Modify Properties with Mapped Type Modifiers
Mapped type modifiers let you add or remove readonly and ? from a type's properties. Use them to create a fully required type from an optional one, or a mutable version of a readonly object. The footgun: remember the - prefix to *remove* modifiers.
AbortController: Cancel In-Flight Web Requests
AbortController is a remote kill switch for web requests. You create a controller, pass its signal to a fetch call, and can then call abort() to cancel it. Use it to stop requests when a user navigates away. The footgun is forgetting this signal.
URLSearchParams: Safely Build and Parse URL Queries
Think of URLSearchParams as a structured object for a URL's query string, saving you from messy string manipulation. Use it to read incoming parameters or build a query for a fetch request. The footgun: get() only returns the first value for a key.
TypeScript `infer`: Create a Self-Typing Fetch Wrapper
Use TypeScript's infer to build one fetch wrapper that automatically knows the correct request/response types for every endpoint. It's essential for type-safe calls to APIs with a defined schema.
The Headers Object: A Safer Way to Manage HTTP Headers
The Headers object is a specialized map for HTTP headers that handles sanitization for you. Use it with the Fetch API to build requests or read response headers. The footgun: headers from a fetch() response are immutable and will throw an error if you try.
Typing `fetch` Responses in TypeScript
The fetch promise resolves to a generic Response, not your typed data. You must first parse the body with .json(), then assert the type of the resulting data. This is essential for all API calls.
TypeScript Generics: Writing Functions That Adapt to Types
TypeScript generics create functions with type placeholders, capturing an input's type to inform the output's. This is vital for reusable components that work on various data types.
The Promise Constructor: Wrapping Old Callbacks
The Promise constructor turns old callback-style functions into modern promises you can await. Use it to "promisify" APIs like setTimeout that don't return promises. The footgun is wrapping already-promise-based code, creating unnecessary complexity.
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.
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