Mamun Labs Learn
JourneyGlossary
esc
  • Try “map”, “flexbox” or “state”.
Log in
Start learning
Phase 4 · 5 / 5Reading type errors
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 4Reading type errors
01 / 09Overview

Reading type errors

You'll learn to read a TypeScript error, find what you gave and what was expected, and fix the code instead of hiding the error.

Why it mattersAI-written TypeScript often comes with red lines, and AI often "fixes" them by hiding them. You need to read the error yourself.
about 60 min·needs: Why types catch bugs, Types for objects, Unions and optional values, Reading error messages
02 / 09

Watch & read

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

Article
IDE superpowers: TypeScript error checkingTotal TypeScript Essentials · Matt Pocock (free online book) · 15 min · English
MMamun's noteRead from "TypeScript Error Checking" to the end of "Dealing With Multi-Line Errors". Matt shows where errors appear, why some point to a different spot than the mistake, and how to read a long one. Skip autocomplete at the top if you're short on time.
Tool
TypeScript playgroundtypescriptlang.org · 15 min · English
MMamun's notePaste the code from the tour. Hover each red line and read the message out loud as "I gave ___, it expected ___". Then fix one thing at a time and watch which error goes away.
DocsOptional
The basicsTypeScript Handbook (official) · 10 min · English
MMamun's noteRead "Static type-checking" and "Non-exception Failures". They show the kinds of mistakes TypeScript catches, like typos and missing values, each with the real error text.
ToolOptional
Total TypeScript VS Code extensionTotal TypeScript · Matt Pocock · 5 min · English
MMamun's noteA free VS Code extension that adds a plain-English explanation under hard TypeScript errors. Useful while you learn. Still read the real message first, then check the translation.
03 / 09

Explanation

A red line appears in VS Code. You hover over it and get a long sentence full of quotes. It looks scary, but most TypeScript errors say the same simple thing: you gave one type, but another was expected.

Think of a phone charger. You try to plug a Type-C cable into a Lightning port. It doesn't fit, and you can see which plug you have and which socket it needs. A type error is that mismatch, written as text.

You can see an error in three places: the red underline (hover it), the Problems panel in VS Code, or the terminal, where it looks like this:

app.ts(4,7): error TS2322: Type 'string' is not assignable to type 'number'.

File app.ts, line 4, character 7. TS2322 is the error's number; search it if the words don't help. Read "is not assignable to" as "doesn't fit into". The first type is what you gave. The second is what was expected.

The messages you'll see most:

  • Type 'X' is not assignable to type 'Y'. A value of the wrong type.
  • Argument of type 'X' is not assignable to parameter of type 'Y'. The same, but in a function call.
  • Property 'x' does not exist on type 'Y'. A spelling mistake, or a field the object doesn't have.
  • Property 'x' is missing in type 'A' but required in type 'B'. You forgot a field.
  • 'x' is possibly 'undefined'. Check for undefined first.
  • Expected 2 arguments, but got 1. A function call with too few values.

Some errors take several lines. Read the first line for where, and the last line for why.

Type '{ name: string; year: string; }' is not assignable to type 'Student'.
  Types of property 'year' are incompatible.
    Type 'string' is not assignable to type 'number'.

The last line is the real reason: year is a string, but Student needs a number.

People often, and AI very often, make the red line go away without fixing anything: as any, a !, or a // @ts-ignore comment above the line. These tell TypeScript to stop checking. The bug is still there, and now nobody warns you. Fix the value or the check instead. Change the type only when the type itself is wrong.

When you ask AI for help, paste the full error, the line it points to, and the type it mentions (like the type Student = ... lines). Then ask: "What did I give, and what was expected?"

Words to recognise
type errornot assignableTS2322as any@ts-ignore
04 / 09

Code tour

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

