Better error reporting

[mschipperheyn]

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

[fatcerberus]

Typescript makes coding easier, not harder!

Catchy but cliche motivational tagline != motivating example

[so1ve]

https://github.com/yoavbls/pretty-ts-errors