Global completion / Auto import for JavaScript symbols from modules without typings included.

[g3offrey]

Search Terms

"auto import", "completion", "auto import global", "auto import cache"

Suggestion

Hi, first of all good job for your awesome work.

My suggestion is simple :
When the completion is triggered, we filter the results to exclude the ones that are not importable. As you can see in

TypeScript/src/services/codefixes/importFixes.ts

Line 610 in 3c42760

if (sourceFile === undefined || sourceFile !== from && isImportablePath(from.fileName, sourceFile.fileName)) {

However in some cases we want symbols that are not directly importable.
For example, if a JavaScript dependency doesn't include a .d.ts file, and there is one available in the TypeScript cache folder (downloaded by VSCode Automatic Type Acquisition).

I think this would fix a lot of users issues.
For example : #29039

Use Cases

This would permit, to auto import the symbols from a JavaScript package that does not include a .d.ts in his sources.
For example : react-redux, lodash.

Examples

I commented the code inside isImportablePath to have a hacky prototype.
This looks like this :

But a better version would be this (I simply copied the d.ts from the global cache to the node_modules) :

Today it looks like this (you can reproduce it creating a JavaScript project and installing react-redux) :

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.

[RyanCavanaugh]

This feels like a bug to me, but I could be missing something?

[g3offrey]

Yes I suppose, I wasn't sure if it was done on purpose or not. 😄
If you need help to fix this, don't hesitate to contact me. 👍

[smx-smx]

I'm not sure if this is the same issue, but i'll write here to avoid duplicates.

I'm having the same issue with inversify, where i want to write

new ContainerModule(...)

but the symbol "ContainerModule" cannot be found and there is 'No code actions available'

I wasn't sure if this had to do with me originally using yarn, but i can repro this with npm too

Repro steps

1. npm init
2. npm install --save inversify
3. Create a new file: test.ts
4. Write new ContainerModule and ask for completion
5. Notice No code actions available

Can repro on VSCode-Insiders

Notice tho that inversify DOES have typings

"types": "./dts/inversify.d.ts",
leading to

export { AsyncContainerModule, ContainerModule } from "./container/container_module";

Interestingly, if i open ./dts/inversify.d.ts in the same workspace, then VSCode will suggest me to import the inversify module

If this is related to an on-demand "lazy" loading mechanism, is there a way to bypass it and force tsserver to parse everything in node_modules?

Thank You

[andrewbranch]

@smx-smx that’s likely an instance of #28773, which is expected behavior. Once you use it once somewhere in your program, you’ll get auto-imports everywhere, even in other files.

[smx-smx]

Thank you @andrewbranch. I sent a follow-up there