app.ts4 notes
1type Student = { name: string; year: number };
2
const fromForm = { name: "Rafi", year: "2" };
Mentor note · line 3
The real mistake is here: year is "2", in quotes, so TypeScript reads it as a string. Text from a form input is always a string.
4const rafi: Student = fromForm;
5
6function greet(student: Student) {
7 return "Hi " + student.name;
8}
9greet({ name: "Nusrat" });
10
// app.ts(4,7): error TS2322: Type '{ name: string; year: string; }' is not assignable to type 'Student'.
12// Types of property 'year' are incompatible.
// Type 'string' is not assignable to type 'number'.
// app.ts(9,7): error TS2345: Argument of type '{ name: string; }' is not assignable to parameter of type 'Student'.
05 / 09

Practice

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

DrillPredict1 / 2
1type Product = { title: string; price: number };
2const saved = { title: "Tea", price: "20" };
3const tea: Product = saved;
4 
5// app.ts(3,7): error TS2322: Type '{ title: string; price: string; }' is not assignable to type 'Product'.
6//   Types of property 'price' are incompatible.
7//     Type 'string' is not assignable to type 'number'.
What is the real problem?
DrillPredict2 / 2
1function addDelivery(price: number, delivery: number) {
2  return price + delivery;
3}
4addDelivery(200);
What does TypeScript say?
06 / 09

Quick check

3 questions. Each one explains itself after you answer.

  1. 1 / 3Type 'string' is not assignable to type 'number'. What happened?
  2. 2 / 3A TypeScript error has three lines. Which line tells you the real reason?
  3. 3 / 3AI adds as any and the red line disappears. What is true now?
07 / 09

Explain it back

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

How confident are you with Reading type errors?

09 / 09

Done

You can now
Read a TypeScript error, including a long one, and say in one plain sentence what is wrong and on which line.
Next: Components and JSX Back to Phase 4
On this page
  1. 01Reading type errors
  2. 02Watch & read
  3. 03Explanation
  4. 04Code tour
  5. 05Practice
  6. 06Quick check
  7. 07Explain it back
  8. 08Confidence
  9. 09Done
Up next · 02 / 09Watch & 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 4Reading type errors
01 / 09Overview

Reading type errors

You'll learn to read a TypeScript error, find what you gave and what was expected, and fix the code instead of hiding the error.

Why it mattersAI-written TypeScript often comes with red lines, and AI often "fixes" them by hiding them. You need to read the error yourself.
about 60 min·needs: Why types catch bugs, Types for objects, Unions and optional values, Reading error messages
02 / 09

Watch & read

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

Article
IDE superpowers: TypeScript error checkingTotal TypeScript Essentials · Matt Pocock (free online book) · 15 min · English
MMamun's noteRead from "TypeScript Error Checking" to the end of "Dealing With Multi-Line Errors". Matt shows where errors appear, why some point to a different spot than the mistake, and how to read a long one. Skip autocomplete at the top if you're short on time.
Tool
TypeScript playgroundtypescriptlang.org · 15 min · English
MMamun's notePaste the code from the tour. Hover each red line and read the message out loud as "I gave ___, it expected ___". Then fix one thing at a time and watch which error goes away.
DocsOptional
The basicsTypeScript Handbook (official) · 10 min · English
MMamun's noteRead "Static type-checking" and "Non-exception Failures". They show the kinds of mistakes TypeScript catches, like typos and missing values, each with the real error text.
ToolOptional
Total TypeScript VS Code extensionTotal TypeScript · Matt Pocock · 5 min · English
MMamun's noteA free VS Code extension that adds a plain-English explanation under hard TypeScript errors. Useful while you learn. Still read the real message first, then check the translation.
03 / 09

Explanation

A red line appears in VS Code. You hover over it and get a long sentence full of quotes. It looks scary, but most TypeScript errors say the same simple thing: you gave one type, but another was expected.

Think of a phone charger. You try to plug a Type-C cable into a Lightning port. It doesn't fit, and you can see which plug you have and which socket it needs. A type error is that mismatch, written as text.

You can see an error in three places: the red underline (hover it), the Problems panel in VS Code, or the terminal, where it looks like this:

app.ts(4,7): error TS2322: Type 'string' is not assignable to type 'number'.

File app.ts, line 4, character 7. TS2322 is the error's number; search it if the words don't help. Read "is not assignable to" as "doesn't fit into". The first type is what you gave. The second is what was expected.

The messages you'll see most:

  • Type 'X' is not assignable to type 'Y'. A value of the wrong type.
  • Argument of type 'X' is not assignable to parameter of type 'Y'. The same, but in a function call.
  • Property 'x' does not exist on type 'Y'. A spelling mistake, or a field the object doesn't have.
  • Property 'x' is missing in type 'A' but required in type 'B'. You forgot a field.
  • 'x' is possibly 'undefined'. Check for undefined first.
  • Expected 2 arguments, but got 1. A function call with too few values.

Some errors take several lines. Read the first line for where, and the last line for why.

Type '{ name: string; year: string; }' is not assignable to type 'Student'.
  Types of property 'year' are incompatible.
    Type 'string' is not assignable to type 'number'.

The last line is the real reason: year is a string, but Student needs a number.

People often, and AI very often, make the red line go away without fixing anything: as any, a !, or a // @ts-ignore comment above the line. These tell TypeScript to stop checking. The bug is still there, and now nobody warns you. Fix the value or the check instead. Change the type only when the type itself is wrong.

When you ask AI for help, paste the full error, the line it points to, and the type it mentions (like the type Student = ... lines). Then ask: "What did I give, and what was expected?"

Words to recognise
type errornot assignableTS2322as any@ts-ignore
04 / 09

Code tour

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

app.ts4 notes
1type Student = { name: string; year: number };
2
const fromForm = { name: "Rafi", year: "2" };
Mentor note · line 3
The real mistake is here: year is "2", in quotes, so TypeScript reads it as a string. Text from a form input is always a string.
4const rafi: Student = fromForm;
5
6function greet(student: Student) {
7 return "Hi " + student.name;
8}
9greet({ name: "Nusrat" });
10
// app.ts(4,7): error TS2322: Type '{ name: string; year: string; }' is not assignable to type 'Student'.
12// Types of property 'year' are incompatible.
// Type 'string' is not assignable to type 'number'.
// app.ts(9,7): error TS2345: Argument of type '{ name: string; }' is not assignable to parameter of type 'Student'.
05 / 09

Practice

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

DrillPredict1 / 2
1type Product = { title: string; price: number };
2const saved = { title: "Tea", price: "20" };
3const tea: Product = saved;
4 
5// app.ts(3,7): error TS2322: Type '{ title: string; price: string; }' is not assignable to type 'Product'.
6//   Types of property 'price' are incompatible.
7//     Type 'string' is not assignable to type 'number'.
What is the real problem?
DrillPredict2 / 2
1function addDelivery(price: number, delivery: number) {
2  return price + delivery;
3}
4addDelivery(200);
What does TypeScript say?
06 / 09

Quick check

3 questions. Each one explains itself after you answer.

  1. 1 / 3Type 'string' is not assignable to type 'number'. What happened?
  2. 2 / 3A TypeScript error has three lines. Which line tells you the real reason?
  3. 3 / 3AI adds as any and the red line disappears. What is true now?
07 / 09

Explain it back

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

How confident are you with Reading type errors?

09 / 09

Done

You can now
Read a TypeScript error, including a long one, and say in one plain sentence what is wrong and on which line.
Next: Components and JSX Back to Phase 4
On this page
  1. 01Reading type errors
  2. 02Watch & read
  3. 03Explanation
  4. 04Code tour
  5. 05Practice
  6. 06Quick check
  7. 07Explain it back
  8. 08Confidence
  9. 09Done
Up next · 02 / 09Watch & read

