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

cipchk發表於2019-02-16
AngularjQuery

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執行，是一門學問。

希望此篇對你的幫助，快樂程式設計！

相關文章