Paths/Frontend Engineer/TypeScript Essentials / The Type System
Model the Domain
The shape of an order should exist in one place. Write the types the whole application shares.
Validator
IDLE — checks run live as you type commands; submit when done
01Requirements
live checks- Directory ~/frontend/src/types exists○
- File ~/frontend/src/types/order.ts exists○
- The file exports an interface for the order○
- The file exports the status as a union of string literals○
02Walkthrough
4 steps- 01
Create the types directory
Shared types live in one folder - a feature folder per domain if it grows.
mkdir -p ~/frontend/src/types - 02
Write the order interface
readonly means the shape cannot change under you. It is the cheapest immutability you will ever get.
echo 'export interface Order {\n readonly id: string;\n readonly customerId: string;\n readonly amountCents: number;\n readonly placedAt: string;\n}' > ~/frontend/src/types/order.ts - 03
Add the status union
A const array plus the indexed access type gives you a closed set the compiler checks - and one list to keep in sync.
echo '\n\nexport const ORDER_STATUSES = ["pending", "paid", "shipped", "cancelled"] as const;\n\nexport type OrderStatus = (typeof ORDER_STATUSES)[number];' >> ~/frontend/src/types/order.ts - 04
Verify and submit
cat the file, then submit for validation.
cat ~/frontend/src/types/order.ts
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