Error messages should place most relevant information first.

[CyrusNajmabadi]

Here's an actual example of an error message that can go wrong in our library when mispelling a property when creating an object literal:

[ts]
Type '{ containers: { nginx: { image: string; memory: number; portMappings: NetworkListener[]; enviroment: number; }; }; }' is not assignable to type 'FargateTaskDefinitionArgs'.
  Types of property 'containers' are incompatible.
    Type '{ nginx: { image: string; memory: number; portMappings: NetworkListener[]; enviroment: number; }; }' is not assignable to type 'Record<string, Container>'.
      Property 'nginx' is incompatible with index signature.
        Type '{ image: string; memory: number; portMappings: NetworkListener[]; enviroment: number; }' is not assignable to type 'Container'.
          Object literal may only specify known properties, but 'enviroment' does not exist in
          type 'Container'. Did you mean to write 'environment'? [2322]

- fargateService.d.ts(169, 5): The expected type comes from property 'taskDefinitionArgs'
  which is declared here on type 'FargateServiceArgs'

The funny thing here is that the final parts of the error message are superb. Namely:

- Object literal may only specify known properties, but 'enviroment' does not exist in
  type 'Container'. Did you mean to write 'environment'? [2322]

- fargateService.d.ts(169, 5): The expected type comes from property 'taskDefinitionArgs'
  which is declared here on type 'FargateServiceArgs'

However, the actual output is quite cluttered and hard to glean the information from. This is esp. true in an ide setting where one sees something like this:

This view is particularly problematic due to the wrapping and wall-of-goop nature of this type of error.

My suggestion would be to invert the information being provided by errors. Give the most specific and directly impactful information first (i.e. Object literal may only specify known properties, but 'enviroment' does not exist in type 'Container'. Did you mean to write 'environment'?), and then follow that up with all the extra details that can be used to dive deeper into things when that isn't clear enough.

[CyrusNajmabadi]

Tagging @DanielRosenwasser for thoughts here. I'm curious if there is a specific reason why we do things this way? It seems like a bunch of effort was put into extracting out some really good information to tell the user. But that good information is buried after the really crufty info which, while occasionally useful, seems strange to place front and center.

[RyanCavanaugh]

Sometimes inside-out is the best error, sometimes outside-in is the best error. It depends on whether your error is because the type "isn't even close" (i.e. you have the completely wrong kind of object), or if there's something "subtly wrong" (i.e. you are off by one property spelling or type).

Consider this code:

// Library code
type Flippy<T> = T extends string ? number : object;
class Alpha<T> {
    getBar() {
        return {
            doSomething() {
                return {
                    another: null as Flippy<T>
                }
            }
        }
    }
}

class Beta<T> {
    getBar() {
        return {
            doSomething() {
                return {
                    another: null as Flippy<T>
                }
            }
        }
    }
}

// User code
const a: Alpha<string> = new Beta<boolean>();

The error message here is:

sample.ts:26:7 - error TS2322: Type 'Beta<boolean>' is not assignable to type 'Alpha<string>'.
  Types of property 'getBar' are incompatible.
    Type '() => { doSomething(): { another: object; }; }' is not assignable to type '() => { doSomething(): { another: number; }; }'.
      Type '{ doSomething(): { another: object; }; }' is not assignable to type '{ doSomething(): { another: number; }; }'.
        Types of property 'doSomething' are incompatible.
          Type '() => { another: object; }' is not assignable to type '() => { another: number; }'.
            Type '{ another: object; }' is not assignable to type '{ another: number; }'.
              Types of property 'another' are incompatible.
                Type 'object' is not assignable to type 'number'.

