IDE warning when using jQuery with TypeScript in PhpStorm

Question

I just started migrating from plain JS to TypeScript. All works well, except for a warning I get whenever I use a jQuery element in one of my classes. Both versions below compile and work in the browser, give me an annoying warning in the IDE though that I'd like to get rid of.

Attempt 1: Use $ as type of my element:

import $ from 'jquery';

class SomeClass {
    private $someElement: $;

    constructor() {
        this.$someElement = $('.someClass')
    }
}

This however gives me no IDE support, PhpStorm does not know jQuery's attributes and methods.

Attempt 2: Install @types/jquery and use JQuery as type:

import $ from 'jquery';

class SomeClass {
    private $someElement: JQuery;

    constructor() {
        this.$someElement = $('.someClass')
    }
}

IDE support works now, however, I get a warning at the position of the dollar sign of my import saying

TS1259: Module '"/[ ... ]/node_modules/@types/jquery/index"' can only be default-imported using the 'esModuleInterop' flag  index.d.ts(34, 1): This module is declared with 'export =', and can only be used with a default import when using the 'esModuleInterop' flag.

Somehow, PhpStorm now thinks, jquery is not node_modules/jquery, but node_modules/@types/jquery.

While it still compiles, I am annoyed by the IDE warning. Does anyone has an idea how to get rid of it?

For reference, here's my dependency list

"dependencies": {
    "jquery": "^3.6.3"
  },
  "devDependencies": {
    "@types/jquery": "^3.5.16",
    "esbuild": "^0.17"
  }

I'm using PhpStorm 2022.3.2 on Ubuntu 22.

Answer 1

From your warning message:

and can only be used with a default import when using the 'esModuleInterop' flag.

Go to tsconfig.json and enable

"compilerOptions": {
  ...
  "esModuleInterop": true
}