More in Frontend Dev — page 17
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.
Create a User type alias from a function return type
WHAT IT TESTS: TypeScript type-space introspection. ANSWER OUTLINE: Use typeof to grab the function type, then ReturnType to extract the return object shape. RED FLAG: Manually copying the object literal or confusing value-space and type-space typeof.
Describe a common use for Partial<T> and explain Required<T>
WHAT IT TESTS: Optional versus mandatory properties in TypeScript. ANSWER OUTLINE: Partial fits PATCH updates where only some fields arrive; Required strips optionality to enforce all properties. RED FLAG: Confusing with Pick or saying Partial allows nulls.
Explain Pick versus Omit with User examples
WHAT IT TESTS: Explicit selection versus type subtraction. ANSWER OUTLINE: Pick keeps listed keys; Omit drops them. Show User with id, name, email; derive Pick<User,"name"|"email"> and Omit<User,"id">. RED FLAG: Confusing them or calling one strictly safer.
Implement a generic PickByType<T, U> utility type
Tests mapped-type key filtering via conditional types and as remapping. Great answer: [K in keyof T as T[K] extends U ? K : never]: T[K]. Red flag: mapping all keys and setting values to never, which preserves keys instead of removing them.
Implement MyReturnType<T> using conditional types and infer
This tests type-level pattern matching with conditional types and infer. Answer uses T extends (...args: any[]) => infer R ? R : never, noting infer captures return slot, non-functions yield never. Red flag: conflating runtime values with compile-time types.
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
WHAT IT TESTS: Binding a generic class parameter so methods share one consistent type. ANSWER OUTLINE: Write class State<T> with private T, constructor(T), getState(): T, and setState(T). RED FLAG: Using any instead of T, erasing type safety.
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]. RED FLAG: Using any or string for the key, which erases type safety and allows invalid properties.
Explain generic constraints and provide a length-constrained generic example
WHAT IT TESTS: Your grasp of bounding generics to shapes without losing type safety. ANSWER OUTLINE: Explain that extends requires properties; show T extends { length: number }; give a generic function signature. RED FLAG: Using any or dropping extends.
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.
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.
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.
How do you cancel pending fetches using AbortController?
WHAT IT TESTS: Async cancellation and race-condition prevention in UI streams. ANSWER OUTLINE: Keep one AbortController, abort before each fetch, pass its signal, and swallow AbortError. RED FLAG: Forgetting prior abort or leaving rejections uncaught.
Create a generic fetchJson wrapper with typed response and error handling
WHAT IT TESTS: marrying TypeScript generics to fetch for typed responses and runtime error handling. ANSWER OUTLINE: generic T parameter, optional RequestInit, throw if !res.ok, return res.json() as Promise<T>. RED FLAG: using any or omitting the ok check.
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.