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

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.

The issue names no TypeScript source files or tests; begin by tracing how compiler diagnostics are produced for the CLI and then how those diagnostics reach IDEs such as VS Code. Define the desired formatting and highlighting behavior from the linked Flow example before identifying tests that can capture it.