Add quick fix to export unexported members to fix unresolved symbol errors

Search Terms

import
export
unexported
symbols
auto import
completion
global
globals
intellisense

Suggestion

tsserver can auto-complete exported symbols from other modules, and add an import statement that imports the symbol you selected.

It should also suggest global symbols from other modules that are not exported, and add the export keyword if the suggestion is selected.

Use Cases

When I write a module I can't predict every use case of it, and I only export the global symbols that I think other modules would need to use. But when I'm working on a different module and I realize I want to use a symbol which is not exported by the other module (or maybe I don't even remember if it is or isn't exported), I would like my editor to export and import it for me instead of me having to find that symbol manually (because even go-to definition won't work) and export it, and then go back and auto-complete to auto-import.

This is also very very very useful when converting a web project to use imports. You can just go over all of the "undeclared symbol" errors and auto-complete to export and import the correct symbol.

Examples

module.ts:

function foo(name = 'World') {
  console.log('Hello ' + name);
}

export function bar() {
  foo();
}

app.ts:

import { bar } from './module.ts';

bar();

I now want to customize the "hello" message, so I start typing foo and then wait for completion suggestions which include the function foo from module.ts.

After selecting that, the symbol foo is automatically exported and imported for me, and I can use it immediately:

module.ts:

export function foo(name = 'World') {
  console.log('Hello ' + name);
}

export function bar() {
  foo();
}

app.ts:

import { bar, foo } from './module.ts';

bar();
foo('TypeScript');

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.

The issue describes tsserver's existing auto-import and completion behavior; begin by tracing how it identifies exported symbols. Done means completion can offer an unexported global symbol and selection updates both the defining module with an export and the importing module with an import, while preserving existing behavior.