VS Code中TypeScript项目不引入jQuery标签使用$报错求助

嘿，我之前也碰到过一模一样的问题！智能提示正常但运行时炸锅，本质是TypeScript的模块作用域和浏览器全局环境的不匹配——你装的jQuery和类型定义只是让TS编译器认识$，但运行时$并没有被挂载到全局window对象上，浏览器自然找不到它。

下面分几种场景给你解决方案：

一、如果你用Webpack/Vite这类模块打包工具（最常见的场景） #

方案1：全局挂载jQuery #

在你的项目入口文件（比如main.ts）里导入jQuery，并手动挂载到window上，这样整个项目的全局环境都能访问到$：

import $ from 'jquery';

// TypeScript会阻止直接给window加属性，所以用类型断言绕一下
(window as any).$ = $;
(window as any).jQuery = $; // 可选，同时挂载jQuery变量

之后不管在哪个TS文件里，直接写$('#test').show()就行，运行时不会再报错。

方案2：按需导入（更符合模块化规范） #

如果不想污染全局环境，也可以在每个需要用jQuery的文件里单独导入：

import $ from 'jquery';

// 直接使用，不需要全局挂载
$('.modal').fadeIn();

这种方式虽然麻烦点，但能保持代码的模块化，适合大型项目。

方案3：用打包工具插件自动注入（Webpack专属） #

如果你用Webpack，可以配置ProvidePlugin让它自动在每个模块里注入$，不用手动导入：

// webpack.config.js
const webpack = require('webpack');

module.exports = {
  // ...其他配置项
  plugins: [
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery' // 兼容jQuery的其他写法
    })
  ]
};

配置完后，所有TS文件里都能直接用$，不需要手动导入，也不用挂载到window。

二、纯TypeScript项目（无打包工具，直接编译成JS运行） #

这种情况浏览器默认不支持ES模块，需要调整tsconfig.json的配置：

1. 先修改tsconfig.json的模块设置：

{
  "compilerOptions": {
    "module": "UMD", // 或者AMD，让编译后的JS能被浏览器识别
    "types": ["jquery"], // 确保类型定义被加载
    // ...其他配置
  }
}

2. 然后在入口TS文件里导入并挂载到window：

import $ from 'jquery';
(window as any).$ = $;

3. 最后在HTML里用script标签引入编译后的JS文件（如果用UMD模块，不需要加type="module"）。

补充：类型声明的小技巧 #

如果还是担心TS类型提示的问题，可以在项目根目录创建一个globals.d.ts文件，明确告诉TS$是全局变量：

declare var $: JQueryStatic;

但注意：这只是类型层面的声明，运行时还是需要前面的挂载步骤，不然浏览器还是会报错！

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