24. 如何在 TypeScript 中使用 JQuery

这个需求也经常使用,就是在 TypeScript 的代码中使用其他类库,其实这里就涉及到一个类型文件(Type file)的问题,网上有大量别人写好的类型文件,我们只要下载使用就可以了。

引入 JQuery 框架库

接着上节课的代码,在TSTest文件夹的src目录下,引入JQuery文件,这里采用CDN的形式进行引入。

BootCDN 地址: https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js

直接在index.html加入<script>标签,代码如下:

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>

有了 jquery 框架,就可以在TypeScript文件中进行使用JQuery的语法了。

然后在page.ts文件中编写如下代码。

const teacher: string = "mybj";
console.log(teacher);

$(function () {
  alert("mybj");
});

写完后到终端中输入yarn test进行编译和启动服务。然后在地址栏输入了http://localhost:1234,可以看到程序可以正常输出,也没有任何的报错。

安装 types/jquery(解决方法)

第一种:就是安装别人写好的文件

但是在vscode中是会报错的,这时候就需要我们安装类型文件type file,直接可以用 npm 进行安装。

npm i @types/jquery

第二种:简单粗暴

直接在page.ts文件的头部加入这句代码:

declare var $: any;

第三种:自己写一个.d.ts声明文件的类库,如果你用的类库很少见,就需要自己写了。这个写起来还是很麻烦的。我只是简单的学过,但在工作中从来没自己写过,所以也不推荐给大家。比如 JQuery 就有几十个接口,如果你要写,这个文件会写很长,所以原则就是有别人写好的就直接用,实在没有就用粗暴的方法,如果实在不行,再考虑写.d.ts声明文件。

结语

TypeScrip 的教程我们就暂时告一段落,更多相关内容推荐大家学习《Vue3.x+TS教程》《学习Vue3》。

1. 本站所有免费资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » 24. 如何在 TypeScript 中使用 JQuery

发表评论

前端开发相关广告投放 更专业 更精准

立即查看 联系我们