Refactor/codefix: find missing variable in destructured object

Search Terms

refactor
codefix
auto import
destructuring
parameter

Suggestion

There is a feature in VSCode today where you can type the name of a function and the editor suggests automatically importing that function, which is very useful.

It would be useful to have a similar feature for finding variables in objects that have been destructured, for example in the props parameters of react functions. It should be possible for typescript to find out that a variable is available in a destructured object in the current closure, for example:

In the above example the first option should suggest to add name to the destructuring of Props in the parameters of the function, since there is a name: string as part of Props.

Use Cases

Using destructuring is very common in for example functional react components. The props object can grow very large and it is annoying and repetitive to type out the name of all the destructured properties.

Checklist

My suggestion meets these guidelines:

• 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, etc.)
• This feature would agree with the rest of TypeScript's Design Goals.

No files, tests, or entry points are named in the issue. Start by locating TypeScript's language-service codefixes for missing names and the handling of destructured parameters, then compare the proposed behavior with existing auto-import suggestions. Done means a missing variable can suggest adding the corresponding property to the current destructuring pattern, with coverage for the described example.