TypeScript, for people who already write JavaScript.

What you are getting

You know how to write JavaScript. That means roughly two thirds of the usual TypeScript tutorial is wasted on you, and the third that matters — describing the shape of data before it exists — tends to get four paragraphs. This course inverts that.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38// A shape, described once.
interface Order {
  id: string;
  customer: { name: string; email?: string };
  lines: readonly { sku: string; quantity: number }[];
  placedAt: Date;
}

// A function whose contract is written down rather than remembered.
function summarise(order: Order): string {
  const units = order.lines.reduce((total, line) => total + line.quantity, 0);
  const contact = order.customer.email ?? 'no email on file';
  const day = order.placedAt.toISOString().slice(0, 10);
  return `${order.id}: ${units} units for ${order.customer.name} (${contact}) on ${day}`;
}

const order: Order = {
  id: 'A-1001',
  customer: { name: 'Ada' },
  lines: [
    { sku: 'desk', quantity: 1 },
    { sku: 'chair', quantity: 4 },
  ],
  placedAt: new Date('2026-01-15T09:30:00Z'),
};

console.log(summarise(order));

// Every one of these is now a compile error rather than a 3am incident:
//
//   order.custmer.name           misspelled property        TS2551
//   order.placedAt.slice(0, 10)  Date has no slice          TS2339
//   order.customer.email.trim()  might not be there         TS18048
//   order.lines.push({ ... })    lines is readonly          TS2339
//   summarise({ id: 'A-2' })     missing properties         TS2345
//
// Open "What this compiles to" below. Not one of those checks costs you a
// single line at run time, because none of the types are there any more.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28// A function whose contract is written down rather than remembered.
function summarise(order) {
    const units = order.lines.reduce((total, line) => total + line.quantity, 0);
    const contact = order.customer.email ?? 'no email on file';
    const day = order.placedAt.toISOString().slice(0, 10);
    return `${order.id}: ${units} units for ${order.customer.name} (${contact}) on ${day}`;
}
const order = {
    id: 'A-1001',
    customer: { name: 'Ada' },
    lines: [
        { sku: 'desk', quantity: 1 },
        { sku: 'chair', quantity: 4 },
    ],
    placedAt: new Date('2026-01-15T09:30:00Z'),
};
console.log(summarise(order));

// Every one of these is now a compile error rather than a 3am incident:
//
//   order.custmer.name           misspelled property        TS2551
//   order.placedAt.slice(0, 10)  Date has no slice          TS2339
//   order.customer.email.trim()  might not be there         TS18048
//   order.lines.push({ ... })    lines is readonly          TS2339
//   summarise({ id: 'A-2' })     missing properties         TS2345
//
// Open "What this compiles to" below. Not one of those checks costs you a
// single line at run time, because none of the types are there any more.

How this course is different from the last two

The OOP and algorithms courses could run every sample in your browser directly, because browsers run JavaScript. Browsers do not run TypeScript, and shipping a compiler to this page would mean several megabytes of download for a course that promises to work offline.

So the arrangement here is different, and better. Every sample is compiled by the real TypeScript compiler when this site is built. What you press Run on is the JavaScript that compiler produced from the exact source you are reading. And because the compiler is involved at build time, the course can do something the other two could not:

How to work through it

The order matters in one place. Lessons 03 to 05 are a single argument — shapes, then unions, then how the compiler reads your if statements — and unions feel arbitrary until narrowing explains them. Read those three together.

1. Read with this page in one window and a scratch.ts file in the other. Every lesson ends with exercises meant for that file.
2. Run the panels. When a counter-example surprises you, read the compiler's message rather than my prose about it — the message is the primary source.
3. Keep npx tsc --noEmit scratch.ts in a terminal. Your editor is doing the same thing continuously, but running it yourself once makes the relationship obvious.
4. Skip lesson 17 on a first pass if you want to. It is the deep end and it says so.

What this does not cover

React, Vue, Node APIs, bundler configuration, decorators, and the details of publishing a typed package. Those are all worth learning and none of them are TypeScript — they are things you use TypeScript with. Lesson 18 covers enough configuration to set up a real project and stops there.

There is also no coverage of JavaScript itself. If this, prototypes, closures or async are shaky, the OOP course is the better starting point, because TypeScript will not make an unfamiliar language clearer.

What this is, honestly

A course written to be read offline. No account, no backend, no analytics, no network request of any kind at read time: the fonts are inlined into the stylesheet and the syntax highlighter is a few hundred lines in assets/js/highlight.js. Your progress and anything you type into a panel live in this browser's localStorage under the ts. prefix and nowhere else.

The one dependency is at build time. Producing this site requires the TypeScript compiler, because checking the samples honestly is the entire point. Reading it requires nothing.