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.

El issue no menciona archivos fuente ni pruebas de TypeScript; comienza rastreando cómo se generan los diagnósticos del compilador para la CLI y, después, cómo llegan esos diagnósticos a IDEs como VS Code. Define el comportamiento deseado de formato y resaltado a partir del ejemplo enlazado de Flow antes de identificar pruebas que puedan capturarlo.