Mamun Labs Learn
JourneyGlossary
esc
  • Try “map”, “flexbox” or “state”.
Log in
Start learning
Phase 4 · 1 / 5Why types catch bugs
Phase 4TypeScript
5 topics · 2 wks
  1. 1Why types catch bugs
  2. 2Reading type annotations
  3. 3Types for objects
  4. 4Unions and optional values
  5. 5Reading type errors
JourneyPhase 4Why types catch bugs
01 / 10Overview

Why types catch bugs

You'll learn what TypeScript adds to JavaScript, and why it finds mistakes before your code runs.

Why it mattersMost React Native projects, and most code AI writes for them, are TypeScript. You need to read it.
about 45 min·needs: Functions in, values out, Objects, Reading error messages
02 / 10

Watch & read

Start with the required ones. The others are there when you need them.

Docs
TypeScript for the new programmerTypeScript Handbook (official) · 12 min · English
MMamun's noteThe official intro, written for people who are new to programming. Read "TypeScript: A Static Type Checker" and "A Typed Superset of JavaScript" slowly. The history part at the top is a nice story; skim it.
Video
TypeScript in 100 secondsYouTube · Fireship · 3 min · English
MMamun's noteVery fast overview, under 3 minutes. Watch it twice. Don't worry about words you haven't met yet; you only need the big idea now.
VideoOptional
Lesson 1: Introduction & Installation, TypeScript Bangla tutorial seriesYouTube · Learn with Sumit · 9 min · Bangla
MMamun's noteIn Bangla. Sumit explains what TypeScript is and why you would use it. You can skip the installation part; you don't need to install anything yet.
ToolOptional
TypeScript playgroundtypescriptlang.org · 10 min · English
MMamun's noteWrite TypeScript in the browser, nothing to install. Paste the code from the tour, hover the red lines and read the messages. Then fix nmae and watch the red go away.
03 / 10

See it step by step

The same mistake, in JavaScript and in TypeScript.

student
name: "Rafi"year: 2
student.js / student.ts
1// student.js (plain JavaScript)
2const student = { name: "Rafi", year: 2 };
3console.log("Hello");
4console.log(student.nmae.toUpperCase());
Plain JavaScript first. It runs line by line. student is an object with name and year. Nobody checks line 4 yet.
Step 1 / 7
04 / 10

Explanation

You write student.nmae instead of student.name. JavaScript says nothing. The app starts, and the mistake waits. It breaks only when that line runs, maybe on a user's phone, days later.

TypeScript is JavaScript plus labels that say what kind of value each thing is: text, a number, an object with a name. The kind of value is called its type. A tool called the type checker reads your whole file before it runs and checks that every value is used the way its type allows.

Think of sending money with bKash. Before anything is sent, the app shows the number and the amount and asks you to check. A mistake caught there costs nothing. A mistake found after sending costs a lot. TypeScript is that check screen for your code.

function withDelivery(price: number) {
  return price + 60;
}
withDelivery("200");

price: number is a type annotation: a label that says price must be a number. In plain JavaScript, withDelivery("200") runs fine and gives "20060", because + joins text. No error, just a wrong total. In TypeScript, VS Code draws a red underline under "200" while you type:

Argument of type 'string' is not assignable to parameter of type 'number'.

In plain words: you gave text, but this function needs a number.

Two more things to know:

  • TypeScript files end in .ts, or .tsx when they contain React screens.
  • The phone never runs TypeScript. Before the app runs, the types are removed and plain JavaScript is left. Types are only for checking, while you write.

People often think TypeScript checks values while the app is running. It doesn't. It checks your code, not the data that arrives later from the internet. It also can't catch every mistake: price + 50 instead of price + 60 is still a number, so it looks fine.

When you read TypeScript, first find the plain JavaScript underneath. Then look for the extra parts after a colon, like : number. Those are the types. The next topics teach you to read them.

Words to recognise
TypeScripttypetype annotationtype checker.tsred underline
05 / 10

Code tour

Click a line number with a ring to read the note for that line.

app.ts5 notes
const student = { name: "Rafi", year: 2 };
Mentor note · line 1
No labels here, but TypeScript still works out the type: an object with name (text) and year (a number).
2
function withDelivery(price: number) {
4 return price + 60;
5}
6
withDelivery(200);
withDelivery("200");
console.log(student.nmae);
06 / 10

Practice

Short drills. Take your time and read the code before you answer.

DrillPredict1 / 2
1function withDelivery(price: number) {
2  return price + 60;
3}
4const total = withDelivery("200");
What does TypeScript say?
DrillPredict2 / 2
1const order = { item: "Biryani", price: 250 };
2console.log(order.item);
3console.log(order.prise);
4console.log(order.price * 2);
Which line gets a red underline?
07 / 10

Quick check

