Missing intellisense when importing .ts file in .js file

Question

. 。 Answers to this question are eligible for a +50 reputation bounty. Nautigsam wants to to this question: ：

I believe this is a serious bug that prevents teams to transition easily to TypeScript.

I try to use tsx to run a NodeJS application made of JavaScript and Typescript modules. The JavaScript modules are ESM, not CommonJS. For example I have these files:

// provider.ts
export funcA(p: unknown): unknown {...}

// consumer.js
import * as provider from "./provider.ts"

provider.funcA("foo");

It runs very well with tsx. VSCode's intellisense works well in TS file but it doesn't in JS file. When I hover provider it shows import provider and I have no completion whatsoever. Here is my tsconfig.json :

{
  "compilerOptions": {
    "module": "NodeNext",
    "target": "ESNext",
    "allowJs": true,
    "strict": true,
  },
  "include": [
    <the directory containing both JS and TS files>
  ],
}

How can I make Intellisense work in VSCode for TS imports in my JS files?

Answer 1

I found a solution. It seems TypeScript can not understand when I import a .ts module.

I had to remove the .ts part of the import. I had to add "moduleResolution": "Node" to my tsconfig.json to remove resolve errors.

I also got some trouble with my eslint configuration. I installed packages @typescript-eslint/parser and eslint-import-resolver-typescript and added this to my .eslintrc.json :

"extends": [
  ...
  "plugin:import/typescript"
],
...
"settings": {
  "node": {
    "tryExtensions": [".js", ".node", ".ts"]
  }
}

Now it works. I get full Intellisense in my JS file.