在 typescript 中使用第三方庫報(bào)錯問題

當(dāng)我們在 TS 項(xiàng)目中直接使用第三方庫中變量會報(bào)錯,

Cannot find name 'jQuery'.

因?yàn)楹芏嗟谌綆觳皇峭ㄟ^ts寫的,而是使用原生的js或者瀏覽器或者是nodejs提供好的對象。

比如在ts中使用jquery庫,一種常見的方式是在html中通過script標(biāo)簽引進(jìn),然后就可以全局使用,
但是ts并不知道$或者jquery是什么樣的東西,所以會報(bào)錯,
這時(shí)候我們可以使用declaer關(guān)鍵詞來告訴ts,這個(gè)變量在其他地方已經(jīng)被定義了,可以直接拿來用

// typings.d.ts
declare let jQuery: (selector: string) => any

通常這種聲名語句會放在一個(gè)單獨(dú)的聲名文件中,這個(gè)文件以.d.ts結(jié)尾的d就代表聲名的意思,說明該文件只有適配ts的類型聲名,這里定義的declare let并沒有真的定義一個(gè)變量的實(shí)現(xiàn),只是定義了全局變量jQuery的類型,僅僅用于編譯時(shí)候的檢查,并不是實(shí)現(xiàn)功能的真正的代碼,有了這個(gè)文件,就可以享受ts帶來的福利了,其他地方使用都會獲得對應(yīng)的代碼補(bǔ)全,接口提示等功能。
然后在tsconfig.json 文件中include上述聲明文件typings.d.ts,重新運(yùn)行后,三方庫的變量就不會報(bào)錯了

// tsconfig.json 該文件中include上述聲明文件typings.d.ts
{
  ...
  "include": ["src", "typings.d.ts"],
  ...
}

文件存放目錄如下

當(dāng)然不是所有的第三方庫都需要我們手動聲明,

很多庫源代碼自帶types定義,用npm install安裝某個(gè)庫的時(shí)候,它的類型定義已經(jīng)包含其中了。
也有很多三方庫有社區(qū)或者官方給寫好的聲明文件,我們只需再單獨(dú)安裝下他的類型文件即可。

npm install --save @types/jquery

Type Search中收錄了這些聲明文件,我們可以進(jìn)行查找并安裝需要的聲明文件。

另,項(xiàng)目中所有自定的一些全局變量都可以在typings.d.ts聲明一下

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容