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