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.

TypeScript のインレイヒント実装とその VSCode 統合から始め、issue にある分割代入の例を再現ケースとして使用します。分割代入された各変数の推論された型がどのように表現されるかを確認し、そのうえで、出力される JavaScript を変更せずに value と setValue の両方にヒントが表示されることを検証します。