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