Module · Frontend Engineer
TypeScript Essentials
Model the data at the edges, let the compiler catch the rest, and keep the build fast.
TOPIC 01
The Type System
Describe your shapes once and let the compiler do the checking for you.
What you'll practice
- Model the Domain — guided · beginner
- Narrow an Unknown Type — practice · intermediate
A command you'll meet
cat ~/frontend/src/types/order.tsTypes are not validation, but they are the first line of defence. Open the task below for the full walkthrough.
Hands-On Tasks in This Topic (2)
Model the Domain
The shape of an order should exist in one place. Write the types the whole application shares.
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.
TOPIC 02
Project & Tooling
The compiler configuration and the scripts that make the checks automatic.
What you'll practice
- Configure the Compiler — practice · intermediate
- Wire the Scripts — guided · beginner
A command you'll meet
cat ~/frontend/tsconfig.jsonStrict mode is not a style preference - it is a different language. Open the task below for the full walkthrough.
Hands-On Tasks in This Topic (2)
Configure the Compiler
The compiler settings decide which bugs reach the browser. Turn on the strict options and the path aliases the project uses.
Wire the Scripts
If the checks are not in package.json, nobody runs them. Write the scripts that make typecheck, lint, test and build one command each.