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.

Commencez par l’implémentation TypeScript des indications intégrées et son intégration à VSCode, en utilisant comme cas de reproduction l’exemple d’affectation par déstructuration de l’issue. Déterminez comment les types inférés de chaque variable déstructurée sont représentés, puis vérifiez que des indications apparaissent à la fois pour value et pour setValue sans modifier le JavaScript généré.