3 questions. Each one explains itself after you answer.

  1. 1 / 3When does TypeScript tell you about student.nmae?
  2. 2 / 3What does the phone actually run when your app is written in TypeScript?
  3. 3 / 3function withDelivery(price) { return price + 60; } in plain JavaScript. What does withDelivery("200") give?
08 / 10

Explain it back

Only you can see this. Log in to keep it.0 words
09 / 10

How confident are you with Why types catch bugs?

10 / 10

Done

You can now
Look at a .ts file, spot the type labels, and say which mistakes TypeScript will catch before the app runs.
Next: Reading type annotations Back to Phase 4
On this page
  1. 01Why types catch bugs
  2. 02Watch & read
  3. 03See it step by step
  4. 04Explanation
  5. 05Code tour
  6. 06Practice
  7. 07Quick check
  8. 08Explain it back
  9. 09Confidence
  10. 10Done
Up next · 02 / 10Watch & read
Mamun Labs LearnFound a mistake on this page? Tell Mamun.
Mamun Labs Learn
JourneyGlossary
esc
  • Try “map”, “flexbox” or “state”.
Log in
Start learning
Log in to save your progress. Everything here works without an account.Log in to save progressLog in
Phase 4TypeScript
5 topics · 2 wks
  1. 1Why types catch bugs
  2. 2Reading type annotations
  3. 3Types for objects
  4. 4Unions and optional values
  5. 5Reading type errors
JourneyPhase 4Why types catch bugs
01 / 10Overview

Why types catch bugs

You'll learn what TypeScript adds to JavaScript, and why it finds mistakes before your code runs.

Why it mattersMost React Native projects, and most code AI writes for them, are TypeScript. You need to read it.
about 45 min·needs: Functions in, values out, Objects, Reading error messages
02 / 10

Watch & read

Start with the required ones. The others are there when you need them.

Docs
TypeScript for the new programmerTypeScript Handbook (official) · 12 min · English
MMamun's noteThe official intro, written for people who are new to programming. Read "TypeScript: A Static Type Checker" and "A Typed Superset of JavaScript" slowly. The history part at the top is a nice story; skim it.
Video
TypeScript in 100 secondsYouTube · Fireship · 3 min · English
MMamun's noteVery fast overview, under 3 minutes. Watch it twice. Don't worry about words you haven't met yet; you only need the big idea now.
VideoOptional
Lesson 1: Introduction & Installation, TypeScript Bangla tutorial seriesYouTube · Learn with Sumit · 9 min · Bangla
MMamun's noteIn Bangla. Sumit explains what TypeScript is and why you would use it. You can skip the installation part; you don't need to install anything yet.
ToolOptional
TypeScript playgroundtypescriptlang.org · 10 min · English
MMamun's noteWrite TypeScript in the browser, nothing to install. Paste the code from the tour, hover the red lines and read the messages. Then fix nmae and watch the red go away.
03 / 10

See it step by step

The same mistake, in JavaScript and in TypeScript.

student
name: "Rafi"year: 2
student.js / student.ts
1// student.js (plain JavaScript)
2const student = { name: "Rafi", year: 2 };
3console.log("Hello");
4console.log(student.nmae.toUpperCase());
Plain JavaScript first. It runs line by line. student is an object with name and year. Nobody checks line 4 yet.
Step 1 / 7
04 / 10

Explanation

You write student.nmae instead of student.name. JavaScript says nothing. The app starts, and the mistake waits. It breaks only when that line runs, maybe on a user's phone, days later.

TypeScript is JavaScript plus labels that say what kind of value each thing is: text, a number, an object with a name. The kind of value is called its type. A tool called the type checker reads your whole file before it runs and checks that every value is used the way its type allows.

Think of sending money with bKash. Before anything is sent, the app shows the number and the amount and asks you to check. A mistake caught there costs nothing. A mistake found after sending costs a lot. TypeScript is that check screen for your code.

function withDelivery(price: number) {
  return price + 60;
}
withDelivery("200");

price: number is a type annotation: a label that says price must be a number. In plain JavaScript, withDelivery("200") runs fine and gives "20060", because + joins text. No error, just a wrong total. In TypeScript, VS Code draws a red underline under "200" while you type:

Argument of type 'string' is not assignable to parameter of type 'number'.

In plain words: you gave text, but this function needs a number.

Two more things to know:

  • TypeScript files end in .ts, or .tsx when they contain React screens.
  • The phone never runs TypeScript. Before the app runs, the types are removed and plain JavaScript is left. Types are only for checking, while you write.

People often think TypeScript checks values while the app is running. It doesn't. It checks your code, not the data that arrives later from the internet. It also can't catch every mistake: price + 50 instead of price + 60 is still a number, so it looks fine.

When you read TypeScript, first find the plain JavaScript underneath. Then look for the extra parts after a colon, like : number. Those are the types. The next topics teach you to read them.

Words to recognise
TypeScripttypetype annotationtype checker.tsred underline
05 / 10

Code tour

Click a line number with a ring to read the note for that line.

