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.

Comienza con la implementación de TypeScript de las sugerencias insertadas y su integración con VSCode, utilizando como caso de reproducción el ejemplo de asignación por desestructuración del issue. Determina cómo se representan los tipos inferidos para cada variable desestructurada y, a continuación, verifica que las sugerencias aparezcan tanto para value como para setValue sin cambiar el JavaScript emitido.