Repository: TypeScript
Issue: Better error reporting
Labels: Suggestion,Needs Proposal

# Suggestion

Let's face it Typescript error reporting is the worst. It's heavy on data and light on usable information. In VSCode error tooltips are not color coded. 

E.g.
```
Type '{ type: "object"; properties: { label: { type: "string"; maxLength: number; }; desc: { type: "string"; maxLength: number; }; emailDesc: { type: "string"; maxLength: number; }; dteStart: { type: "string"; format: string; }; ... 4 more ...; address: { ...; }; }; required: ("brandCode" | ... 6 more ... | "phoneVerify")...' is not assignable to type 'JSONSchemaType<IEventInput>'.
  The types of 'properties.address' are incompatible between these types.
    Type '{ type: string; nullable: boolean; properties: { zipCode: { type: string; maxLength: number; }; street: { type: string; maxLength: number; }; streetNumber: { type: string; }; addressExtra: { type: string; nullable: boolean; maxLength: number; }; ... 7 more ...; refId: { ...; }; }; required: string[]; additionalPrope...' is not assignable to type '{ $ref: string; } | (UncheckedJSONSchemaType<LimitedAddressCreationAttributes, false> & { nullable?: false | undefined; const?: LimitedAddressCreationAttributes | undefined; enum?: readonly LimitedAddressCreationAttributes[] | undefined; default?: LimitedAddressCreationAttributes | undefined; })'.
      Type '{ type: string; nullable: boolean; properties: { zipCode: { type: string; maxLength: number; }; street: { type: string; maxLength: number; }; streetNumber: { type: string; }; addressExtra: { type: string; nullable: boolean; maxLength: number; }; ... 7 more ...; refId: { ...; }; }; required: string[]; additionalPrope...' is not assignable to type '{ type: "object"; additionalProperties?: boolean | UncheckedJSONSchemaType<unknown, false> | undefined; unevaluatedProperties?: boolean | UncheckedJSONSchemaType<unknown, false> | undefined; ... 7 more ...; maxProperties?: number | undefined; } & { ...; } & { ...; } & { ...; } & { ...; }'.
        Type '{ type: string; nullable: boolean; properties: { zipCode: { type: string; maxLength: number; }; street: { type: string; maxLength: number; }; streetNumber: { type: string; }; addressExtra: { type: string; nullable: boolean; maxLength: number; }; ... 7 more ...; refId: { ...; }; }; required: string[]; additionalPrope...' is not assignable to type '{ type: "object"; additionalProperties?: boolean | UncheckedJSONSchemaType<unknown, false> | undefined; unevaluatedProperties?: boolean | UncheckedJSONSchemaType<unknown, false> | undefined; ... 7 more ...; maxProperties?: number | undefined; }'.
          Types of property 'type' are incompatible.
            Type 'string' is not assignable to type '"object"'.ts(2322)
const createSchema: JSONSchemaType<IEventInput>
```

And in VSCode, you don't the nice indentation we see here. You get text being vomitted at you.

My suggestion is to take a page from Jest. If you do `toMatchObject`, you get a color coded differential with the key differences between two items. Add a little AI based insight to the mix, and you can also do suggestions: Did you mean...?

Please put some effort into this. It would save tons and tons of time.

## 🔍 Search Terms

error reporting

## ✅ Viability Checklist

My suggestion meets these guidelines:

* [x ] This wouldn't be a breaking change in existing TypeScript/JavaScript code
* [ x] This wouldn't change the runtime behavior of existing JavaScript code
* [x ] This could be implemented without emitting different JS based on the types of the expressions
* [ x] This isn't a runtime feature (e.g. library functionality, non-ECMAScript syntax with JavaScript output, new syntax sugar for JS, etc.)
* [ x] This feature would agree with the rest of [TypeScript's Design Goals](https://github.com/Microsoft/TypeScript/wiki/TypeScript-Design-Goals).


## ⭐ Suggestion

Significant improvements in visualization of type related error reporting to make it more actionable to the user

## 📃 Motivating Example

Typescript makes coding easier, not harder!

## 💻 Use Cases

Regular software development. There are no known workarounds, other than installing Github Copilot