溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

如何在typescript中使用jQuery

發(fā)布時間：2022-03-19 11:17:36 來源：億速云 閱讀：337 作者：iii 欄目：web開發(fā)

這篇“如何在typescript中使用jQuery”文章的知識點大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“如何在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的腳手架新創(chuàng)建一個Vue3+typescript的項目，在其public下的index.html引入上方的jquery的cdn

描述文件

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

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

定義全局變量

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

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

這個一個jquery時代常見的立即執(zhí)行函數(shù)的方法，如果我們直接在。ts中寫，它會報錯，它會提示你必須去@types中安裝jq的類型，錯誤如下：

Cannot find name &lsquo;$&rsquo;。 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函數(shù)

對應(yīng)的聲明

$:（）=>void

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

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

param: （） => void

定義全局函數(shù)

就拿上面的例子

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

1

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

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

1

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

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

$（function（） {

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

}）;

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

// 類型

declare function $（

    params: string

）： {

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

};

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

到這里可以差不多能簡單理解了吧，再來一個練習

$（function（） {

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

}）;

這個如何編寫它的類型文件，解答如下

interface jQueryIntance {

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

}

declare function $（params: string）： jQueryIntance;

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

Interface改寫

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

// interface改寫

interface jQueryIntance {

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

    append: （paramA: string） => jQueryIntance;

}

declare const $: jQueryIntance;

定義全局對象

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

// 待定義

new $.fn.init;

// 為了保證不沖突，可以使用namespace來框住

declare namespace $ {

    namespace fn {

        class init {}

    }

}

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

util.add（）

// 或者

window.util.add（）

這個時候typescript就會報錯，它會報window上不存在util這個東西，因此，我們需要在描述文件中對其做類型定義，我們可以這么寫

declare interface Window {

    util: {

        add: （） => void;

    };

}

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

模塊化文件聲明

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

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

import $ from "jquery"

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

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

// 代碼

import $ from "jquery"

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

new $.fn.init（）

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

declare module "jquery" {

    function $（params: string）： {

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

    };

    namespace $ {

        namespace fn {

            class init {}

        }

    }

    export = $;

}

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

內(nèi)部不需要declare這個關(guān)鍵字了，因為在外面描述了，里面就不需要了；

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

以上就是關(guān)于“如何在typescript中使用jQuery”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對大家有幫助，若想了解更多相關(guān)的知識內(nèi)容，請關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細節(jié)

免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手