溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇“如何在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”這篇文章的內容，相信大家都有了一定的了解，希望小編分享的內容對大家有幫助，若想了解更多相關的知識內容，請關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
