TypeScript &amp; Web APIs

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().

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 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.

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.

currentTarget vs. target: Who's Listening vs. Who Shouted

event.currentTarget is the element listening for an event, while event.target is the element that triggered it. This is vital for event delegation patterns. Be careful: currentTarget is only valid inside the handler and becomes null afterward.

Typed Custom Events: Making Browser Events Type-Safe

CustomEvent lets you fire your own browser events, but its payload is any. Typing them means defining a specific shape for the event's detail property, turning a generic signal into a predictable, self-documenting API for your components.

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.

Accessing data-* Attributes with `dataset`

The dataset property is a live map of an element's data-* attributes. It automatically converts HTML data-user-id to element.dataset.userId in JS, perfect for storing state. The footgun: name conversion is lossy; HTML attributes are always lowercased.

Type-Safe DOM Selection in TypeScript

TypeScript knows DOM types but can't guarantee an element exists. Selecting an element returns Type | null, forcing you to handle the null case. This prevents runtime errors when your script runs before the DOM element loads.

TypeScript Mixins: Building Classes from Reusable Parts

A mixin is a function that takes a class and returns a new one with added features, like bolting on a turbocharger. Use it to share behavior (e.g., logging) across unrelated classes.

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.

TypeScript Classes: Blueprints for Typed Objects

A TypeScript class is a blueprint for creating objects, adding type safety to JavaScript's object-oriented patterns. Use them for core data structures like a User. The main footgun is forgetting to initialize properties, which strict mode flags as an error.

TypeScript: Typing Function Inputs and Outputs

Think of function types as a contract defining what data goes in and what comes out. This is core to TypeScript, ensuring functions are called correctly. The footgun is relying on return type inference, which can hide bugs if logic changes unexpectedly.

TypeScript: Build New String Types with Template Literals

Template literal types are a factory for new string types, built from existing string literals and unions. They are perfect for generating permutations, like creating 'propChanged' event names from an object's keys.