Intermediate everything in Frontend Dev, page 10
What are localStorage's capacity and synchronous blocking limitations?
This tests Web Storage API trade-offs and main-thread blocking. A strong answer notes synchronous calls block the main thread; cites a finite per-origin quota; and names IndexedDB for async needs. Red flag: calling it a database or ignoring UI freezes.
Implement the built-in NonNullable<T> utility type from scratch
Tests conditional type distribution and union filtering. A strong answer uses distributive conditional types to map null and undefined to never while preserving other union members.
Implement MyParameters<T> using conditional types and infer
Tests if you can extract parameter types with infer. A strong answer matches T against a callable signature, uses infer to bind parameters into a tuple, and defaults to never for non-functions. Red flag: using any or indexing without inference.
Create TerminalStatus from Status using Exclude or Extract
This tests conditional type mechanics and whitelist versus blacklist thinking. Extract selects matches by assignability; Exclude removes others. Prefer Extract when the desired set is explicit. Red flag: claiming they are equivalent or only knowing Exclude.
Write a generic MakeOptional<T> mapped type without using Partial
This tests mapped type mechanics and the optionality modifier. A strong answer iterates over keyof T, adds the ? modifier, and preserves the original type via indexed access. A red flag is suggesting Object.assign or saying you would just use Partial.
Write a generic fetchJSON<T> wrapper and explain its type safety benefits
Tests preserving type info across async boundaries via generics. Outline: write fetchJSON<T> returning Promise<T>, note response.json() is any, and show T lets callers lock in the response shape for compile-time checks.
Create a generic State class with getState and setState
Write class State<T> with private T, constructor(T), getState(): T, and setState(T).
Write a generic type-safe getProperty using keyof
Command of TypeScript generics and keyof for compile-time property access. Declare generic T, accept key as keyof T, and return T[K].
Create a generic fetchJson wrapper with typed response and error handling
Generic T parameter, optional RequestInit, throw if !res.ok, return res.json() as Promise<T>.
How do you handle an API returning 200 for success and failure?
This tests TypeScript narrowing and runtime validation of ambiguous 200 responses. A strong answer uses a discriminated union, narrows with a type guard, and validates shape before branching. Red flag: casting the body with as and skipping runtime checks.
How do you include a JWT in a fetch request?
Tests knowledge of the fetch options object and Bearer scheme syntax. A strong answer sets headers: { Authorization: Bearer <token> } as the second argument and notes fetch does not auto-attach tokens. Red flag: omitting Bearer or hardcoding secrets.
Write a typed async fetchUser with error handling
Tests promise-based fetch plus TypeScript return-type contracts. A strong answer checks response.ok before response.json() and types the return as Promise<User>. A red flag is swallowing 4xx/5xx errors silently.
How do you type an async function return in TypeScript?
This tests if you know async functions always return Promise<T>. A great answer: annotate Promise<User>, return User from the body, and note TypeScript implicitly wraps it. A red flag is omitting Promise and typing the return as just User.
How do you fetch from three APIs using Promise.all versus allSettled?
Promise.all parallelizes but rejects on first failure. allSettled returns every outcome with status, value, and reason.
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 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.
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.
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.
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.
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.
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