TS開發(fā)Web前端如何引入JS庫(kù)

TS開發(fā)Web前端如何引入JS庫(kù)，針對(duì)這個(gè)問(wèn)題，這篇文章詳細(xì)介紹了相對(duì)應(yīng)的分析和解答，希望可以幫助更多想解決這個(gè)問(wèn)題的小伙伴找到更簡(jiǎn)單易行的方法。

　　眾所周知，TS需要編譯成JS才能在瀏覽器上跑，TS也能夠調(diào)用JS的方法。但是，有一個(gè)現(xiàn)成的第三方JS類庫(kù)擺在面前，讓它如何能在TS中使用，很多剛?cè)肟拥呐笥淹坏闷溟T而入。下面我就講講我的辦法吧。

1、直接翻譯

　　看了上面4個(gè)字，大家可能不會(huì)不約而同地眉頭一皺，立刻開噴:“喔靠，餿主意!”。我承認(rèn)，這的確是個(gè)笨辦法，但是我的確這么做過(guò)。笨辦法也是辦法，重劍無(wú)鋒，大巧不工。

　　對(duì)于一些JS庫(kù)只有不到200-300行代碼，直接翻譯成TS又何妨呢?自己用TS重寫，跟找typings(很多不一定能找到)或者自己寫*.d.ts的時(shí)間其實(shí)差不了多少。自己動(dòng)手，也能加深對(duì)庫(kù)的理解，夯實(shí)自己。2、頁(yè)面引入+全局定義

　　如果對(duì)第一條不滿意，不用著急，咱還有別的辦法。第二招，其實(shí)也很簡(jiǎn)單粗暴。

2.TS中聲明全局變量$，然后就可以直接開擼

　　declarevar$;classApp{init(){$("#msg").html("jquery引用成功!");}}

　　簡(jiǎn)單粗暴的副作用就是不夠優(yōu)雅，聲明的全局變量$的類型只能是any，這意味著還是弱類型變量，因此IDE中沒(méi)有任何的方法和屬性還有類型的提示。因而，完全失去了寫TS的樂(lè)趣。下面重點(diǎn)說(shuō)說(shuō)怎樣做到優(yōu)雅。

3、類型定義文件(.d.ts)

　　相信閣下如果看本文之前百度過(guò)，肯定看過(guò)這種方法。說(shuō)明，這是主流。所以，我也準(zhǔn)備重點(diǎn)詳細(xì)地介紹一下。

　　首先，什么是類型定義文件?

　　應(yīng)該有點(diǎn)類似于C++后綴名為.h的頭文件，用于聲明JS主文件的函數(shù)接口和變量類型的定義，并且把這些定義暴露給TS使用。有了.d.ts的定義之后，TS就能感知到JS庫(kù)相關(guān)的代碼提示了。

　　接著，如何得到.d.ts文件?1.可以先去DefinitelyTyped找找碰碰運(yùn)氣，一般很流行的庫(kù)也許會(huì)有。2.用npm的typings查找獲取的，其實(shí)跟上面沒(méi)什么兩樣。3.網(wǎng)上還能還有一些工具，據(jù)說(shuō)根據(jù)js庫(kù)能夠反向生成.d.ts。我試了都不靠譜，如果是C#生成.d.ts的成功率我是敢打包票，但是對(duì)JS我就只能呵呵了。4.最后，“拿來(lái)主義”都不行的情況下，只有自己動(dòng)手豐衣足食了。

關(guān)于TS開發(fā)Web前端如何引入JS庫(kù)問(wèn)題的解答就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，如果你還有很多疑惑沒(méi)有解開，可以關(guān)注億速云行業(yè)資訊頻道了解更多相關(guān)知識(shí)。