Typescript: Improve structure, formatting, (human) parsability and readabiliy of errors

[emattias]

Suggestion

Comparing my DX/UX experience from working with flow versus TypeScript, the error messages is one of the few things that I preferred how flow does it. Especially after flow v0.66 release. I believe they integrated alot from the glow project. I would love it if typescript would adopt some for the formatting and helpful information that flow has in their error messages.

This blog post explains more about the flow 0.66 error message changes: http://medium.com/flow-type/better-flow-error-messages-for-the-javascript-ecosystem-73b6da948ae2

Here are a couple of things I can think of that would help me find the actual problem/conflict that I can take action on:

• prettifying/formatting the outputted types
• syntax highlighting
• bold/highlight the conflicting parts

Use Cases

Every time typescript finds an error (which us developers will have to read and understand and take action on :) ). I am talking both on the command line but also in IDEs like vscode. There is an issue related to this in the vscode repo here: https://github.com/Microsoft/vscode/issues/54503

Examples

Heres and example of the ginormous unstructured blob of text that is a ts error with big types involved:

Type '({ expandedRowIds, orderBy, currentPage, filters: { columns: columnFilters, period, categoryIds }, ...restUrlQueryState }: Pick<Overwrite<DataGridUrlQueryStateUrlSerialized, { filters: { columns: { promotionName?: string | undefined; startDate?: string | undefined; endDate?: string | undefined; "sumFacts.switching.amount"?: string | undefined; "sumFacts.netLift.profit"?: string | undefined; "sumFacts.netLift.amount"?: string | undefined; }; period: Date[]; categoryIds: string[]; }; }>, "hiddenColumnNames" | "filters" | "orderBy" | "expandedRowIds" | "currentPage">, pageSize: any) => Dictionary<any>' is not assignable to type '(a: Overwrite<DataGridUrlQueryStateUrlSerialized, { filters: { columns: { promotionName?: string | undefined; startDate?: string | undefined; endDate?: string | undefined; "sumFacts.switching.amount"?: string | undefined; "sumFacts.netLift.profit"?: string | undefined; "sumFacts.netLift.amount"?: string | undefined; }; period: Date[]; categoryIds: string[]; }; }>) => DataGridQueryVariables'.

Checklist

My suggestion meets these guidelines:

• [ ] This wouldn't be a breaking change in existing TypeScript/JavaScript code
• [ ] This wouldn't change the runtime behavior of existing JavaScript code
• [ ] This could be implemented without emitting different JS based on the types of the expressions
• [ ] This isn't a runtime feature (e.g. library functionality, non-ECMAScript syntax with JavaScript output, etc.)
• [ ] This feature would agree with the rest of TypeScript's Design Goals.

[weswigham]

We spoke with the vscode team and got https://github.com/Microsoft/vscode/issues/64566 opened a few days ago. We're already looking at it 😉

[sjelfull]

Improving this and doing something like what Flow is doing would save so many people so much pain. As far as I can tell not much have happened in VS Code on that front. There is also the output in CLI to think about.

This could be hidden behind a toggle if backwards compatibility is a worry.