A red line appears in VS Code. You hover over it and get a long sentence full of quotes. It looks scary, but most TypeScript errors say the same simple thing: you gave one type, but another was expected.

Think of a phone charger. You try to plug a Type-C cable into a Lightning port. It doesn't fit, and you can see which plug you have and which socket it needs. A type error is that mismatch, written as text.

You can see an error in three places: the red underline (hover it), the Problems panel in VS Code, or the terminal, where it looks like this:

app.ts(4,7): error TS2322: Type 'string' is not assignable to type 'number'.

File app.ts, line 4, character 7. TS2322 is the error's number; search it if the words don't help. Read "is not assignable to" as "doesn't fit into". The first type is what you gave. The second is what was expected.

The messages you'll see most:

  • Type 'X' is not assignable to type 'Y'. A value of the wrong type.
  • Argument of type 'X' is not assignable to parameter of type 'Y'. The same, but in a function call.
  • Property 'x' does not exist on type 'Y'. A spelling mistake, or a field the object doesn't have.
  • Property 'x' is missing in type 'A' but required in type 'B'. You forgot a field.
  • 'x' is possibly 'undefined'. Check for undefined first.
  • Expected 2 arguments, but got 1. A function call with too few values.

Some errors take several lines. Read the first line for where, and the last line for why.

Type '{ name: string; year: string; }' is not assignable to type 'Student'.
  Types of property 'year' are incompatible.
    Type 'string' is not assignable to type 'number'.

The last line is the real reason: year is a string, but Student needs a number.

People often, and AI very often, make the red line go away without fixing anything: as any, a !, or a // @ts-ignore comment above the line. These tell TypeScript to stop checking. The bug is still there, and now nobody warns you. Fix the value or the check instead. Change the type only when the type itself is wrong.

When you ask AI for help, paste the full error, the line it points to, and the type it mentions (like the type Student = ... lines). Then ask: "What did I give, and what was expected?"

Words to recognise
type errornot assignableTS2322as any@ts-ignore

A red line appears in VS Code. You hover over it and get a long sentence full of quotes. It looks scary, but most TypeScript errors say the same simple thing: you gave one type, but another was expected.

Think of a phone charger. You try to plug a Type-C cable into a Lightning port. It doesn't fit, and you can see which plug you have and which socket it needs. A type error is that mismatch, written as text.

You can see an error in three places: the red underline (hover it), the Problems panel in VS Code, or the terminal, where it looks like this:

app.ts(4,7): error TS2322: Type 'string' is not assignable to type 'number'.

File app.ts, line 4, character 7. TS2322 is the error's number; search it if the words don't help. Read "is not assignable to" as "doesn't fit into". The first type is what you gave. The second is what was expected.

The messages you'll see most:

  • Type 'X' is not assignable to type 'Y'. A value of the wrong type.
  • Argument of type 'X' is not assignable to parameter of type 'Y'. The same, but in a function call.
  • Property 'x' does not exist on type 'Y'. A spelling mistake, or a field the object doesn't have.
  • Property 'x' is missing in type 'A' but required in type 'B'. You forgot a field.
  • 'x' is possibly 'undefined'. Check for undefined first.
  • Expected 2 arguments, but got 1. A function call with too few values.

Some errors take several lines. Read the first line for where, and the last line for why.

Type '{ name: string; year: string; }' is not assignable to type 'Student'.
  Types of property 'year' are incompatible.
    Type 'string' is not assignable to type 'number'.

The last line is the real reason: year is a string, but Student needs a number.

People often, and AI very often, make the red line go away without fixing anything: as any, a !, or a // @ts-ignore comment above the line. These tell TypeScript to stop checking. The bug is still there, and now nobody warns you. Fix the value or the check instead. Change the type only when the type itself is wrong.

When you ask AI for help, paste the full error, the line it points to, and the type it mentions (like the type Student = ... lines). Then ask: "What did I give, and what was expected?"

Words to recognise
type errornot assignableTS2322as any@ts-ignore