Angular2如何使用第三方類庫（如：jQuery）

Angular2是以TypeScript語言做爲默認編碼語言，因此你看到的所有都是.ts結尾的文件。

什麼是TypeScript

首先，它是一個編譯型語言；既然是編譯型，那麼你像重構、導航、智能提醒這種工具屬性就能夠發揮出來，因此你會發現使用VS CODE來寫Angular簡直就是絕配。

同時，TypeScript還帶來一些ES6/7纔有特性，好比let、const、async等，你無須關心ES幾。

最霸氣，TypeScript仍是一個強類型、泛型、多態等一些面向對象編程的東西。

那，爲什麼咱們不選它呢？

固然，說了這麼多，這跟主題看似無關，但若是你瞭解這些，才能看到問題的本質。

如何導入第三方類庫？

類庫都是經過 npm 進行安裝的，好比：

npm install --save jquery

會將所須要的類庫文件下載至 node_modules/jquery 當中；因此還須要將類庫與Angular進行關聯。

打開 src/.angular-cli.json 找到 apps/scripts 節點，添加相應的類庫至此。

"scripts": [
    "../node_modules/jquery/dist/jquery.js"
]

如何在Angular中使用呢？

首先，第一關鍵點TypeScript是編譯型，既然是編譯型，那麼你在代碼中出現的任何變量、類、函數都是必需要存在，不然編譯器就會在編譯時報錯。

但，問題來了，如今的JavaScript世界中已經有那麼多現成的第三方庫，難道說都不能用了？非也！

TypeScript一開始就照顧這些了，因此就會有一個叫.d.ts的聲明文件。MS固然不會讓你去編寫這一個文件，因此就有一個叫 definitelytyped 網站，TA聚集了不少現成類庫的第三方.d.ts的聲明文件提供咱們下載。

方法一

固然是使用最正規軍了，用命令安裝jQuery的聲明文件。

npm install -D @types/jquery

最後，你能夠在代碼中這麼使用：

import * as $ from 'jquery';

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

完美的智能提示，若是你在VS CODE下的話。

方法二

對於一些並未提供 .d.ts 聲明文件的類庫，咱們怎麼辦？那固然只能本身寫了。

什麼？本身寫？很困難吧！很複雜吧！

沒那麼一回事，聲明文件實際上是對一些類庫接口的描述，如下是我截取一段jQuery聲明文件的部分代碼

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

declare var $: JQueryStatic;

我還特地譯成中文，這裏的含量不多，最關鍵的就是 declare 它就是把一個變量 $ 定義成類型 JQueryStatic （仍是個接口）。

這樣，TS編譯器在遇到 $ 時會去找該類型，而且你的代碼裏面不能出現 $.time1() 之類的，由於你的接口，只有一個 $.trim()。

等等，jQuery幾十個接口，我都要這麼寫嗎？

NO！！！固然不是，除非你想寫一個又漂亮、又好看、又是中文、又是完美智能提示的聲明文件的話。

不然，你那就拿 any 類型吧，TA就是萬能貨。你不須要寫一個很複雜的聲明文件，只須要：

declare var $: any;

簡單粗暴有效！

結論

哎~實際上是因羣裏天天均可以看到一句【怎麼使用jQuery】；雖然最簡單的結果只須要一句話 declare var $: any;，但我仍是囉裏吧嗦將了一大堆，可不把來龍去脈將清楚，我煩~。

另，此解只是拋磚引玉，在不少類庫中都是通用的辦法。但我建議仍是找一些Angular2類庫來使用，由於如何更有效的管理JavaScript運行，是一門學問。

但願此篇對你的幫助，快樂編程！