TypeScript &amp; Web APIs

Callback Hell: Navigating JavaScript's Async Pyramid

Callback Hell is the 'pyramid of doom' structure from nesting async functions. It happens when chaining I/O tasks like API calls, where each step depends on the last. The footgun is writing async code as if it runs sequentially, creating unreadable nests.

The Promise Object: A Placeholder for Future Values

A Promise is an IOU for a value from an async operation, like a network request. It's a placeholder that will eventually hold a result or an error. Use it for fetching data or reading files. The footgun: always add a .catch() to handle failures.

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.

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.

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.

Promise Cleanup with .finally()

Promise.finally() is the try...catch...finally for async code, guaranteeing logic runs after a promise settles. Use it to hide a loading spinner or close a network connection without duplicating code in .then() and .catch().

Fetch API: Making Basic Network Requests

The Fetch API is like ordering from a catalog: you give it a URL and get a promise of delivery. It's used to load data from APIs without a page reload. The footgun: the promise resolves even on HTTP errors (like 404); you must check.

easy1 min read

Configuring Fetch Requests with `RequestInit`

RequestInit is the options object that customizes a fetch call beyond a simple GET. Use it to specify the HTTP method, send a request body, set headers, and control caching. A common footgun is sending a JSON body without setting the Content-Type header.

Fetch API Errors: Why a 404 is a 'Success'

A fetch() call only fails on network errors, not on HTTP errors like 404. You must check the response.ok property to see if the request was successful. The footgun is assuming a catch block will handle a 404; it won't.

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.

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.

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.

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.

The Fetch API's Request Object

The Fetch API's Request object is a blueprint for an HTTP call, bundling URL, method, headers, and body. It's key for intercepting traffic in service workers or building reusable fetches. The main footgun: its body is a stream that can only be read once.

Runtime Response Validation with Schema Libraries

TypeScript types evaporate at runtime, so a fetch response typed as User[] can be null or malformed. Schema libraries like Zod give static types and runtime guards from one contract. The footgun is using as instead of parse, silently reintroducing crashes.

Stream a Fetch Response Chunk by Chunk

Process a fetch response as it arrives, chunk by chunk, instead of buffering the whole file in memory. This is ideal for large files like videos or giant JSON datasets.

Indexed Access Types: Look Up a Property's Type

Indexed access types let you look up a property's type on another type, like Person['age'] yielding number. Use them to create new types from existing ones, like getting an array element's type with MyArray[number].

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.

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.