More in Frontend Dev — page 19
How do you type a function with string and number overloads?
Tests if you know overloads are public API and the implementation uses a union. Answer: write process(string):string and process(number):number overloads, then implement with string|number and narrow. Red flag: exposing only the implementation signature.
Create a Person class using TypeScript parameter properties
This tests TypeScript parameter properties: constructor access modifiers auto-declare and initialize fields. A strong answer gives class Person { constructor(public name: string, private age: number) {} } and notes it removes manual this.name = name…
Type alias for a function with optional param and default value
Tests whether you know function type expressions cannot encode default values. A great answer writes (s: string, n?: number) => boolean, explains defaults are implementation-only, and notes parameter names are required.
How would you model fetchItem's return type with generics and conditional types?
WHAT IT TESTS: linking a generic boolean flag to a conditional return type. ANSWER OUTLINE: define base and extended Item, return T extends true ? ExtendedItem : BaseItem, and overload the plain boolean case.
Build a typesafe ApiRoute type using template literal types
Tests type-level string composition with template literals. Good answer: define a Resource union, interpolate it into /api/v1/ paths, then union with the /{id} variant. Red flag: suggesting runtime regex or plain string instead of literal types.
How do you type a GeoJSON Coordinate tuple and LineString array?
Tests fixed-length tuple typing versus flexible arrays in TypeScript. A strong answer uses [number, number] for Coordinate, then Coordinate[] for LineString, and explains why number[] loses length safety. Red flag: using number[] or objects instead of tuples.
How would you combine BaseRecord and PostContent into a Post type?
This tests TypeScript type composition for API resources. A strong answer proposes an intersection type or interface extends, then discusses overlap conflicts and the type versus interface trade-off.
Write a generic ApiResponse<T> type with success and error states
WHAT IT TESTS: modeling exclusive states with discriminated unions and generics. ANSWER OUTLINE: define two interfaces sharing a status literal, one with data: T and the other with error: { code; message; }.
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.
How do you type a function with two possible response shapes?
This checks TypeScript union types for API responses. Define a union of Product[] and a message object, use a type guard to narrow it at runtime, and return that.
Define a User object shape: interface vs type alias?
Tests structural typing and API contracts. Good answer: interface for API objects because it merges; type alias for unions. Forced: declaration merging needs interface; discriminated unions need type. Red flag: claiming performance differences.
Explain Shadow DOM, encapsulation, and event propagation
Tests Web Components encapsulation and event retargeting. A strong answer covers shadow root/host/boundary, CSS scoping, open versus closed modes, and retargeting where events appear to come from the host element.
Offload CPU-intensive work to a Web Worker and explain communication.
This tests main-thread blocking and worker messaging. A strong answer covers: new Worker(url), moving logic to a worker file, sending data via postMessage(), and receiving results via onmessage. A red flag is suggesting DOM use or shared memory from workers.
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
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.