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

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

介紹

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

初始化

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

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

// 初始化npm

npm init

// 初始化typescript

tsc --init

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

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

描述文件

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

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

定義全局變量

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

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

這個(gè)一個(gè)jquery時(shí)代常見的立即執(zhí)行函數(shù)的方法，如果我們直接在。ts中寫，它會(huì)報(bào)錯(cuò)，它會(huì)提示你必須去@types中安裝jq的類型，錯(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中沒有jquery的類型，因此，為了使它能在。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ù) ， 并 且 它 沒 有 返 回 值 ， 之 后 再 看 參 數(shù) ， 這是一個(gè)函數(shù)，并且它沒有返回值，之后再看參數(shù)，這是一個(gè)函數(shù)，并且它沒有返回值，之后再看參數(shù)，（）里面嵌套了一個(gè)function（） {}，對(duì)應(yīng)的聲明里也要嵌套一個(gè)函數(shù)類型，很明顯，function（） {}是$（）的參數(shù)，這個(gè)參數(shù)是一個(gè)函數(shù)，并且它也沒有返回值，

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

param: （） => void

定義全局函數(shù)

就拿上面的例子

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

1

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

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

1

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

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

$（function（） {

$（"body"）。append（"

}）;

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

// 類型

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è)如何編寫它的類型文件，解答如下

interface jQueryIntance {

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

}

declare function $（params: string）： jQueryIntance;

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

Interface改寫

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

// interface改寫

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)目中的例子，比如，我們寫了一個(gè)類似于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ì)其做類型定義，我們可以這么寫

declare interface Window {

    util: {

        add: （） => void;

    };

}

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

模塊化文件聲明

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

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

import $ from "jquery"

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

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

// 代碼

import $ from "jquery"

$（"body"）。append（"

new $.fn.init（）

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

declare module "jquery" {

    function $（params: string）： {

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

    };

    namespace $ {

        namespace fn {

            class init {}

        }

    }

    export = $;

}

我們使用關(guān)鍵字：declare描述了一個(gè)類型，類型是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è)資訊頻道。