Interview questions in TypeScript & Web APIs, page 2
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.
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 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.
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.
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 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.
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.
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…
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.
Why does this lose context in class callbacks and two TypeScript fixes?
This tests runtime this binding. Explain that regular functions get this from the call site, so passing a method strips its object context. Fix with an arrow property or constructor bind. Red flag: var self = this or claiming TypeScript changes binding.
What is the purpose of the implements keyword?
Tests compile-time contract enforcement in TypeScript. Explain that implements checks class-to-interface compatibility at compile time with no runtime overhead, then code a CacheService with get and set methods.
Difference between abstract class and interface, with scenario
Tests if you know when shared state or constructor logic justifies single inheritance. A strong answer contrasts erased interfaces with base classes, then names a scenario requiring enforced initialization.
What is the polymorphic this type in TypeScript?
This tests polymorphic this for type-safe fluent APIs. A strong answer defines this as the current instance type, implements CSSBuilder methods that return this for chaining, and notes subclass preservation.
Implementing the Singleton pattern in TypeScript
Private constructor blocks new, a static private instance field caches it, static getInstance lazily creates and returns the one instance.
What is getElementById's return type and the check needed for .value?
Tests strict null awareness: getElementById returns HTMLElement or null, so null-check first. Strong answers note HTMLElement lacks .value, requiring narrowing to HTMLInputElement. Red flag: assuming a valid element is always returned.
What is the click event's type and how to reference the button?
Handler receives a MouseEvent. Use event.currentTarget for the attached button, since event.target may be a nested child.
Strategies to type querySelector results as HTMLInputElement
Tests whether you know safe ways to narrow querySelector's Element or null to HTMLInputElement. A strong answer compares type assertions with generic querySelector calls, and insists on null checks. Red flag: asserting without runtime validation.
How do you type-safely check an LI click and read data-id?
Tests TypeScript narrowing with DOM event delegation. A strong answer uses closest to walk up from event.target, checks result with instanceof HTMLLIElement, then reads dataset.id. Red flag: casting event.target directly without handling nested child elements.
Programmatically create and append a div in TypeScript
Tests TypeScript DOM typing and safe element creation. Strong answers name HTMLDivElement and Document, use createElement plus classList.add and textContent, then append. Red flag: innerHTML for text or avoiding specific types.
How would you use DocumentFragment to optimize adding 1,000 list items?
Tests DOM reflow/repaint costs and off-DOM batching. A strong answer: create a DocumentFragment, build the 1,000 nodes off-DOM, then append once to trigger a single reflow. Red flag: claiming it saves memory or confusing it with innerHTML batching.
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