TypeScript集成jQuery报错：Uncaught TypeError: $ is not a function 求助

我之前也碰到过一模一样的问题！结合你的编译流程和浏览器能识别$的情况，大概率是TypeScript类型声明或者Webpack模块加载的问题，给你几个排查方向：

• 首先得确保你装了@types/jquery，毕竟TypeScript需要类型定义才能正确识别$和jQuery对象，执行这个命令就行：

  npm install @types/jquery --save-dev
  

• 然后去tsconfig.json里检查下types数组有没有包含jquery，或者typeRoots是不是指向了node_modules/@types目录，配置大概是这样：

  {
    "compilerOptions": {
      "types": ["jquery"],
      "typeRoots": ["node_modules/@types"]
    }
  }
  

Webpack有时候会把jQuery包装成ES模块，导致全局的$没正确挂载，或者代码里的$被当成局部变量处理，试试这两个办法：

• 用ProvidePlugin自动注入：在Webpack配置里加个ProvidePlugin，让Webpack自动把$和jQuery注入到每个模块里，不用你手动import：

  const webpack = require('webpack');
  
  module.exports = {
    // ...你的其他配置
    plugins: [
      new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery'
      })
    ]
  };
  

• 暴露全局变量（适合CDN引入的情况）：如果你是用CDN加载jQuery，不想让Webpack把它打包进去，可以在Webpack配置里加externals，告诉它直接用全局的jQuery变量：

  module.exports = {
    // ...其他配置
    externals: {
      jquery: 'jQuery'
    }
  };
  

  同时在你的TypeScript代码顶部加个声明，确保TS能识别全局的$：

  declare const $: JQueryStatic;
  

有时候不小心在函数或者模块里定义了同名的$变量，比如这样：

function handleForm($: string) {
  // 这里的$是字符串类型，调用$()肯定会报错！
  $('#form').submit();
}

仔细检查下你的代码，有没有这种局部变量覆盖全局$的情况。

虽然你说浏览器能识别$，但还是要确认jQuery是在你的编译后代码之前加载的。如果是CDN引入，要把jQuery的<script>标签放在你的bundle.js前面；如果是npm安装的，用ProvidePlugin的话一般没问题，但可以看下打包后的代码，确认jQuery代码是不是在你的业务代码之前执行。

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