Vue使用ts typescript，使用Jquery报错 , $ 不认识的解决办法

最新推荐文章于 2025-06-28 16:56:37 发布

原创最新推荐文章于 2025-06-28 16:56:37 发布 · 6.6k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#Typescript #vue-cli 3.0 #vue.js #jquery #js

JS 同时被 3 个专栏收录

22 篇文章

订阅专栏

vue

8 篇文章

订阅专栏

vue.config.js

2 篇文章

订阅专栏

本文介绍在Vue CLI 3.0脚手架的TypeScript项目中，如何正确引入并使用jQuery，避免ts编译器关于'$'未定义的错误提示。通过在shims-tsx.d.ts文件或组件内声明全局变量$，使项目能够顺利编译。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue-cli 3.0 脚手架搭建的 vue项目，使用 typescript编写。期间遇见了不少坑。
由于项目需要用到第三方密码键盘插件和加密插件，须在index.html 页面顶部引入jquery JS.

<script src="./jquery-2.1.4.js"></script>
当组件使用 $('#div').click() 方法的时，ts 编译器提示 一个错误，错误如下：
Cannot find name '$'. Do you need to install type definitions for jQuery? Try `npm i @types/jquery`.

$报错
但是我们已经在首页引入了，不需要再次cnpm 安装了。
这时候我们需要在 src 目录下 shims-tsx.d.ts 文件中声明一下，使用 declare 声明一下。或者在使用Jquery语法的组件里 declare var $: any; 声明一下 $ 为外部的变量，这样 ts 解析器就能正常编译 ts文件了。
方式一：

declare global {
	var $: any;
	....
}

方式二：(建议)

<script lang="tsx" type="text/tsx">
	import { Vue } from 'vue-property-decorator';
	declare  var $: any;
	export default class AddCardNum extends Vue { }
</script>