Command Palette

Search for a command to run...

Hectal
Phase 0Beginner1 of 18 in TypeScript

Start Here: Why TypeScript

What TypeScript is, the bugs it catches before your code runs, how the compiler checks and then erases types, TypeScript 7, and your first project.

This phase assumes you know some JavaScript and nothing about TypeScript. You'll see the problem TypeScript was built to solve: in JavaScript, many mistakes only show up when the code runs, often in front of a user. TypeScript finds them while you type.

You'll learn how the compiler works (it checks your code, then removes the types and leaves plain JavaScript), what changed in TypeScript 6 and 7, and how to set up a real project on your own computer.

Every example on these pages is checked by the real TypeScript compiler in your browser. Change the code: the Types panel shows exactly what tsc would say, and the Console shows what the code prints when it runs.

0/4 · 0%
4 topics ~80 min 11 code blocks & diagrams
Start with the first topic
1
0.1

What TypeScript Is and Why It Exists

TypeScript is JavaScript plus types: you write down what kind of value each thing holds, and a checker reads your code and points out mistakes before the code ever runs.

20 min 3 code practice

2
0.2

How TypeScript Works: Check, Then Erase

The TypeScript compiler, tsc, does two separate jobs: it type-checks your code and reports errors, and it emits plain JavaScript with every type removed. Types never exist while the program runs.

20 min 3 code practice

3
0.3

TypeScript Today: Versions 6 and 7

TypeScript 7.0 (July 2026) is the compiler rewritten in Go: the same type checking, about ten times faster. TypeScript 6.0 was the last JavaScript-based version and switched on modern defaults, such as strict mode, that 7.0 keeps.

19 min 3 code practice

4
0.4

Your First TypeScript Project

Install TypeScript in a folder with npm, create a tsconfig.json with tsc --init, write a .ts file, then check it with tsc and run it with Node, which can run TypeScript files directly by stripping the types.

21 min 2 code practice

Practise this phase

Hands-on exercises: write the code, see your page live, and press Check to have it tested automatically.

1

Fix the Value, Not the Type

The variable age promises to hold a number, but it was given text. The Types panel shows the error, and the console shows the bug it causes: "12" + 1 is "121".

Beginner
2

Annotate a Parameter

Strict mode reports the parameter word because it has no type. Add a type annotation so shout only accepts text.

Beginner
3

Catch the Typos

This program should print Wings of Fire by A. P. J. Abdul Kalam, but it prints undefined by undefined. TypeScript already knows why: read the Types panel.

Beginner
4

Fix the Price Bug Where the Data Enters

addTax correctly promises a number, but fromInput is text from a form field. Make the program type-check and print 118.

Beginner
5

A Small Typed Bill

Add types to both functions: total takes an array of numbers and returns a number; formatRupees takes a number and returns a string.

Beginner