TypeScript &amp; Web APIs

Implement IntersectionObserver in TypeScript for lazy-loading images

Tests precise DOM typing and observer lifecycle. A strong answer types the callback as receiving IntersectionObserverEntry[], narrows entry.target to HTMLImageElement, swaps data-src to src, and calls unobserve.

Write a generic TypeScript handler for mixed form inputs?

Tests TypeScript DOM narrowing. Strong answer: union-type ChangeEvent, narrow target with instanceof or tag checks, branch on element.type to read .checked for checkboxes or .value otherwise. Red flag: casting to any or assuming all inputs use .value.

How do you wrap a callback-based API into a Promise?

This tests Promise constructor mechanics and callback migration. A strong answer returns a new Promise, calls the legacy function, maps success to resolve and errors to reject.

intermediate1 min read

Promise .catch() versus async/await try...catch

.catch() handles rejection for all preceding chain steps and reads functionally; try/catch reads synchronously and can scope errors per await, but only catches awaited rejections.

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.

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 would you prevent search-as-you-type race conditions with AbortController?

Abort the previous request before each new keystroke, pass the fresh signal into fetch, and ignore the AbortError.

Implement inSequence(tasks) to execute promise-returning functions sequentially

Tests async/await control flow versus Promise.all parallelism. A strong answer uses a for-of loop with await inside an async function, accumulates results in order, and stops cleanly on rejection. Red flag: suggesting Promise.all or forEach with await.

Write a fetch call and log JSON from the Response

This tests async HTTP literacy and fetch's two-stage promise resolution. A strong answer awaits fetch, then awaits response.json(), logs result, and notes fetch does not throw on 4xx/5xx.

How would you modify fetch to handle HTTP error statuses?

Verify response.ok in then and throw if false, then catch network failures separately.

Write a createUser function that POSTs JSON via fetch

Precise fetch configuration for JSON POST requests. A strong answer names method POST, headers Content-Type application/json, and body JSON.stringify(data) with return typing. Red flag: passing the raw object as body or omitting headers.

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

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.

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 cancel pending fetches using AbortController?

Keep one AbortController, abort before each fetch, pass its signal, and swallow AbortError.

When does fetch trigger a CORS preflight, and what POST is complex?

Tests whether you know the simple-request boundary. A strong answer names the three safe POST content-types and gives a cross-origin POST with application/json plus a custom header like Authorization.

Download a large file via fetch and track ReadableStream progress

It tests streaming I/O and backpressure beyond Promise-based fetch. Acquire a reader from response.body, loop read() until done, sum chunk lengths against Content-Length, and emit progress.

Refactor a function using generics to accept any array type

It tests generic type parameters for preserving element types through a function boundary. Answer: declare T, accept T[], return T, and let the compiler infer the element type from the call site.