Getting Started

Reading type errors in TypeScript

Topic 4 of 37 · 9 minFree lesson

Type errors are TypeScript's way of talking to you. At first they can look like a wall of text. But every error follows the same pattern, and once you know it, most errors tell you what to fix in one sentence. This topic shows you how to read them, and what to do when there are several.

The three parts of an error

Here, temperature was inferred as a number, and line 3 tries to give it text.

Example 1

let city = "Paris";let temperature = 21;temperature = "warm";

Line 3 · TS2322: Type 'string' is not assignable to type 'number'.

Every error has three parts:

The line: Line 3 tells you where TypeScript noticed the problem.
The code: TS2322 is the error's number. The same kind of mistake always has the same number, so you start to recognize them.
The message: what went wrong, in words.

Reading "is not assignable"

"Not assignable" is the message you'll see most. It always names two types. The first is the type of the value you gave. The second is the type the place expects. So "Type 'string' is not assignable to type 'number'" means "you gave a string, but a number belongs here".

The same words appear when you pass a value to a function. Math.round() expects a number, and here it gets a string.

Example 2

const rounded = Math.round("4.6");

Line 1 · TS2345: Argument of type 'string' is not assignable to parameter of type 'number'.

An argument is a value you pass to a function, and a parameter is the name the function gives it. Read it the same way: a string was given, a number was expected.

"Did you mean…?"

When a name is close to one TypeScript knows, it suggests the right one. Here, the method is toUpperCase, with a capital C.

Example 3

let city = "lisbon";console.log(city.toUppercase());

Line 2 · TS2551: Property 'toUppercase' does not exist on type 'string'. Did you mean 'toUpperCase'?

The suggestion is usually right, but check it before you accept it. TypeScript only knows the name is close, not what you meant.

Messages with a second line

Some messages have a second line, indented under the first. The first line says what didn't fit. The second line goes one level deeper and says which part caused it.

Example 4

const sizes = [38, 40, 42];const labels: string[] = sizes;

Line 2 · TS2322: Type 'number[]' is not assignable to type 'string[]'. Type 'number' is not assignable to type 'string'.

The first line compares the two arrays. The second explains why they don't match: the items are numbers, but labels wants strings. For long messages, the last line is often the most useful one.

Several errors at once

TypeScript lists every error it finds, in line order. Often, one mistake causes several errors. Here, both errors come from the same typo.

Example 5

const scroes = [12, 30, 25];const best = Math.max(...scores);console.log(`Best: ${best} of ${scores.length}`);

Line 2 · TS2552: Cannot find name 'scores'. Did you mean 'scroes'?Line 3 · TS2552: Cannot find name 'scores'. Did you mean 'scroes'?

So start with the first error, fix it, and run again. Some of the others may disappear on their own. Here, the first error leads you to the cause: rename scroes to scores on line 1, and both errors go away.

The real mistake can be earlier

An error shows where TypeScript noticed a problem, which isn't always where you made it. Here, the error is on line 4. But the real mistake is on line 1, where the quotes made score a string.

Example 6

let score = "0";// ^? let score: stringconst bonus = 10;score = bonus;

Line 4 · TS2322: Type 'number' is not assignable to type 'string'.

When an error mentions a type you didn't expect, ask where that type came from. A // ^? line, or holding the mouse over the name in an editor, shows you.

Common mistakeChanging the line the error points at until the error goes away. In the last example, you could turn bonus into text on line 3. The error is gone, but the program is now wrong.

Example 7

let score = "0";const bonus = 10;score = String(bonus);console.log(score + 5);

105

The score should be 15, but adding to a string joins text instead. The real fix is on line 1: let score = 0;. Make the types say what you mean, rather than bending the code to fit a wrong type.

TipFix one error at a time, starting from the top, and run again after each fix. The list often gets shorter faster than you expect.

Try it yourself

Run the code in the editor and answer 8 practice questions on reading type errors. It's free, you only need an account.

Practice this topic free I have an account