Codelab: Typed Budget Tracker
Build a real budget tracker on your own machine in plain HTML + TypeScript. Uses the in-browser TS compiler from a CDN — no install, no npm, no build tools.
Step 1 of 8
What you’re building
You’ll build a single-page budget tracker on your own computer:
- A form to add an expense (description, amount, category).
- A list of expenses underneath.
- A live total at the top, plus a per-category breakdown.
The interesting part: it’s written in TypeScript. We’ll use the official TypeScript compiler loaded from a CDN to transpile your code in the browser — no npm install, no tsc, no build tools. Just two files and a tiny local web server.
Tip
In a real production project you would run tsc ahead of time. Browser transpilation is for learning — it’s slower, it ships the whole compiler to the browser, and it skips strict type-checking. Once you’re comfortable, set up a real project with npx tsc --init.