Directly indicate incorrect properties when assignment check fails

[JoshuaKGoldberg]

TypeScript Version: 2.8.1

Search Terms: type interface error underline squigglies messages

Code

interface ComplexInterface {
    booleanVal: boolean;
    numberVal: number;
    recursion?: ComplexInterface;
}

const sampleInstance: ComplexInterface = {
//    ~~~~~~~~~~~~~~
    booleanVal: false,
    numberVal: 0,
    recursion: {
        booleanVal: true,
        numberVal: 1,
        recursion: {}
    },
}

Expected behavior:

There are two ways to describe this problem:

1. sampleInstance doesn't adhere to ComplexInterface
2. sampleInstance.recursion.recursion doesn't adhere to ComplexInterface

It would be useful if the red error squigglies visually directed the user towards the member actually causing the error.

Actual behavior:

The full error message traces the path with more indentation, but that's hard to parse through. I find it irritating to constantly switch between a cursor location in the code and the next level of indentation.

[ts]
Type '{ booleanVal: false; numberVal: number; recursion: { booleanVal: true; numberVal: number; recursi...' is not assignable to type 'ComplexInterface'.
  Types of property 'recursion' are incompatible.
    Type '{ booleanVal: true; numberVal: number; recursion: {}; }' is not assignable to type 'ComplexInterface'.
      Types of property 'recursion' are incompatible.
        Type '{}' is not assignable to type 'ComplexInterface'.
          Property 'booleanVal' is missing in type '{}'.

Visually, only one thing is squigglied:

Playground Link: https://www.typescriptlang.org/play/#src=interface%20ComplexInterface%20%7B%0D%0A%20%20%20%20booleanVal%3A%20boolean%3B%0D%0A%20%20%20%20numberVal%3A%20number%3B%0D%0A%20%20%20%20recursion%3F%3A%20ComplexInterface%3B%0D%0A%7D%0D%0A%0D%0Aconst%20sampleInstance%3A%20ComplexInterface%20%3D%20%7B%0D%0A%20%20%20%20booleanVal%3A%20false%2C%0D%0A%20%20%20%20numberVal%3A%200%2C%0D%0A%20%20%20%20recursion%3A%20%7B%0D%0A%20%20%20%20%20%20%20%20booleanVal%3A%20true%2C%0D%0A%20%20%20%20%20%20%20%20numberVal%3A%201%2C%0D%0A%20%20%20%20%20%20%20%20recursion%3A%20%7B%7D%0D%0A%20%20%20%20%7D%2C%0D%0A%7D

Related Issues: #23393 #23515

[mhegazy]

do you have a proposal on how this should be implemented?

[JoshuaKGoldberg]

A first step could be adding a direct location tip (See sampleInstance.recursion.recursion on line 13, column 8) after (or before?) the recursive indented details.

In addition, do IDEs typically support messages with multiple non-consecutive spans? If so, TS could output an additional range around the innermost error source (recursion). /cc @roblourens ?

[roblourens]

@mjbvz

[acutmore]

Presuming from the behaviour of the intellisense autocomplete (shown below), typescript is already tracking how deep the RHS object literal matches the LHS type.

Could the payload containing where to place 'red squiggles' include an additional location for where the RHS first deviates from LHS following a depth first search?

[JoshuaKGoldberg]

This has since been resolved. 🎉