Exercise path · TypeScript
10 TypeScript exercises, in order
From your first line to a complete program you assembled yourself. Each exercise introduces exactly one new idea, runs in this tab, and tells you in plain language what happened.
How the path works
You never start from a blank editor. Every exercise hands you a program that already runs and asks you to change or add one thing, so the first success is minutes away and the last exercise is a program you can read top to bottom and explain. The ideas arrive in this order: output, variables, arithmetic, types, conditions, functions, strings and formatting, arrays, object types, a complete program.
Run is the check. There is no separate submit button: press Run, and the output is compared with what the exercise asked for. When it is not right, the feedback is a sentence about what happened — the line that differed, or what the error means — rather than a verdict. Hints come one at a time, and the answer opens only after you have run your code at least once, because reading the answer first is how you learn nothing.
Your finished exercises and the code you last had in the editor are saved in this browser, so a half-done exercise is still there tomorrow. Nothing is uploaded and there is no account.
The exercises
- Checked, Then RunA five-line card with your own name on it, printed by TypeScript you ran yourself once the compiler had checked it.New idea: console.log() puts text on the screen
- Luggage TagA luggage tag carrying your own name on three of its lines, all three fed by one value you typed once at the top.New idea: const gives a value a name you can use again
- Egg BoxesA farm report that works out its own egg count from the hens, then the full boxes that count fills and the eggs left over.New idea: numbers do arithmetic, and Math.floor and % split a count into whole groups and a remainder
- The Ticket MachineA bus ticket summary that adds up the riders and works out the fare, once you have fixed the one value the compiler refused to accept.New idea: a type annotation such as : number says what a name must hold, and a value that does not match stops the program before it runs
- The Fern CheckA plant check that compares today's soil moisture with a dry mark, prints the true-or-false answer, and ends on one of two instructions.New idea: a boolean is true or false, and if/else runs one of two blocks depending on it
- Parcel PostageA postage price list where every price comes from one function, called once per parcel with a weight and a rate.New idea: a function takes typed parameters and returns a typed result
- The League TableA league table whose team names, games played and points all sit in straight columns, every row built by the one function you rewrote.New idea: template literals build text with values inside it
- The Number 12 BusA bus route card with one line for every stop in the array, and a footer that counts the stops without being told how many there are.New idea: an array type such as string[] holds several values of one type, and for...of walks through them
- The Departure BoardA station departure board showing the destination, platform and wait for every train, built from objects that all match one Train type.New idea: an object type lists the properties an object must have, and the compiler checks every object against it
- The Bike Shop ReceiptA printed bike repair receipt: the shop name, three charges in straight columns, a subtotal, a workshop charge the program works out itself, a total, and the notes at the bottom.New idea: assembling a complete program out of parts you already know
After the path
The TypeScript lessons go deeper on every idea the exercises introduced, and the practice problems are the next step up: graded against hidden tests, and a genuine challenge. Everything you can practise TypeScript with on this site is gathered on the TypeScript practice hub. The same path also exists in Python, JavaScript, Java, C++, C, C#, Go, PHP, Ruby, SQL, R and Bash & the Shell.