The last 7 lines of that error message are not really relevant (it's not really the error the developer is making, just an explanation of why the assignment is an error), and arguably only the first line is needed for the user to know what's gone wrong.

Displaying the inner message first here looks like TS has lost its mind:

const a: Alpha<string> = new Beta<boolean>();
// Type 'object' is not assignable to type 'number'.

[DanielRosenwasser]

Well, for a variable, it would be very confusing if you dove deep into the structure of the type and never explained how the mismatch occurred.

declare var x: { a: { b: { c: { d: number } } } };
declare var y: { a: { b: { c: { d: string } } } };

x = y;

It'd be weird to get an error like

Type 'string' is not assignable to type 'number'.

even if it looks less scary than

Type '{ a: { b: { c: { d: string; }; }; }; }' is not assignable to type '{ a: { b: { c: { d: number; }; }; }; }'.
  Types of property 'a' are incompatible.
    Type '{ b: { c: { d: string; }; }; }' is not assignable to type '{ b: { c: { d: number; }; }; }'.
      Types of property 'b' are incompatible.
        Type '{ c: { d: string; }; }' is not assignable to type '{ c: { d: number; }; }'.
          Types of property 'c' are incompatible.
            Type '{ d: string; }' is not assignable to type '{ d: number; }'.
              Types of property 'd' are incompatible.
                Type 'string' is not assignable to type 'number'.

But when we already try to do this when we have the syntax available, we're able to error exactly on the appropriate declaration.

declare var x: { a: { b: { c: { d: number } } } };
x = { a: { b: { c: { d: "" } } } };
//                   ~ Error: Type 'string' is not assignable to type 'number'.

It's only on excess property checks (like here) that we don't currently, and that's because we don't try to do it as part of the syntactic walk that @weswigham implemented to elaborate on the most specific error location.

[DanielRosenwasser]

I suppose we could just set a bit to say "don't try to elaborate any further" when excess property checks are issued.

[CyrusNajmabadi]

Note: i'm not proposing stripping out the "path" part of the error. Just that it feels as if the innermost message is sometimes far more appropriate on the outside level. I mean, just look at that useless vscode message :)

[RyanCavanaugh]

How'd you get in a state where the excess property check wasn't the top-level error? Having a hard time reproducing the OP

[CyrusNajmabadi]

The error message here is:

sample.ts:26:7 - error TS2322: Type 'Beta<boolean>' is not assignable to type 'Alpha<string>'.

Note: i would say that hte error here is good because the "type not assignable" message is non-complex. And, by 'non-complex' i mean: there is a good named type that can be presented to the user. In this case, saying "Foo is not assignable to Bar" is nice and clear. And the path then leads to an explanation why. When the message is:

'{ containers: { nginx: { image: string; memory: number; portMappings: NetworkListener[]; enviroment: number; }; }; }' is not assignable to type 'FargateTaskDefinitionArgs'

(or even worse at times).

It seems like this may be about having a weighed strategy depending on what sort of message you'd print.

[DanielRosenwasser]

How'd you get in a state where the excess property check wasn't the top-level error? Having a hard time reproducing the OP

let x: { a: string, b: number } = {
    a: "",
    b: 10,
    c: 20
}

[DanielRosenwasser]

To be clear, the span is exact (we literally override the original span) but the exact elaboration comes last.

[CyrusNajmabadi]

It'd be weird to get an error like

Type 'string' is not assignable to type 'number'.

It could be:

Deeply nested assignment of 'd: string' is not assignable to `d: number`
// now print hte long path
       Type 'string' is not assignable to type 'number'.

That's not scary to me :). It explains what's going on to me in the first line. Part of the assignment deep inside isn't compatible. And if that information isn't clear enough, i can walk down the path to find out which part if is complaining about.

[RyanCavanaugh]

But it's not really nested like the OP shows

let x: { q: { m: { t: { a: string, b: number } } } } = {
    q: {
        m: {
            t: {
                a: "",
                b: 10,
                c: 20
            }
        }
    }
};

sample.ts:4:5 - error TS2322: Type '{ a: string; b: number; c: number; }' is not assignable to type '{ a: string; b: number; }'.
  Object literal may only specify known properties, and 'c' does not exist in type '{ a: string; b: number; }'.

4     c: 20
      ~~~~~

  sample.ts:1:20
    1 let x: { q: { m: { t:  { a: string, b: number } } } }= { q: { m: { t: {
                         ~
    The expected type comes from property 't' which is declared here on type '{ t: { a: string; b: number; }; }'

[CyrusNajmabadi]

@RyanCavanaugh Are you asking for a repro for the OP i posted?

[RyanCavanaugh]

I just want a multi-level error message originating in an excess property check. That seems like a specific scenario to address by itself.

[DanielRosenwasser]

Also Cyrus what version are you on? We might've just gotten better at this.

[CyrusNajmabadi]

package.json says "typescript": "^3.0.0". But i'm using: vscode Version: 1.30.2. I'm not sure what that means at the end of the day.