typescript引用jquery，乍一看挺簡(jiǎn)單，但實(shí)際操作中可能會(huì)遇到一些小坑。我曾經(jīng)就因?yàn)橐粋€(gè)小細(xì)節(jié)卡了半天，所以想分享一下我的經(jīng)驗(yàn)，希望能幫大家少走彎路。

直接用<script>標(biāo)簽引入jQuery是最常見(jiàn)的做法，但這在TypeScript項(xiàng)目中可能導(dǎo)致類型檢查報(bào)錯(cuò)。因?yàn)門ypeScript并不知道jQuery是什么，無(wú)法理解你對(duì)它的調(diào)用。解決方法是聲明jQuery的類型定義文件。</script>

你可以在項(xiàng)目中安裝@types/jquery這個(gè)包。 我記得當(dāng)時(shí)用的是npm，命令行輸入npm install –save-dev @types/jquery，然后等待安裝完成。安裝完成后，TypeScript就能識(shí)別jQuery了。

但是，僅僅安裝還不夠。你需要在你的TypeScript文件中正確地導(dǎo)入jQuery。 我最初犯的錯(cuò)誤就是直接在代碼里寫$，結(jié)果編譯器報(bào)錯(cuò)。正確的做法是在文件頂部用import * as $ from ‘jquery’; 導(dǎo)入。 這句代碼告訴TypeScript，$代表jQuery，并且它包含了jQuery的所有內(nèi)容。

舉個(gè)例子，假設(shè)你想用jQuery選擇一個(gè)元素：

import * as $ from 'jquery';

$(document).ready(function() {
  $('#myElement').text('Hello, world!');
});

登錄后復(fù)制

這段代碼簡(jiǎn)潔明了，在$(document).ready()函數(shù)中，我們使用$來(lái)選擇id為myElement的元素，并修改它的文本內(nèi)容。 需要注意的是，$(document).ready()確保在DOM加載完成后再執(zhí)行jQuery代碼，避免出現(xiàn)元素不存在的錯(cuò)誤。 我一開始沒(méi)注意這一點(diǎn)，結(jié)果代碼運(yùn)行后沒(méi)有任何反應(yīng)，調(diào)試了好久才發(fā)現(xiàn)問(wèn)題所在。

如果你使用的是模塊化構(gòu)建工具，例如Webpack，你需要確保你的配置能夠正確處理TypeScript和jQuery。這方面我就不展開細(xì)說(shuō)了，因?yàn)椴煌臉?gòu)建工具配置方法不一樣，而且這已經(jīng)超出了TypeScript引用jQuery的范疇。

總而言之，正確安裝@types/jquery，使用import * as $ from ‘jquery’;導(dǎo)入，以及注意DOM加載順序，這三點(diǎn)是順利使用jQuery的關(guān)鍵。 希望我的經(jīng)驗(yàn)?zāi)軒椭憧焖偕鲜?，避免一些不必要的麻煩?/p>

路由網(wǎng)(www.lu-you.com)您可以查閱其它相關(guān)文章！