What do the indentend type checking errors in VS Code signify?

Question

In a JSX file with some TypeScript errors, VS Code is showing errors like this:

I'm trying to understand how to parse what I'm seeing. Why is each line indented more than the one before it? Is that a mistake, or meaningful somehow?

What is the meaning of so many different errors relating to one statement? Is TypeScript reporting that data could have any of these possible different types, each of which is not assignable to the expected type?

Answer 1

The errors are more and more specific as they become indented. Put another way, the indented line explains the error above it, until the compiler cannot explain it in any further detail.

---

Let's look at a simpler example:

type A = { abc: string }
const a: A = { def: 'foo' }

This yields the following error:

Type '{ def: string; }' is not assignable to type 'A'.
  Object literal may only specify known properties, and 'def' does not exist in type 'A'.(2322)

Here, the first line says the problem at a high level. We tried to assign the type { def: string } to A, and that was not allowed. But that line doesn't give use enough information to know why that's an error.

So the next line explains why, and says that 'def' does not exist in type 'A', which is more helpful and more specific.

If you only had the first line it would be hard to know why exactly the error is happening (a required property is missing). And if you only had the second line it would be hard to know the action that caused the type error (we tried to assign a value to a variable typed as A).

---

When you have many levels of indentation, it's because the types are complex. So the errors are slowly unpacked, listing the issue at each level. The chain ends when the compiler has provided the most specific explanation that it can.