Add structure to diagnostics to enable nicer diagnostic output and interactivity in tooling such as IDEs

🔍 Search Terms

diagnostics, interactive errors, structured diagnostics, error formatting

✅ Viability Checklist

• 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, new syntax sugar for JS, etc.)
• This isn't a request to add a new utility type: https://github.com/microsoft/TypeScript/wiki/No-New-Utility-Types
• This feature would agree with the rest of our Design Goals: https://github.com/Microsoft/TypeScript/wiki/TypeScript-Design-Goals

⭐ Suggestion

change diagnostics to some structured data instead of plain strings. At its simplest this would be including an array of the sources for the text that populates the substitution variables in the diagnostic message strings. If we also keep a cache or recent sources and include a key into that cache in the diagnostic, then we can provide callback functionality for tools to get more information in both the TS api and tssserver.

📃 Motivating Example

IDEs can provide much richer displays for error messages and even add interactivity. Imagine having syntax highlighting for types or being able to click to "go to definition" in an error message.

A very rough proof of concept showing an enhancement to the problems view in VsCode

https://github.com/microsoft/TypeScript/assets/84949734/25f8366d-a94e-44fb-bfd2-9f204be96097

💻 Use Cases

1. What do you want to use this for?
   a. Better display and interaction with error message
2. What shortcomings exist with current approaches?
   a. Currently only possible by parsing error text.
   b. Advanced usages require traversing the AST to find the nodes and types that contribute to the error
3. What workarounds are you using in the meantime?
   a. see 2.

Beginne mit den über die TypeScript API und tssserver bereitgestellten Diagnosen und vergleiche dann die aktuellen Diagnosen als einfache Zeichenketten mit den vorgeschlagenen strukturierten Daten und Quellinformationen. Überprüfe, wie IDE-Tools derzeit Nachrichten parsen oder den AST durchlaufen; fertig ist die Aufgabe, wenn Tools umfangreicheren Diagnosekontext abrufen und interaktive Darstellungen unterstützen können, ohne das bestehende Laufzeitverhalten zu ändern.