Better error reporting

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.

⭐ 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

The issue discusses TypeScript error reporting in VSCode and compares the desired output with Jest's toMatchObject differential. It names no TypeScript files, tests, or compiler entry point, so first clarify the diagnostic scope and locate the relevant reporting path. Done would require an agreed, readable, actionable visualization and tests for it.