Write a typed async fetchUser with error handling

WHAT THIS TESTS: This question probes three distinct skills that separate mid-level from senior TypeScript engineers. First, it checks whether you know the fetch API resolution semantics: fetch promises resolve on HTTP error status codes like 404 or 500, and only reject on network failures. Second, it tests whether you can correctly type an async function return value as Promise<User> rather than just User. Third, it reveals whether you treat TypeScript types as runtime guarantees or compile-time hints, since JSON parsing returns any and you must explicitly handle error states.

A GOOD ANSWER COVERS: A strong implementation hits four points in order. First, construct the URL with template literals and call fetch with it. Second, check response.ok and throw a descriptive Error if it is false, because fetch does not auto-reject on 4xx or 5xx status codes. Third, call await response.json() and return the result, relying on the Promise<User> return type annotation for downstream type safety. Fourth, optionally note that json() itself returns a promise and must be awaited, and that the function signature should explicitly declare Promise<User> so callers know it is async.

COMMON WRONG ANSWERS: The most frequent red flag is skipping the ok check and assuming fetch throws on non-200 responses. Another mistake is writing return response.json() without await, which technically returns Promise<Promise<User>> and can confuse callers. Some candidates omit the Promise<User> return type entirely, weakening the contract. A subtler error is claiming the returned JSON is guaranteed to match the User interface at runtime; TypeScript does not validate shapes during JSON parsing, so a runtime check or schema validation is needed for true safety.

LIKELY FOLLOW-UPS: Interviewers often ask how you would validate the JSON shape at runtime, leading to discussions about Zod, io-ts, or manual guards. They may also ask how to abort an in-flight request, prompting the AbortController pattern. Another common extension is handling transient 5xx errors with exponential backoff, or asking how you would type a generic fetch wrapper that accepts any response interface.

ONE CONCRETE EXAMPLE: Here is a minimal correct implementation. async function fetchUser(id: number): Promise<User> { const response = await fetch("/api/users/" + id); if (!response.ok) { throw new Error("HTTP error: " + response.status); } return await response.json(); } This satisfies all requirements: it is async, it types the return as Promise<User>, it checks response.ok before parsing, and it throws on unsuccessful HTTP status codes.

Source: developer.mozilla.org