Validate API data at the boundary
React + TypeScript Interview Core · TypeScript State Modeling
Parse a transfer response into trusted domain types and return typed errors for malformed data.
Prompt
Validate API data at the boundary
This is a hands-on rep. Attempt the drill before reading the model answer, then narrate the tradeoffs as if an interviewer is watching.
Static types do not protect you from JSON that arrived over the network.
What to ground before answering
Parse a transfer response into trusted domain types and return typed errors for malformed data.
Focus vocabulary: runtime validation, API, domain types.
The useful mental model is not to memorize a perfect answer. It is to explain what owns the data, what can fail, what the user sees, and what test would prove the behavior.
Validate transfer API data at the boundary
Make the behavior executable before comparing against the model answer.
type ParseResult =
| { ok: true; value: { id: string; amountMinor: string; status: 'pending' | 'reconciled' } }
| { ok: false; error: string };
function parseTransfer(input: unknown): ParseResult {
// TODO: trust nothing from JSON until it is checked.
return { ok: false, error: 'not implemented' };
}Interview explanation prompt
- What problem is this practice item really testing?
- What state or contract boundary must be explicit?
- What edge case would cause a production regression?
- What would you test first?
- How would you explain the tradeoff in two minutes?
Self-grade
- Strong answer handles the edge cases before polishing syntax.
- Strong answer explains why the chosen type or function boundary prevents bugs.
- Weak answer passes only the happy path or hides uncertainty in booleans and nullable fields.
Model Answer
function parseTransfer(input: unknown): ParseResult {
if (!input || typeof input !== 'object') return { ok: false, error: 'not an object' };
const value = input as Record<string, unknown>;
if (typeof value.id !== 'string' || value.id.length === 0) return { ok: false, error: 'bad id' };
if (typeof value.amountMinor !== 'string' || !/^\\d+$/.test(value.amountMinor)) {
return { ok: false, error: 'bad amount' };
}
if (value.status !== 'pending' && value.status !== 'reconciled') {
return { ok: false, error: 'bad status' };
}
return { ok: true, value: { id: value.id, amountMinor: value.amountMinor, status: value.status } };
}
Recall before moving on
- What is the one-sentence answer for "Validate API data at the boundary"?
- Which real experience from PR TIMES, React/TypeScript migration, or systems work supports it?
- What edge case would you volunteer before the interviewer asks?
- What is the smallest test or artifact that proves the design works?