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》。

以上关于24. 如何在 TypeScript 中使用 JQuery的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。