More in TypeScript & Web APIs — page 7
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
WHAT IT TESTS: Event bubbling and parent-level listener efficiency. ANSWER OUTLINE: Add one listener to the ul, use event.target plus closest to find the li, and type it as MouseEvent. RED FLAG: Attaching listeners to each li or leaving event.target untyped.
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. RED FLAG: Defaulting to load, which stalls interactivity until images finish.
How do you select by ID and class, and what is returned?
This tests basic DOM API knowledge and awareness of live collections. Use document.getElementById for IDs and document.getElementsByClassName for classes, which returns a live HTMLCollection. A red flag is calling the result a static Array or NodeList.
What happens when you declare var globally versus let or const?
WHAT IT TESTS: knowledge that var creates a Window property while let and const do not. A good answer notes var adds window.x, let/const do not pollute the global object, yet both are globally scoped. RED FLAG: claiming let/const lack global scope.
What is the fundamental difference between window and document?
WHAT IT TESTS: Your mental model of the browser runtime layers. ANSWER OUTLINE: Window is the browser tab and global scope; document is the object-oriented DOM representation of the loaded page.
What is a type predicate? Write a custom type guard for User.
Tests if you know a type predicate is a compile-time narrowing hint requiring runtime validation. Great answers define parameter is Type, validate every User property, and demonstrate narrowing. Red flag: omitting runtime checks or using as casting.
Create a generic getProperty using generics and keyof
Whether you can constrain a generic key with keyof and return the exact property type. Use T for the object and K extends keyof T for the key, returning T[K]. RED FLAG: Using string for the key allows invalid properties and erases the return type.
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?
WHAT IT TESTS: Your grasp of TypeScript's silent any fallback and safety loss. ANSWER OUTLINE: State that noImplicitAny errors when inference fails, forcing explicit types instead of plain any. RED FLAG: Calling it stylistic or ignoring runtime risks.
Explain what TypeScript's type inference is and show an inferred variable declaration
This tests whether you understand TypeScript deduces types without annotations. A strong answer defines inference as deriving types from values and gives an example like let x = 3 inferring number. A red flag is claiming explicit types are required.
Declare a string name and an array of lucky numbers in TypeScript
WHAT IT TESTS: Primitive and array type annotations in TypeScript. ANSWER OUTLINE: Declare the name with a lowercase string type and the lucky numbers as number[] or Array<number>. RED FLAG: Using uppercase String or Number, or omitting the array type.
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.
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.
TypeScript Namespaces: The Original Module System
TypeScript namespaces bundle related code under a single global name, preventing name collisions. They are useful for older projects or UMD library types, but the footgun is using them in modern apps; prefer standard ES modules.
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.