Display inlay hints with defining variables by destructuring assignment

🔍 Search Terms

inlay hints
vscode
destructuring assignment

✅ 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 feature would agree with the rest of our Design Goals: https://github.com/Microsoft/TypeScript/wiki/TypeScript-Design-Goals

⭐ Suggestion

In the following example, inlay hints are not shown in VSCode.

const [value, setValue] = useState("");

I hope inlay hints will look like this.

const [value /*: string */, setValue /*: React.Dispatch<React.SetStateAction<string>> */] = useState("");

📃 Motivating Example

It allows you to know the type without hovering, improving development efficiency.

💻 Use Cases

1. What do you want to use this for?
   I want to display inlay hints with defining variables by destructuring assignment in VSCode.
2. What shortcomings exist with current approaches?
   I can't know the inference types without hovering.
3. What workarounds are you using in the meantime?
   I hover and look at the types.

Inizia dall’implementazione TypeScript degli hint inline e dalla relativa integrazione con VSCode, usando come caso di riproduzione l’esempio di assegnazione tramite destrutturazione riportato nell’issue. Determina come vengono rappresentati i tipi inferiti per ogni variabile destrutturata, quindi verifica che gli hint compaiano sia per value sia per setValue senza modificare il JavaScript emesso.