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.

Start with the TypeScript inlay hints implementation and its VSCode integration, using the destructuring assignment example in the issue as the reproduction case. Determine how inferred types for each destructured variable are represented, then verify that hints appear for both value and setValue without changing emitted JavaScript.