这篇“如何在typescript中使用Jquery”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看
这篇“如何在typescript中使用Jquery”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“如何在typescript中使用jQuery”文章吧。
介绍
什么是描述文件？在回答这个问题之前，我们先思考这样一个问题，typescript和javascript原则上并不相通，那么在typescript出来之前所有的javascript是不是都不能使用了，比如jQuery，如果不能用，那是否是在可惜，因此，为了解决这个问题，typescript出了一个描述文件，也就是我们常看到的。d.ts文件，其作用就是为了打通javascript和typescript，为javascript文件描述其缺失的类型；
初始化
为了更好更直观的学习，先初始化一个项目，我们的目的是为了将jQuery和typescript混在一起
简单的话，初始化命令如下
// 初始化npm
npm init
// 初始化typescript
tsc --init
之后新建一个html文件并且在同目录下新建一个。ts文件，在html中引入jQuery的cdn，比如：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title></title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta Http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="" />
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="./demo.ts"></script>
</head>
<body></body>
<html></html>
</html>
或者使用Vue的脚手架新创建一个vue3+typescript的项目，在其public下的index.html引入上方的jquery的cdn
描述文件
我们将以。d.ts为结尾的文件称作为描述文件，至于前面的文字是什么无所谓，不管是a.d.ts还是jQuery.d.ts都可以，它的作用就是为js文件描述类型；
这个涉及到第一个知识点，关键字：declare，它代表是一个声明，声明后面为定义类型的代码的类型，下面看具体分析
定义全局变量
比如，我们现在在。ts文件中编写jquery代码
;$（function（） {}）（）;
这个一个jquery时代常见的立即执行函数的方法，如果我们直接在。ts中写，它会报错，它会提示你必须去@types中安装jq的类型，错误如下：
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
实际上我们在types中没有jquery的类型，因此，为了使它能在。ts中正常运行，我们需要在。d.ts这个描述文件中为其做声明：
declare const $: （param: （） => void） => void;
分析一下这个声明，做一个拆分，外层如下
$（） // 这是一个jquery函数
对应的声明
$:（）=>void
仔细看看，这个应该能理解，声明这 是 一 个 函 数 ， 并 且 它 没 有 返 回 值 ， 之 后 再 看 参 数 ， 这是一个函数，并且它没有返回值，之后再看参数，这是一个函数，并且它没有返回值，之后再看参数，（）里面嵌套了一个function（） {}，对应的声明里也要嵌套一个函数类型，很明显，function（） {}是$（）的参数，这个参数是一个函数，并且它也没有返回值，
// 因此在外层的声明里，添加一个参数，并为其设置函数类型且没有返回值
param: （） => void
定义全局函数
就拿上面的例子
;$（function（） {}）（）;
1
这明显也是一个函数，我们也可以使用函数的方式做声明
declare function $（params: （） => void）： void;
1
经过上面的分析，这个应该能明白点了吧，声明了一个函数$，它没有返回值，因此是void，但它有一个参数，参数是一个函数，并且也没有返回值；
到这里，可能有熟悉jQuery的小伙伴会问，jQuery还有别的用法，比如，它可以选择某个节点，为其添加内容，代码如下
$（function（） {
$（"body"）。append（"<div>oliver</div>"）
}）;
如果是这种写法，还是会报错的，没错，这种写法还是会继续报错，原因是这种写法我们没有在。d.ts中定义，因此，为这种用法，我们要写一个类型描述
// 类型
declare function $（
params: string
）： {
append: （params: string） => {};
};
这次$（）的函数是一个字符串，然后它的返回值虽然不知道具体是什么，但是既然能用。append这种方式，那么至少代表它是一个对象，在js中只有对象才有。这个操作符，之后立马有一个append的方法，它有一个参数，是一个字符串；
到这里可以差不多能简单理解了吧，再来一个练习
$（function（） {
$（".tc-demo-container"）。CSS（"background-color", "yellow"）;
}）;
这个如何编写它的类型文件，解答如下
interface jQueryIntance {
css: （paramA: string, paramB: string） => jQueryIntance;
}
declare function $（params: string）： jQueryIntance;
这次，我们把类型单独抽离出来定义成了一个接口，并且接口上有一个名为css的属性，它的值是一个函数，它有两个参数，参数的类型都是字符串，并且实际上这个函数是有返回值的，我们知道它的返回值是一个jquery对象；
Interface改写
看到上面那个练习，是不是发现了另外一种写法，描述文件是可以使用接口来定义的，
// interface改写
interface jQueryIntance {
css: （paramA: string, paramB: string） => jQueryIntance;
append: （paramA: string） => jQueryIntance;
}
declare const $: jQueryIntance;
定义全局对象
上面两种其实都是在介绍定义函数，那么对象怎么定义，还是拿jQuey举例，我们都知道，我们在使用$的时候，其实在jQuery内部会执行new $.fn.init这个方法，那么针对这个该怎么定义
// 待定义
new $.fn.init;
// 为了保证不冲突，可以使用namespace来框住
declare namespace $ {
namespace fn {
class init {}
}
}
再举一个实际项目中的例子，比如，我们写了一个类似于loadsh的工具函数util，我们挂载将其挂载到了window对象上，使用的时候会用以下的方式
util.add（）
// 或者
window.util.add（）
这个时候typescript就会报错，它会报window上不存在util这个东西，因此，我们需要在描述文件中对其做类型定义，我们可以这么写
declare interface Window {
util: {
add: （） => void;
};
}
定义了一个Window（注意，Window是首字母大写的），它上面存在一个util的对象，这个对象上有一个add方法，这个方法没有参数，并且没有返回值；
模块化文件声明
实际上到了现代前端开发，尤其是Vue和React兴起之后，大型项目几乎都是模块化开发了，使用的语法也都是es6的module语法，还是拿jquery举例
// 在现代框架中使用jquery
import $ from "jquery"
我想现在更多的是这种写法，如果是这种写法，然后也没有types的安装，那么在。d.ts中该如何描述，定义类型；
直接看个例子吧，代码还是上面的代码，整合一下
// 代码
import $ from "jquery"
$（"body"）。append（"<div>oliver</div>"）
new $.fn.init（）
对应的，在。d.ts中就应该这么写：
declare module "jquery" {
function $（params: string）： {
append: （params: string） => {};
};
namespace $ {
namespace fn {
class init {}
}
}
export = $;
}
我们使用关键字：declare描述了一个类型，类型是modle，变量名是jquery，注意：module后面的jquery和使用时import后面的jquery是一致的，之后里面的内容和之前的基本是一样的，区别在于两点：
内部不需要declare这个关键字了，因为在外面描述了，里面就不需要了；
里面定义的东西，如果要对外使用，必须要暴露出去，暴露的方式就是export就可以了；
以上就是关于“如何在typescript中使用jQuery”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注编程网html频道。
--结束END--
本文标题: 如何在typescript中使用jQuery
本文链接: https://www.lsjlt.com/news/94629.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑，方便收藏和打印～
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0