Start Here: Your TypeScript Starter Kit

A friendly orientation — what TypeScript is, what you should know first, and a plain-English cheat-sheet for every symbol you're about to meet.

Welcome! 👋 You're about to learn TypeScript — the tool that catches your bugs before your users ever see them.

The most important thing to know up front: TypeScript is not a brand-new language. It's regular JavaScript with a safety layer added on top. Every line of JavaScript you already know still works exactly the same. TypeScript just lets you describe what kind of data your code expects — and it warns you, right in your editor, the moment something doesn't line up.

One prerequisite: you should be comfortable with JavaScript basics — variables, functions, arrays, objects, and arrow functions (=>). If any of those feel shaky, do the JavaScript Fundamentals track first, then come back. This course focuses on the type layer, so we spend our energy on what's genuinely new — not on re-teaching JavaScript.

Here's how each lesson works, so nothing catches you off guard:

Lessons are short stacks of cards — read an idea, then immediately try it (multiple choice, predict-the-output, or fill-in-the-blank).
You can't "fail." A wrong answer just reveals the explanation and you move on. This is about reps, not grades.
Each lesson ends with a quick Knowledge Check to lock things in.

Notice the Ask the tutor button? It's there for when you're truly stuck — but try to reason through a challenge yourself first. Wrestling with something for ten seconds and then getting it is what makes it stick. We've worked hard to define every term right where it appears, so you should rarely need to leave the lesson.

TypeScript adds a handful of punctuation marks to JavaScript. None are scary once you can read them out loud. Skim this once — every symbol comes back later with a full explanation:

age: number — a colon attaches a type. Read it: "age is a number."
name?: string — a question mark means optional (might be missing). "name may not be there."
"yes" | "no" — a pipe means or. "either the word yes or the word no."
A & B — an ampersand means and. "A and B combined into one."
(n) => n * 2 — an arrow makes a function. (Pure JavaScript — nothing new here.)
Array<string> — angle brackets slot one type inside another. "an array of strings."

Don't memorize any of this. Just remember the cheat-sheet exists. Real intuition comes from seeing each symbol in context — which is exactly what the next lessons give you.

Multiple choice

Quick warm-up (you've got this). In the line age: number, what is the colon doing?

ADeclaring that `age` is meant to hold a number
BDividing `age` by something called `number`
CCalling a function named `number`
DStarting a comment

Five words you'll meet constantly. Here are the plain-English versions — each one gets the full treatment in upcoming lessons:

Compiler — TypeScript can't run in a browser directly. A tool called the compiler (tsc) translates your TypeScript into ordinary JavaScript first. "Compiling" just means that translation step.
Compile-time vs runtime — Compile-time is while your code is being written and translated (the compiler is watching). Runtime is later, when the program actually runs for a user. TypeScript's whole superpower is catching mistakes at compile-time — before they reach runtime.
Type annotation — the : something part you add yourself, like : string.
Type inference — when TypeScript figures out the type for you, so you don't have to write it.
Strict mode — a setting that switches on TypeScript's full safety checks. You want it on (we cover it in lesson 1.4).

That's genuinely the whole starting vocabulary. Everything else, we define the moment it shows up.

Fill in the blank

Fill in the blank from the glossary you just read:

TypeScript catches mistakes at _____-time — before the program ever runs for a user.

That's your kit. Here's the journey ahead — notice how each step builds on the one before:

Foundations — how types and the compiler actually work
Everyday types — the handful of types you'll use 90% of the time
Narrowing — teaching the compiler to follow your if statements
Object types — describing the exact shape of your data
Generics — flexible, reusable code that's still fully type-safe
Advanced types — deriving types so you never repeat yourself
Production — classes, and safely handling messy real-world data

You don't need to be "good at types" yet — that's literally what the next few hours are for. Ready? Let's go. 🚀

Free preview

6 min

Start Here: Your TypeScript Starter Kit

A friendly orientation — what TypeScript is, what you should know first, and a plain-English cheat-sheet for every symbol you're about to meet.

Welcome! 👋 You're about to learn TypeScript — the tool that catches your bugs before your users ever see them.

Here's how each lesson works, so nothing catches you off guard:

Lessons are short stacks of cards — read an idea, then immediately try it (multiple choice, predict-the-output, or fill-in-the-blank).
You can't "fail." A wrong answer just reveals the explanation and you move on. This is about reps, not grades.
Each lesson ends with a quick Knowledge Check to lock things in.

TypeScript adds a handful of punctuation marks to JavaScript. None are scary once you can read them out loud. Skim this once — every symbol comes back later with a full explanation:

age: number — a colon attaches a type. Read it: "age is a number."
name?: string — a question mark means optional (might be missing). "name may not be there."
"yes" | "no" — a pipe means or. "either the word yes or the word no."
A & B — an ampersand means and. "A and B combined into one."
(n) => n * 2 — an arrow makes a function. (Pure JavaScript — nothing new here.)
Array<string> — angle brackets slot one type inside another. "an array of strings."

Don't memorize any of this. Just remember the cheat-sheet exists. Real intuition comes from seeing each symbol in context — which is exactly what the next lessons give you.

Multiple choice

Quick warm-up (you've got this). In the line age: number, what is the colon doing?

ADeclaring that `age` is meant to hold a number
BDividing `age` by something called `number`
CCalling a function named `number`
DStarting a comment

Five words you'll meet constantly. Here are the plain-English versions — each one gets the full treatment in upcoming lessons:

Compiler — TypeScript can't run in a browser directly. A tool called the compiler (tsc) translates your TypeScript into ordinary JavaScript first. "Compiling" just means that translation step.
Compile-time vs runtime — Compile-time is while your code is being written and translated (the compiler is watching). Runtime is later, when the program actually runs for a user. TypeScript's whole superpower is catching mistakes at compile-time — before they reach runtime.
Type annotation — the : something part you add yourself, like : string.
Type inference — when TypeScript figures out the type for you, so you don't have to write it.
Strict mode — a setting that switches on TypeScript's full safety checks. You want it on (we cover it in lesson 1.4).

That's genuinely the whole starting vocabulary. Everything else, we define the moment it shows up.

Fill in the blank

Fill in the blank from the glossary you just read:

TypeScript catches mistakes at _____-time — before the program ever runs for a user.

That's your kit. Here's the journey ahead — notice how each step builds on the one before:

Foundations — how types and the compiler actually work
Everyday types — the handful of types you'll use 90% of the time
Narrowing — teaching the compiler to follow your if statements
Object types — describing the exact shape of your data
Generics — flexible, reusable code that's still fully type-safe
Advanced types — deriving types so you never repeat yourself
Production — classes, and safely handling messy real-world data

You don't need to be "good at types" yet — that's literally what the next few hours are for. Ready? Let's go. 🚀