Paths/Frontend Engineer/TypeScript Essentials / The Type System
Narrow an Unknown Type
Data from an API is unknown until you check it. Write the type guards that narrow it before it reaches a component.
Validator
⏱ 0:00
IDLE — checks run live as you type commands; submit when done
01Requirements
live checks- File ~/frontend/src/types/guard.ts exists○
- The file exports a type guard for the order○
- The guard checks the shape of the value○
02Walkthrough
1 of 2 revealed- 01
Write the guard signature
A type guard takes an unknown and returns a boolean - but the predicate says the value is an Order when it is true.
echo 'import type { Order } from "./order";\n\nexport function isOrder(value: unknown): value is Order {\n if (typeof value !== "object") return false;\n if (value === null) return false;\n if (!("id" in value)) return false;\n if (!("amountCents" in value)) return false;\n if (typeof value.id !== "string") return false;\n if (typeof value.amountCents !== "number") return false;\n return true;\n}' > ~/frontend/src/types/guard.ts - 1 locked · each failed submit reveals one
03Stuck?
0 of 3 revealedTake a hint without losing the lab — each one points at the thing to look at, not at the answer.
04AI Tutor
guides, never solvesTell me what you're stuck on — I'll nudge, not solve. Which requirement are you looking at?
04Notebook
saved locally in this browserlearner@lab — ubuntu:24.04
Session is disposable
↑/↓ recalls commands · Ctrl+Enter submits · type help for the command list