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

最新推荐文章于 2025-06-28 16:56:37 发布
最新推荐文章于 2025-06-28 16:56:37 发布
阅读量1.3k 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： javascript ViewUI
原文链接：https://juejin.im/post/5c90b3525188252db901a791
该博客讲述了使用vue-cli 3.0脚手架搭建的vue项目，用typescript编写时遇到的问题。因项目需引入第三方插件，要在index.html顶部引入jquery JS，组件使用时需声明$为外部变量，给出两种声明方式解决ts解析器编译问题。

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

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

当组件使用 ('#div').click() 方法的时，ts 编译器提示 一个错误，错误如下： Cannot find name ''. Do you need to install type definitions for jQuery? Try npm i @types/jquery. 1 2 3 报错 但是我们已经在首页引入了，不需要再次cnpm 安装了。 这时候我们需要在 src 目录下 shims-tsx.d.ts 文件中声明一下，使用 declare 声明一下。或者在使用Jquery语法的组件里 declare var: any; 声明一下 $ 为外部的变量，这样 ts 解析器就能正常编译 ts文件了。 方式一：

declare global { var $: any; .... } 1 2 3 4 方式二：(建议)

转载于:https://juejin.im/post/5c90b3525188252db901a791

vue3+ts中使用封装后的echarts。适合小白（报错的也可以看Initialize failed: invalid dom.）
work33的博客
10-20 1636
封装的echarts userEach.ts import { ref, nextTick } from 'vue' import * as echarts from 'echarts' //这个方法，接收一个option和dom的id //目的：用的时候只需要传option和dom的id就能绘制出一个图表，很适合我们小白刚开始学函数的用法 export default function useEchar (option:object, name:string) { const myChart = re
Vue3+TypeScript？看这一篇就够了
m0_67266171的博客
03-01 3977
1、TypeScript快速上手 1.1 初识 TypeScript TypeScript 的介绍 TypeScript是一种由微软开发的开源、跨平台的编程语言。它是JavaScript的超集，最终会被编译为JavaScript代码。 2012年10月，微软发布了首个公开版本的TypeScript，2013年6月19日，在经历了一个预览版之后微软正式发布了正式版TypeScript TypeScript的作者是安德斯·海尔斯伯格，C#的首席架构师。它是开源和跨平台的编程语言。 TypeScript扩展了J
vue3.0+typescript集成jquery、bootstrap、jquery.dataTable插件、echart
10-31
vue3.0+typescript通过npm管理包，然后导入ts中进行集成jquery、bootstrap、jquery.dataTable插件、echart，具体界面请看：https://blog.youkuaiyun.com/sunxiaoju/article/details/109401288
TypeScript与jQuery整合实践指南
最新发布
weixin_42596246的博客
06-28 634
jQuery是一个快速、小巧且功能丰富的JavaScript库。它通过提供一种简单的方式，来简化HTML文档遍历和操作、事件处理、动画和Ajax交互，使得开发者能够以更少的代码完成更多的功能。jQuery库的代码经过了高度的优化，并通过提供跨浏览器兼容性，简化了开发者的工作流程。在现代的Web开发中，利用npm（Node Package Manager）安装和管理项目依赖是一种常见的做法。npm是一个强大的包管理器，它能够让你轻松地下载jQuery库及其类型定义文件。
vue3+ts+vite+jQuery
Jay_sixsixsix的博客
05-29 861
【代码】vue3+ts+vite+jQuery。
Vue 中使用 JQuery 插件不起作用
WS的小屋
10-15 2114
有时候在 vue 的代码中使用 jQuery 会不起作用，这是因为 vue 还没有绑定变量，所以我们使用的 jQuery 根本就找不到目标变量，就不会执行，正确的做法是先设置一个时延，稍微等一等 vue 的加载。 界面的渲染需要等 VUE 绑定好变量后才做，我们可以使用 setTimeout 函数做一个时延： // 界面的渲染需要等 VUE 绑定好变量后才做: 所以加延时 100 ms setTimeout(function () { $("tr.active").trigger("click"); }
VUE3+TS 引入JQuery
qq_16733389的博客
11-02 4028
先执行如下安装命令，安装jquery npm install jquery npm install @types/jquery 然后在main.ts中引入 import $ from 'jquery' createApp(App).use($) 在shims-vue.d.ts 配置 /* eslint-disable */ declare module '*.vue' { import type { DefineComponent } from 'vue' const component: D
vue2/vue3、JavaScript、TypeScript理论库
XY040506的博客
05-27 1429
当data发生改变会根据新的数据生成一个新的虚拟dom ，新的虚拟dom和旧的虚拟dom进行对比，这个对比的过程就是diff算法，会找到不同地方，只去渲染不同的地方。如果data是⼀个函数的话，这样每复⽤⼀次组件，就会返回⼀份新的data，类似于给每个组件实例创建⼀个私有的数据空间，让各个组件实例维护各自的数据，避免相互影响。2.⼦传⽗ ⼦组件通过this.$emit("⾃定义的事件",要传给⽗组件的数据), ⽗组件通过⼦组件的标签监听⾃定义的事件,通过⽅法来接收传递的数据。
Vue3+Ts中使用Jquery
努力的nana
09-15 1204
Vue3+Ts中使用Jquery。
在vue+ts中使用jquery+bootstrap
sxj的专栏
10-30 1479
1、由于bootstrap使用了jquery，因此需要加入jquery，首先在package.json中加入： "jquery": "3.5.1", "@types/jquery": "3.3.1", "bootstrap": "4.5.2", "@types/bootstrap": "4.1.0", 如下图所示： 2、执行npm install进行安装。 3、在package.json中的eslintConfig->env中加入："jquery":tr.
vue-cli3 中引入 Jquery vue中配置Jquery
weixin_42084225的博客
11-07 577
1. 安装jquery npm install jquery --save 或 在package.json中指定版本号，然后运行npm install命令 "dependencies": { "jquery": "^3.4.1" } npm install 2. 配置vue.config.js 在 vue.config.js 中 const webpack = require('w...
Vue2+JS项目升级为Vue3+TS之jquery的maphilight引入项目（附使用）
刘一帆的博客
09-09 687
jQuery包里不自带maphilight版本，而且！本人由于想提升自己的项目开发能力，所以将就项目的vue2+JavaScript+webpack的旧技术栈升级为vue3+typescript+vite的技术栈，所以遇到很多坑，以下是maphilight的解决方法。在typescript用JavaScript引入的包，简单粗暴，直接在index.html引入js文件即可全局使用，但是typescript会报类型问题，怎么解决呢，通过全局申明即可解决，故完成！
Vue 中使用jquery: Cannot find name ‘$‘. Did you mean the instance member ‘this.$‘?
bao
03-31 2549
报错原因 在vue + ts项目中使用 jquery 全局注册后 没有在 ts 声明文件中添加jquery声明 报错内容: Cannot find name '$'. Do you need to install type definitions for jQuery? Try 'npm i @types/jquery' Cannot find name '$'. Did you mean the instance member 'this.$'? vue 使用 jquery 全局注册 + 声明 安装j
解决 Cannot find name ‘$‘
u012381782的博客
11-30 3869
ERROR in src/app/coms/simple-icon-tips-tag/simple-icon-tips-tag.component.ts(17,5): error TS2581: Cannot find name '$'. Do you need to install type definitions for jQuery? Try `npm i @types/jquery` and then add `jquery` to the types field in your tsconfig.
简单的TS入门
热门推荐
qq_15351029的博客
11-09 2万+
TypeScript NoteVersion :  1.0、 TestVersion  :  ts2.4.2 Data         : 2017年8月27日 1、前置知识 l   理解ES5、ES6、javaScript、TypeScript的概念和关系 l   JavaScript开发经验 l   如果懂java学习来会事半功倍 2、TypeScript优势 u  支持ES
ts中引入 js的理论与实践
dualvencsdn的博客
06-30 5432
目录理论ts中引入 js使用流程全局类库模块类库UMD类库为类库添加插件实践引入 jitsi的lib 引入 jquery的lib 在本人的博客中，总结了js的几种形式CJS,AMD,UMD和ESM_dualven_in_csdn的博客-优快云博客1.首先要清除类库是什么类型，不同的类库有不同的使用方式2.寻找声明文件JS类库一般有三类：全局类库、模块类库、UMD库。例如，jQuery是一种UMD库，既可以通过全局方式来引用，也可以模块化引用。声明文件当我们要使用一个类库时，需要ts声明文件，对外暴露API
vue3中使用echarts4.x（超详细），内附代码
qq_42506385的博客
09-23 1011
echart在页面切换时，不会进行销毁，在服务器上可能会不显示，解决方法具体看文章
ts基础
黑黑黑眼圈博客
04-19 731
这里写目录标题一、ts中的数据类型1.1 js和ts的区别1.2 js有的类型1.4.1 类型断言1.5 类型定义二、函数定义2.1 可选参数2.2 默认参数三、ts中的接口3.1 定义接口对参数进行约束四、ts中的泛型 一、ts中的数据类型 1.1 js和ts的区别 语言层面：JavaScript和TypeScript都是ECMAScript（ECMA-262）的具体实现。 执行环境层面：浏览器引擎和Node.js都能够直接运行JavaScript，但无法直接运行TypeScript。 时序层面：Type
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值