Intermediate everything in TypeScript & Web APIs, page 4
How would you model a WebSocket message discriminated union in TypeScript?
This tests TypeScript discriminated union narrowing. Define interfaces with readonly literal kind fields, union them, and narrow with switch or if checks. A red flag is typing kind as generic string or using type assertions instead of narrowing.
How would you use an enum to represent API statuses?
What it tests: TypeScript enum runtime behavior and API serialization trade-offs. Strong answer: define a string enum with exact API values, contrast readable wire format vs opaque numeric values.
What are the key differences between NodeList and HTMLCollection?
Tests DOM snapshot vs live binding: querySelectorAll returns a static NodeList, getElementsByTagName returns a live HTMLCollection. Strong answers note childNodes is a live NodeList and warn against caching length during DOM mutation.
Explain DOM event capturing and bubbling with addEventListener
Tests DOM event propagation and addEventListener phase selection. Core: capture moves root-to-target, bubble moves target-to-root, useCapture or options.capture sets it. Red flag: saying events only bubble or confusing stopPropagation with preventDefault.
Describe event delegation and implement a single ul click handler in TypeScript
Add one listener to the ul, use event.target plus closest to find the li, and type it as MouseEvent.
Describe the difference between DOMContentLoaded and window.load
This tests critical rendering path knowledge. DOMContentLoaded fires after HTML parsing and deferred scripts, while load waits for all subresources; use the former to bind UI early.
Key differences: type alias vs interface for object shapes
Tests your grasp of TypeScript extensibility and declaration merging. Contrast interfaces' extends and open merging against type aliases' unions, intersections, and primitives; prefer interfaces for public APIs and types for unions or mapped types.
How do you type and guard a string-or-string-array argument?
Tests union typing and runtime narrowing. Annotate as string | string[], then branch with Array.isArray(). Strong answers note typeof returns "object" for arrays and that assertions bypass safety.
Explain the difference between any and unknown, and demonstrate type-safe narrowing
This tests your grasp of TypeScript top types: any disables checking while unknown forces narrowing. A strong answer defines both, accepts unknown, and uses typeof or a type guard before operating. Red flag: saying they are equivalent or relying on as casts.
What is noImplicitAny and why is it best practice?
State that noImplicitAny errors when inference fails, forcing explicit types instead of plain any.
Ambient Module Declarations: Compile-Time Trust Falls
Ambient module declarations are compile-time trust falls: you tell TypeScript the shape of code it cannot see. Use them for untyped npm packages, CSS imports, or CDN scripts.
ES Modules in TypeScript: The Compile-Time Contract
TypeScript ES modules are a compile-time target, not a runtime guarantee. Configure this when targeting modern browsers or Node with native ESM. The footgun is omitting .js extensions in imports, which it requires in ESM output even for .ts source files.
Worker postMessage: The Structured Clone Pipe
Worker postMessage moves data between threads via structured cloning. Use it to offload heavy work without blocking the UI. The message argument is mandatory, so omitting it is an error and you must pass null when there is no data.
Identifying JS Library Structure for TypeScript Types
To type a JS library, first identify its structure: module, global, or UMD. This dictates your .d.ts file's shape. You'll check docs for import/require or <script> usage. The footgun is misidentifying a UMD library, leading to incorrect import types.
Shipping TypeScript Types in package.json
The types field in package.json tells TypeScript where to find your package's type definitions. Use it when publishing a library to enable autocompletion for users. The footgun is putting type dependencies in devDependencies instead of dependencies.
export = : TypeScript's CommonJS Export Syntax
Think of export = as TypeScript's version of module.exports. It replaces a module's entire export with a single value, like a class or function. It's used for compatibility with CommonJS modules. The footgun is mixing it with standard exports.
Module Augmentation: Adding Types to External Libraries
Module augmentation is like monkey-patching for types, letting you add definitions to external modules. Use it to add a user property to Express's Request object.
Modern Bundlers & TypeScript: Transpile, Don't Check
Modern bundlers like Vite prioritize speed by only transpiling TypeScript files, not type-checking them. This enables sub-50ms updates during development. The footgun: your dev server won't report type errors; you must run tsc --noEmit separately.
TypeScript's Module Resolution Strategy
TypeScript's moduleResolution is the compiler's search plan for finding files behind import statements. It's crucial when mixing module types (ESM/CJS) or targeting Node.js vs. the browser. The footgun is assuming the default node works for modern ESM.
MediaRecorder API: Capture Audio and Video in the Browser
The MediaRecorder API is a VCR for your browser, capturing a MediaStream from a camera or screen into a file. Use it for in-browser video recorders or voice memo apps. The footgun: recorded data arrives as Blob objects in an event, not as a direct.
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