在PhpStorm中使用jQuery与TypeScript时的IDE警告消除问询

架构老林

2026-7-29

解决TypeScript中jQuery默认导入的TS1259警告问题

问题背景

从原生JS迁移到TypeScript后，在类中使用jQuery元素时遇到两类问题：

直接用$作为元素类型，IDE无法识别jQuery的属性和方法，没有代码提示
安装@types/jquery并使用JQuery类型后，出现TS1259警告：Module can only be default-imported using the 'esModuleInterop' flag，虽不影响编译但干扰开发体验

解决方案

方案1：修改tsconfig.json启用esModuleInterop

在项目根目录的tsconfig.json中添加或更新编译配置：

{
  "compilerOptions": {
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true // 可选，配合esModuleInterop实现更顺畅的默认导入兼容
  }
}

修改后原代码可正常使用，IDE能正确识别jQuery类型，警告自动消失：

import $ from 'jquery';

class SomeClass {
    private $someElement: JQuery;

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

原理：jQuery的类型声明采用CommonJS风格的export=导出，esModuleInterop让TypeScript兼容这类非ES模块的默认导出逻辑，解决导入语法冲突。

方案2：使用命名空间导入（无需修改配置）

如果不想调整TypeScript编译配置，可改用命名空间导入方式：

import * as $ from 'jquery';

class SomeClass {
    private $someElement: JQuery;

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

此写法同样能获得完整的IDE代码提示，同时规避TS1259警告。