如何在typescript中使用jQuery

這篇“如何在typescript中使用jQuery”文章的知識(shí)點(diǎn)大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細(xì)，步驟清晰，具有一定的借鑒價(jià)值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來(lái)看看這篇“如何在typescript中使用jQuery”文章吧。

成都創(chuàng)新互聯(lián)長(zhǎng)期為成百上千客戶(hù)提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年，關(guān)注不同地域、不同群體，并針對(duì)不同對(duì)象提供差異化的產(chǎn)品和服務(wù)；打造開(kāi)放共贏平臺(tái)，與合作伙伴共同營(yíng)造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為界首企業(yè)提供專(zhuān)業(yè)的成都網(wǎng)站制作、成都網(wǎng)站建設(shè)，界首網(wǎng)站改版等技術(shù)服務(wù)。擁有10多年豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開(kāi)發(fā)。

介紹

什么是描述文件？在回答這個(gè)問(wèn)題之前，我們先思考這樣一個(gè)問(wèn)題，typescript和javascript原則上并不相通，那么在typescript出來(lái)之前所有的javascript是不是都不能使用了，比如jQuery，如果不能用，那是否是在可惜，因此，為了解決這個(gè)問(wèn)題，typescript出了一個(gè)描述文件，也就是我們常看到的。d.ts文件，其作用就是為了打通javascript和typescript，為javascript文件描述其缺失的類(lèi)型；

初始化

為了更好更直觀的學(xué)習(xí)，先初始化一個(gè)項(xiàng)目，我們的目的是為了將jQuery和typescript混在一起

簡(jiǎn)單的話(huà)，初始化命令如下

// 初始化npm

npm init

// 初始化typescript

tsc --init

之后新建一個(gè)html文件并且在同目錄下新建一個(gè)。ts文件，在html中引入jQuery的cdn，比如：

<!DOCTYPE html>

<head>

</head>

</html>

或者使用Vue的腳手架新創(chuàng)建一個(gè)Vue3+typescript的項(xiàng)目，在其public下的index.html引入上方的jquery的cdn

描述文件

我們將以。d.ts為結(jié)尾的文件稱(chēng)作為描述文件，至于前面的文字是什么無(wú)所謂，不管是a.d.ts還是jQuery.d.ts都可以，它的作用就是為js文件描述類(lèi)型；

這個(gè)涉及到第一個(gè)知識(shí)點(diǎn)，關(guān)鍵字：declare，它代表是一個(gè)聲明，聲明后面為定義類(lèi)型的代碼的類(lèi)型，下面看具體分析

定義全局變量

比如，我們現(xiàn)在在。ts文件中編寫(xiě)jquery代碼

;$（function（） {}）（）;

這個(gè)一個(gè)jquery時(shí)代常見(jiàn)的立即執(zhí)行函數(shù)的方法，如果我們直接在。ts中寫(xiě)，它會(huì)報(bào)錯(cuò)，它會(huì)提示你必須去@types中安裝jq的類(lèi)型，錯(cuò)誤如下：

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

實(shí)際上我們?cè)趖ypes中沒(méi)有jquery的類(lèi)型，因此，為了使它能在。ts中正常運(yùn)行，我們需要在。d.ts這個(gè)描述文件中為其做聲明：

declare const $: （param: （） => void） => void;

分析一下這個(gè)聲明，做一個(gè)拆分，外層如下

$（） // 這是一個(gè)jquery函數(shù)

對(duì)應(yīng)的聲明

$:（）=>void

仔細(xì)看看，這個(gè)應(yīng)該能理解，聲明這是一個(gè) 函數(shù) ，并且它沒(méi) 有返回值，之后再看參數(shù) ，這是一個(gè)函數(shù)，并且它沒(méi)有返回值，之后再看參數(shù)，這是一個(gè)函數(shù)，并且它沒(méi)有返回值，之后再看參數(shù)，（）里面嵌套了一個(gè)function（） {}，對(duì)應(yīng)的聲明里也要嵌套一個(gè)函數(shù)類(lèi)型，很明顯，function（） {}是$（）的參數(shù)，這個(gè)參數(shù)是一個(gè)函數(shù)，并且它也沒(méi)有返回值，

// 因此在外層的聲明里，添加一個(gè)參數(shù)，并為其設(shè)置函數(shù)類(lèi)型且沒(méi)有返回值

param: （） => void

定義全局函數(shù)

就拿上面的例子

;$（function（） {}）（）;

這明顯也是一個(gè)函數(shù)，我們也可以使用函數(shù)的方式做聲明

declare function $（params: （） => void）： void;

經(jīng)過(guò)上面的分析，這個(gè)應(yīng)該能明白點(diǎn)了吧，聲明了一個(gè)函數(shù)$，它沒(méi)有返回值，因此是void，但它有一個(gè)參數(shù)，參數(shù)是一個(gè)函數(shù)，并且也沒(méi)有返回值；

到這里，可能有熟悉jQuery的小伙伴會(huì)問(wèn)，jQuery還有別的用法，比如，它可以選擇某個(gè)節(jié)點(diǎn)，為其添加內(nèi)容，代碼如下

$（function（） {

$（"body"）。append（"<div>oliver</div>"）

}）;

如果是這種寫(xiě)法，還是會(huì)報(bào)錯(cuò)的，沒(méi)錯(cuò)，這種寫(xiě)法還是會(huì)繼續(xù)報(bào)錯(cuò)，原因是這種寫(xiě)法我們沒(méi)有在。d.ts中定義，因此，為這種用法，我們要寫(xiě)一個(gè)類(lèi)型描述