app.ts5 notes
const student = { name: "Rafi", year: 2 };
Mentor note · line 1
No labels here, but TypeScript still works out the type: an object with name (text) and year (a number).
2
function withDelivery(price: number) {
4 return price + 60;
5}
6
withDelivery(200);
withDelivery("200");
console.log(student.nmae);
06 / 10

Practice

Short drills. Take your time and read the code before you answer.

DrillPredict1 / 2
1function withDelivery(price: number) {
2  return price + 60;
3}
4const total = withDelivery("200");
What does TypeScript say?
DrillPredict2 / 2
1const order = { item: "Biryani", price: 250 };
2console.log(order.item);
3console.log(order.prise);
4console.log(order.price * 2);
Which line gets a red underline?
07 / 10

Quick check

3 questions. Each one explains itself after you answer.

  1. 1 / 3When does TypeScript tell you about student.nmae?
  2. 2 / 3What does the phone actually run when your app is written in TypeScript?
  3. 3 / 3function withDelivery(price) { return price + 60; } in plain JavaScript. What does withDelivery("200") give?
08 / 10

Explain it back

Only you can see this. Log in to keep it.0 words
09 / 10

How confident are you with Why types catch bugs?

10 / 10

Done

You can now
Look at a .ts file, spot the type labels, and say which mistakes TypeScript will catch before the app runs.
Next: Reading type annotations Back to Phase 4
On this page
  1. 01Why types catch bugs
  2. 02Watch & read
  3. 03See it step by step
  4. 04Explanation
  5. 05Code tour
  6. 06Practice
  7. 07Quick check
  8. 08Explain it back
  9. 09Confidence
  10. 10Done
Up next · 02 / 10Watch & read

You write student.nmae instead of student.name. JavaScript says nothing. The app starts, and the mistake waits. It breaks only when that line runs, maybe on a user's phone, days later.

TypeScript is JavaScript plus labels that say what kind of value each thing is: text, a number, an object with a name. The kind of value is called its type. A tool called the type checker reads your whole file before it runs and checks that every value is used the way its type allows.

Think of sending money with bKash. Before anything is sent, the app shows the number and the amount and asks you to check. A mistake caught there costs nothing. A mistake found after sending costs a lot. TypeScript is that check screen for your code.

function withDelivery(price: number) {
  return price + 60;
}
withDelivery("200");

price: number is a type annotation: a label that says price must be a number. In plain JavaScript, withDelivery("200") runs fine and gives "20060", because + joins text. No error, just a wrong total. In TypeScript, VS Code draws a red underline under "200" while you type:

Argument of type 'string' is not assignable to parameter of type 'number'.

In plain words: you gave text, but this function needs a number.

Two more things to know:

  • TypeScript files end in .ts, or .tsx when they contain React screens.
  • The phone never runs TypeScript. Before the app runs, the types are removed and plain JavaScript is left. Types are only for checking, while you write.

People often think TypeScript checks values while the app is running. It doesn't. It checks your code, not the data that arrives later from the internet. It also can't catch every mistake: price + 50 instead of price + 60 is still a number, so it looks fine.

When you read TypeScript, first find the plain JavaScript underneath. Then look for the extra parts after a colon, like : number. Those are the types. The next topics teach you to read them.

Words to recognise
TypeScripttypetype annotationtype checker.tsred underline

You write student.nmae instead of student.name. JavaScript says nothing. The app starts, and the mistake waits. It breaks only when that line runs, maybe on a user's phone, days later.

TypeScript is JavaScript plus labels that say what kind of value each thing is: text, a number, an object with a name. The kind of value is called its type. A tool called the type checker reads your whole file before it runs and checks that every value is used the way its type allows.

Think of sending money with bKash. Before anything is sent, the app shows the number and the amount and asks you to check. A mistake caught there costs nothing. A mistake found after sending costs a lot. TypeScript is that check screen for your code.

function withDelivery(price: number) {
  return price + 60;
}
withDelivery("200");

price: number is a type annotation: a label that says price must be a number. In plain JavaScript, withDelivery("200") runs fine and gives "20060", because + joins text. No error, just a wrong total. In TypeScript, VS Code draws a red underline under "200" while you type:

Argument of type 'string' is not assignable to parameter of type 'number'.

In plain words: you gave text, but this function needs a number.

Two more things to know:

  • TypeScript files end in .ts, or .tsx when they contain React screens.
  • The phone never runs TypeScript. Before the app runs, the types are removed and plain JavaScript is left. Types are only for checking, while you write.

People often think TypeScript checks values while the app is running. It doesn't. It checks your code, not the data that arrives later from the internet. It also can't catch every mistake: price + 50 instead of price + 60 is still a number, so it looks fine.

When you read TypeScript, first find the plain JavaScript underneath. Then look for the extra parts after a colon, like : number. Those are the types. The next topics teach you to read them.

Words to recognise
TypeScripttypetype annotationtype checker.tsred underline