Congratulations!

Congratulations, your program works, and you've reached the end of the TypeScript course! It describes Kira, lists her items, uses them, looks for one she doesn't have, goes through her quests and makes a report. And before it ran, TypeScript checked every line of it.

One last improvement. Kira finds a magic scroll, a new kind of item: { kind: "scroll"; name: string; spell: string }. In plain JavaScript, you'd add the scroll and hope that you remembered every place that works with items. TypeScript finds them for you. Once the type Scroll is in the union Item and the scroll is in Kira's inventory, it reports both functions with a switch:

main.ts(45,19): error TS2322: Type 'Scroll' is not assignable to type 'never'.
main.ts(51,43): error TS2366: Function lacks ending return statement and return type does not include 'undefined'.

The first error is the never check in describeItem, which names the type that has no case. The second is useItem: it has no never check, but its return type string says that it must return a text for every item. Add the case to both, and the program works again. In a big program, this is one of TypeScript's greatest strengths: change the data, and it shows you every place that needs to know about it.

What you've learned. Look at how each lesson of the course found its place in your program:

  • Introduction to TypeScript: TypeScript checks the program before it runs, and its messages say what's wrong and on which line. Then the types are removed, and the JavaScript that's left runs.
  • Basic Types: most variables need no annotation; TypeScript infers that name in the loop is a string. You write types where they matter.
  • Functions have types for their parameters and results: describeHero(hero: Hero): string. The return type also found the missing case in useItem.
  • Object Types: interface Hero describes Kira, with a read-only name and an optional weapon.
  • Unions and Narrowing: HeroClass allows only three classes, find may return undefined, and the check item === undefined takes care of the dragon egg.
  • Modeling Data: items and quests are discriminated unions. switch narrows them, the exhaustiveness check with never guards describeItem, and Record holds the counts.
  • Generics: findByName<T extends { name: string }> finds anything with a name, and the result keeps its type.
  • Classes aren't in this program: plain objects and functions were enough. A class is handy when data and the methods that change them belong together, for example if every monster had its own attack().
  • Utility Types: Quest["status"] takes the statuses from Quest, so they're written in one place only.

TypeScript on your own computer. Here, your browser checked and ran the programs. On your own computer, you'll need three things:

  • An editor. Visual Studio Code is free and understands TypeScript without any setup. It underlines type errors in red as you type, and when you point at a name with the mouse, it shows its type. You see your mistakes before you even save the file.
  • Node.js, which runs JavaScript outside the browser. Download the LTS version from nodejs.org and install it. It comes with the commands node, npm and npx, which you type in a terminal (on Windows, in the Command Prompt; on a Mac, in the Terminal app).
  • TypeScript. Create a folder for your project, for example adventure, go to it in the terminal with cd, and install TypeScript into it:
    npm init -y
    npm install --save-dev typescript
    The first command creates the file package.json, which describes the project. The second one downloads TypeScript (version 7, the same version that checked your programs here) into the folder node_modules.

Save your program in the folder as main.ts. You check it with the TypeScript compiler, tsc:

npx tsc --noEmit main.ts

When everything is fine, it prints nothing. Otherwise, it prints the messages you know from here, in color and with the line of code under each message. Only the place is written a little differently: main.ts:2:1 - error TS2322: … means line 2, column 1. --noEmit means “only check”: without it, tsc would also create main.js, your program as JavaScript without the types. And you run the program with Node.js:

node main.ts

Node.js 24 and newer can run a .ts file directly: it removes the types and runs the JavaScript that's left. But it doesn't check them! A program with a type error runs anyway, just as JavaScript would. So check with tsc first, then run with node. And Node.js can only remove types. TypeScript features that would have to be turned into new JavaScript code, such as enum, make it stop with TypeScript enum is not supported in strip-only mode. That's why this course didn't use them, and why this site didn't allow them either.

A bigger project keeps its settings in a file, tsconfig.json. npx tsc --init creates it with recommended settings, and from then on, you check the whole project with npx tsc --noEmit, without the file's name. (With a file's name, tsc would ignore the settings, and it tells you so with an error.) These settings are even a bit stricter than the ones here. For example, with noUncheckedIndexedAccess, kira.inventory[0] has the type Item | undefined, because the array might be empty.

What's next. You now know the most important parts of TypeScript, and they're enough for programs of your own. Here are some ideas for what to learn next:

  • Keep improving your program. A shop where Kira buys items for her gold, a monster she fights with the sword in her hand, a level-up when she finishes enough quests. You learn the most by solving your own problems, and TypeScript will tell you what each change breaks.
  • The TypeScript Handbook at typescriptlang.org/docs explains everything from this course in more detail, and much more (in English). On the same site, the Playground lets you try TypeScript in the browser and shows you the JavaScript it turns into.
  • Web pages in TypeScript. The page and its elements from the JavaScript course's lesson on web pages have types in TypeScript too: document.querySelector("#list") gives an element or null, and TypeScript makes you check it, just like the dragon egg.
  • React, a library for building web apps out of components. Many React projects are written in TypeScript, and a React course is coming to this site later.

And if you'd like to try a different language, the Python, C and C++ courses are waiting for you.

Instructions

Under Key, write the type Scroll with kind: "scroll", a name and spell (a text), and add it to the union Item. At the end of Kira's inventory, add { kind: "scroll", name: "Scroll of Light", spell: "Light" }. Run the program and fix both errors that TypeScript reports: in describeItem, the scroll gives Scroll of Light (spell: Light), and in useItem, Kira casts Light. The program then prints everything from the beginning of the lesson:

Kira the ranger, level 3, health 34/50, gold 120
Inventory:
- Healing Potion (heals 20)
- Silver Sword (damage 12)
- Old Key (opens the crypt)
- Scroll of Light (spell: Light)
Kira drinks Healing Potion: health 50/50
Kira equips Silver Sword
Kira has no Dragon Egg
Quests:
[done] Wolves in the Woods: +50 gold
[open] The Lost Crown
[failed] Save the Miller: the mill burned down
[done] The Goblin Bridge: +30 gold
Done: 2, open: 1, failed: 1
Kira the ranger, level 3, health 50/50, gold 200

Start programming for free

By signing up, you agree to the Terms of Service and Privacy Policy.

Or sign up with:

7/7