Skip to content

Better error reporting #54357

@mschipperheyn

Description

@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

Metadata

Metadata

Assignees

No one assigned

    Labels

    Needs ProposalThis issue needs a plan that clarifies the finer details of how it could be implemented.SuggestionAn idea for TypeScript

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions