What Is TypeScript?

Welcome to the TypeScript course! You know JavaScript, so you also know how easily a small mistake gets into a program: a typo in the name of a property, a number written as text, a variable that holds something other than what you expected. JavaScript doesn't complain. It runs the program, and the mistake shows up later as a strange undefined, a NaN or a crash, often far from the line that caused it. Sometimes it doesn't show up at all, and the program just quietly gives a wrong result.

TypeScript is JavaScript with types. A type says what kind of value something is: a number, a text, true or false, a list of item names, or an object with a name and health. TypeScript knows the type of every value in your program and checks that you use each value correctly. And it does so before the program runs. Here is a hero and one line with a typo:

const hero = { name: "Kira", health: 50 };
console.log(hero.helth);

JavaScript would print undefined and carry on as if nothing happened. TypeScript doesn't run the program at all. Instead, it tells you what is wrong, and where:

main.ts(2,18): error TS2551: Property 'helth' does not exist on type '{ name: string; health: number; }'. Did you mean 'health'?

On line 2, the hero has no property helth. Did you mean health? In this lesson, you'll learn to read messages like this one.

TypeScript was created by Microsoft, and its first version came out in 2012. Today, it's one of the most popular programming languages in the world, and many large JavaScript projects use it. The code editor Visual Studio Code, for example, is written in TypeScript. Programmers like it for two reasons: the types catch mistakes early, and they tell everyone who reads the code what each value is.

TypeScript is built on JavaScript. Everything you learned in the JavaScript course works in TypeScript and is written the same way: console.log, variables, conditions, loops, arrays, functions and objects. TypeScript only adds types. That's why every JavaScript program is also a TypeScript program. TypeScript may just find mistakes in it, or ask you to add a type where it can't work one out by itself.

Web browsers can't run TypeScript, though, only JavaScript. That's why a TypeScript program first goes through a compiler. The compiler checks the types, and then it turns the program into JavaScript: it removes the types, and what's left is ordinary JavaScript, which runs as you know it. Files with TypeScript programs end in .ts instead of .js. Here, your program is in the file main.ts.

On this site, the compiler works right in your browser: it's tsrs, a version of TypeScript 7's compiler made to run in a web page. When you click Run, it first checks your program. If it finds a type error, the program doesn't run at all, and you see the error in red below the output. Only a program without type errors runs, and then it runs just as in the JavaScript course.

What's ahead? First, you'll learn the basic types and how TypeScript works them out by itself, and you'll add types to functions and objects. Then come the features that make TypeScript really strong: values that can be one of several types, data modeled so that impossible combinations can't even be written, generics, which work with any type, and classes. The examples come from a role-playing game: Kira the ranger, her potions, swords and gold, goblins, wolves, a dragon, and quests. In the final project, you'll put it all together into Kira's inventory and quest log, and you'll see how TypeScript finds every place in the program that has to change when you add something new.

But first, let's make sure that JavaScript works here as you know it. The program in the editor is plain JavaScript, without a single type, and yet it's a valid TypeScript program.