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.

Issue không nêu tên tệp mã nguồn hoặc test TypeScript nào; hãy bắt đầu bằng cách theo dõi cách các chẩn đoán của compiler được tạo ra cho CLI, rồi cách các chẩn đoán đó đến được các IDE như VS Code. Hãy xác định hành vi định dạng và tô sáng mong muốn dựa trên ví dụ Flow được liên kết trước khi xác định các test có thể ghi nhận hành vi đó.