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.

Inizia con le diagnosi esposte tramite la TypeScript API e tssserver, quindi confronta le diagnosi attuali come semplici stringhe con i dati strutturati e le informazioni sulla sorgente proposti. Esamina come gli strumenti IDE analizzano attualmente i messaggi o attraversano l’AST; il lavoro è completo quando gli strumenti possono ottenere un contesto diagnostico più ricco e supportare visualizzazioni interattive senza modificare il comportamento di runtime esistente.