前言

Angular2是以TypeScript語言作為默認(rèn)編碼語言，所以你看到的全部都是.ts結(jié)尾的文件。

那什么是TypeScript

首先，它是一個(gè)編譯型語言；既然是編譯型，那么你像重構(gòu)、導(dǎo)航、智能提醒這種工具屬性就可以發(fā)揮出來，所以你會(huì)發(fā)現(xiàn)使用VS CODE來寫Angular簡直就是絕配。

同時(shí)，TypeScript還帶來一些ES6/7才有特性，比如let、const、async等，你無須關(guān)心ES幾。

最霸氣，TypeScript還是一個(gè)強(qiáng)類型、泛型、多態(tài)等一些面向?qū)ο缶幊痰臇|西。

那，為何我們不選它呢？

當(dāng)然，說了這么多，這跟主題看似無關(guān)，但如果你了解這些，才能看到問題的本質(zhì)。

首先，第一關(guān)鍵點(diǎn)編譯型，既然是編譯型，那么你在代碼中出現(xiàn)的任何變量、類、函數(shù)都是必須要存在，否則TA就會(huì)在編譯時(shí)報(bào)錯(cuò)。

但，問題來了，現(xiàn)在的JavaScript世界中已經(jīng)有那么多現(xiàn)成的第三方庫，難道說都不能用了？非也！

TypeScript一開始就照顧這些了，所以就會(huì)有一個(gè)叫.d.ts的聲明文件。MS當(dāng)然不會(huì)讓你去編寫這一個(gè)文件，所以就有一個(gè)叫http://definitelytyped.org/ 網(wǎng)站，TA匯集了很多現(xiàn)成類庫的第三方.d.ts的聲明文件提供我們下載。

方法一

當(dāng)然是使用最正規(guī)軍了，用命令安裝jQuery的聲明文件。

npm install -D @types/jquery

以及使用

import * as $ from 'jquery';

$('body').addClass('');

完美的智能提示，如果你在VS CODE下的話。

方法二

對(duì)于一些并未提供 .d.ts 聲明文件的類庫，我們?cè)趺崔k？那當(dāng)然只能自己寫了。

什么？自己寫？很困難吧！很復(fù)雜吧！

沒那么一回事，聲明文件其實(shí)是對(duì)一些類庫接口的描述，以下是我截取一段jQuery聲明文件的部分代碼

interface JQueryStatic {
 /**
  * 去掉字符串首尾空格
  *
  * @param str 字符串
  * @see {@link https://api.jquery.com/jQuery.trim/}
  */
 trim(str: string): string;
}

declare var $: JQueryStatic;

我還特意譯成中文，這里的含量很少，最關(guān)鍵的就是 declare 它就是把一個(gè)變量 $ 定義成類型 JQueryStatic （還是個(gè)接口）。

這樣，TS編譯器在遇到 $ 時(shí)會(huì)去找該類型，并且你的代碼里面不能出現(xiàn) $.time1() 之類的，因?yàn)槟愕慕涌冢挥幸粋€(gè) $.trim() 。

等等，jQuery幾十個(gè)接口，我都要這么寫嗎？

NO?。?！當(dāng)然不是，除非你想寫一個(gè)又漂亮、又好看、又是中文、又是完美智能提示的聲明文件的話。

否則，你那就拿 any 類型吧，TA就是萬能貨。你不需要寫一個(gè)很復(fù)雜的聲明文件，只需要：

declare var $: any;

簡單粗暴有效！

結(jié)論

哎~其實(shí)是因群里每天都可以看到一句【怎么使用jQuery】；雖然最簡單的結(jié)果只需要一句話 declare var $: any;，但我還是啰里吧嗦將了一大堆，可不把前因后果將清楚，我煩~。

另，此解只是拋磚引玉，在很多類庫中都是通用的辦法。但我建議還是找一些Angular2類庫來使用，因?yàn)槿绾胃行У墓芾鞪avaScript運(yùn)行，是一門學(xué)問。

總結(jié)

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家腳本之家的支持。

最新評(píng)論