Search code examples
javascripttypescriptvisual-studio-codees6-modulestsx

Missing intellisense when importing .ts file in .js file


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?


Solution

  • 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.