// 類(lèi)型

declare function $（

params: string

）： {

append: （params: string） => {};

};

這次$（）的函數(shù)是一個(gè)字符串，然后它的返回值雖然不知道具體是什么，但是既然能用。append這種方式，那么至少代表它是一個(gè)對(duì)象，在js中只有對(duì)象才有。這個(gè)操作符，之后立馬有一個(gè)append的方法，它有一個(gè)參數(shù)，是一個(gè)字符串；

到這里可以差不多能簡(jiǎn)單理解了吧，再來(lái)一個(gè)練習(xí)

$（function（） {

$（".tc-demo-container"）。css（"background-color", "yellow"）;

}）;

這個(gè)如何編寫(xiě)它的類(lèi)型文件，解答如下

interface jQueryIntance {

css: （paramA: string, paramB: string） => jQueryIntance;

}

declare function $（params: string）： jQueryIntance;

這次，我們把類(lèi)型單獨(dú)抽離出來(lái)定義成了一個(gè)接口，并且接口上有一個(gè)名為css的屬性，它的值是一個(gè)函數(shù)，它有兩個(gè)參數(shù)，參數(shù)的類(lèi)型都是字符串，并且實(shí)際上這個(gè)函數(shù)是有返回值的，我們知道它的返回值是一個(gè)jquery對(duì)象；

Interface改寫(xiě)

看到上面那個(gè)練習(xí)，是不是發(fā)現(xiàn)了另外一種寫(xiě)法，描述文件是可以使用接口來(lái)定義的，

// interface改寫(xiě)

interface jQueryIntance {

css: （paramA: string, paramB: string） => jQueryIntance;

append: （paramA: string） => jQueryIntance;

}

declare const $: jQueryIntance;

定義全局對(duì)象

上面兩種其實(shí)都是在介紹定義函數(shù)，那么對(duì)象怎么定義，還是拿jQuey舉例，我們都知道，我們?cè)谑褂?的時(shí)候，其實(shí)在jQuery內(nèi)部會(huì)執(zhí)行new $.fn.init這個(gè)方法，那么針對(duì)這個(gè)該怎么定義

// 待定義

new $.fn.init;

// 為了保證不沖突，可以使用namespace來(lái)框住

declare namespace $ {

namespace fn {

class init {}

}

再舉一個(gè)實(shí)際項(xiàng)目中的例子，比如，我們寫(xiě)了一個(gè)類(lèi)似于loadsh的工具函數(shù)util，我們掛載將其掛載到了window對(duì)象上，使用的時(shí)候會(huì)用以下的方式

util.add（）

// 或者

window.util.add（）

這個(gè)時(shí)候typescript就會(huì)報(bào)錯(cuò)，它會(huì)報(bào)window上不存在util這個(gè)東西，因此，我們需要在描述文件中對(duì)其做類(lèi)型定義，我們可以這么寫(xiě)

declare interface Window {

util: {

add: （） => void;

};

}

定義了一個(gè)Window（注意，Window是首字母大寫(xiě)的），它上面存在一個(gè)util的對(duì)象，這個(gè)對(duì)象上有一個(gè)add方法，這個(gè)方法沒(méi)有參數(shù)，并且沒(méi)有返回值；

模塊化文件聲明

實(shí)際上到了現(xiàn)代前端開(kāi)發(fā)，尤其是Vue和React興起之后，大型項(xiàng)目幾乎都是模塊化開(kāi)發(fā)了，使用的語(yǔ)法也都是ES6的module語(yǔ)法，還是拿jquery舉例

// 在現(xiàn)代框架中使用jquery

import $ from "jquery"

我想現(xiàn)在更多的是這種寫(xiě)法，如果是這種寫(xiě)法，然后也沒(méi)有types的安裝，那么在。d.ts中該如何描述，定義類(lèi)型；

直接看個(gè)例子吧，代碼還是上面的代碼，整合一下

// 代碼

import $ from "jquery"

$（"body"）。append（"<div>oliver</div>"）

new $.fn.init（）

對(duì)應(yīng)的，在。d.ts中就應(yīng)該這么寫(xiě)：

declare module "jquery" {

function $（params: string）： {

append: （params: string） => {};

};

namespace $ {

namespace fn {

class init {}

}

export = $;

}

我們使用關(guān)鍵字：declare描述了一個(gè)類(lèi)型，類(lèi)型是modle，變量名是jquery，注意：module后面的jquery和使用時(shí)import后面的jquery是一致的，之后里面的內(nèi)容和之前的基本是一樣的，區(qū)別在于兩點(diǎn)：

內(nèi)部不需要declare這個(gè)關(guān)鍵字了，因?yàn)樵谕饷婷枋隽?，里面就不需要了?/p>

里面定義的東西，如果要對(duì)外使用，必須要暴露出去，暴露的方式就是export就可以了；

以上就是關(guān)于“如何在typescript中使用jQuery”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對(duì)大家有幫助，若想了解更多相關(guān)的知識(shí)內(nèi)容，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

網(wǎng)站題目：如何在typescript中使用jQuery
本文地址：http://jinyejixie.com/article22/jjhicc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供、手機(jī)網(wǎng)站建設(shè)、網(wǎng)站制作、網(wǎng)站設(shè)計(jì)公司、Google、做網(wǎng)站

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

成人午夜视频全免费观看高清-秋霞福利视频一区二区三区-国产精品久久久久电影小说-亚洲不卡区三一区三区一区

如何在typescript中使用jQuery