如何在TypeScript中导入jQuery以将其作为属性类型使用？

这个问题的核心原因是你的tsconfig.json没有让TypeScript加载jQuery的类型定义文件——编译器能识别你导入的$作为可调用的值，所以$('selector')能正常工作，但无法识别$作为类型使用，因此会抛出Cannot find name $的错误。

解决方案一：修改tsconfig.json的types配置 #

在compilerOptions的types数组中添加"jquery"，明确告诉TypeScript要加载jQuery的类型定义：

{
  "compilerOptions": {
    "lib": ["es2018", "dom"],
    "baseUrl": "./src2",
    "allowSyntheticDefaultImports": true,
    "moduleResolution": "node",
    "types": [ "node", "jquery" ], // 新增"jquery"项
    "typeRoots": [ "node_modules/@types" ]
  }
}

解决方案二：移除types数组（可选） #

如果不需要手动指定加载的类型包，可以直接删除types数组。此时TypeScript会自动扫描node_modules/@types下的所有类型定义并加载，同样能解决问题：

{
  "compilerOptions": {
    "lib": ["es2018", "dom"],
    "baseUrl": "./src2",
    "allowSyntheticDefaultImports": true,
    "moduleResolution": "node",
    "typeRoots": [ "node_modules/@types" ]
  }
}

额外兼容性检查 #

确保你安装的@types/jquery版本和jQuery本体版本兼容，你使用的是jQuery 3.3.1，建议安装对应版本的类型包：

npm install --save-dev @types/jquery@3.3.x

完成以上修改后，PhpStorm就能正确识别$作为类型使用，不会再出现报错。

内容的提问来源于stack exchange，提问作者FreeLightman