DEV Community

Luciano Graziani
Luciano Graziani

Posted on

How to make TS more intelligent?

I have a monorepo like this:

root/packages
  |-lib1
  |-lib2
  |-lib3

lib3 depends of both lib1 and lib2. I'm using TS v3.7.2 with composite (true), baseUrl, paths and references props to be able to work with the new ts project references.

Everything is ok except for one thing: I'm using VSCode, I'm writing something for lib3 and using an enum from lib1, but the enum is still not imported. When I ask VSCode to show me the possible imports for the enum, it doesn't show anything, but if I write the import by hand, it recognize it.

E.g:

file in lib3 where VSCode doesn't know where to import from

export function bla(key: EnumFromLib1) {
  // do something
}

file in lib3 where VSCode know

import {} from 'lib1/some/path/to/file';

export function bla(key: EnumFromLib1) {
  // do something
}

In the second example, if I press the keyboard shorcut for importing EnumFromLib1 it will list the possibility from the lib1/some/path/to/file file.

So, the question is: How can I configure TS to help him know beforehand that I have more elements in those files?

Thank you!

Top comments (4)

Collapse
 
shhdharmen profile image
Dharmen Shah • Edited

I am not sure how to fix that, but for me it's working fine. See attached image.screenshot

Collapse
 
lgraziani2712 profile image
Luciano Graziani

Yep, that works for me too. What I was trying to say is that 3rd party libs (inside node_modules) are not cached or read eagerly, and until you don't import something from the library, you won't have intellisense for that.

I wanted to know if it was possible to tell vscode to load eagerly some libs (we have a few private packages we use in our apps).

Collapse
 
shhdharmen profile image
Dharmen Shah

The reason for not loading node modules eagerly:

#

This is an intentional performance/helpfulness trade-off.

We don't eagerly consume all .d.ts files from node_modules - doing so would be prohibitively expensive in a world where there are regularly possible thousands of definition files in node_modules.

When the Angular .d.ts file isn't consumed, we have no way of knowing that NgModule happens to come from @angular/core, thus can't suggest that auto-import.

.

Although, you can achieve it using the way mentioned here:

Auto complete not working for packages except those under @types folder #30474

EnixCoda avatar
EnixCoda commented on Jan 19, 2019
  • VSCode Version: 1.30.2
  • OS Version: macOS v10.13.6

Auto complete is one of my favorite features of VS code. But sometimes it doesn't provide what I need.

Steps to Reproduce:

  1. Create a project with create-react-app: npx create-react-app test-auto-complete --typescript
  2. Create a empty file src/test.tsx.
  3. Make sure auto complete works: type isvalid and get following suggestions image Then confirm: image
  4. Install a typed package from npm. (I made one - safe-touch
  5. See if auto complete works for the package(type safe and expect suggestion of safeTouch): image Negative :(
  6. There is a difference between the types file of safe-touch and react. Safe-touch's is directly under node_modules while react's is under node_modules/@types/. Then I tried to make a folder under @types for the package, simply cp -r node_modules/safe-touch node_modules/@types.
  7. See if auto complete works now: image It works! πŸŽ‰πŸŽ‰

So it seems that VS code is not able to auto complete types of node_modules/[package] even if the package is correctly typed?

Does this issue occur when all extensions are disabled?: Yes/No No

Thread Thread
 
lgraziani2712 profile image
Luciano Graziani

Amazing! I didn't knew that! Those are really helpfull links. Thank you @shhdharmen !