Concepts in TypeScript & Web APIs, page 2
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.
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 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.
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 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.
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'.
Conditional Types: Ternary Logic for Your Types
Conditional types are like a ternary operator for your type system, choosing a type based on a condition (T extends U ? X : Y). They're used with generics to make a function's return type depend on its input, avoiding cumbersome function overloads.
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.
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 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 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 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.
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.
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.
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.
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.
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.
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.
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.
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.
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