這次帶給大家Angular中怎麼呼叫第三方函式庫，Angular中呼叫第三方函式庫的注意事項有哪些，以下就是實戰案例，一起來看一下。
Angular 的元件與模組看似好像與現有各種第三方類別庫（例如：lodash、moment 等）使用上有點格格不入，這很大的原因是 TypeScript 造成的假象。三足鼎立的前端其實都是雷同的，不管是哪一種前端框架都可以使用到這些第三方類別庫。
以下我將從另一個視角解釋 Angular 如何使用第三方類別庫的一種經驗做法。
一、寫在前面
在開始之前，需要先了解TypeScript 模組系統－模組是指在其自身作用域裡執行，而不是在全域作用域裡；模組間是依賴export 和import 建立關係。編譯器在編譯過程中，也是依賴這種關係來定位需要編譯的檔案。
TypeScript 仍然還是以 JavaScript 檔案的形式發布類別庫，這會導致類型無法表述，需要配合聲明檔案對其進行類型描述；因此聲明檔案成了類別庫一個必不可少的組成部分。
二、分類
Angular 使用TypeScript 語言開發，誠如上一小節講來說，要想讓一個類別庫被運用，要件是有沒有聲明文件。
有聲明檔案
要分清類別庫是否有宣告檔案*.d.ts，可以從兩個方面來確認這件事：
1、類別庫自帶
從Npm 安裝一個依賴套件後，可以直接檢查其庫的package.json 是否包含typings 節點，例如moment：
"typings": "./moment.d.ts"
2、TypeSearch檢索
TypeScript 提供了一個叫做TypeSearch 網站，可以直接輸入關鍵字檢查是否包含該類別庫的宣告檔。
例如lodash 可以在清單中點擊會跳到npm 網站，並且會看到這樣的一個指令：
npm install --save @types/lodash
無宣告檔
這類情況還蠻常見，例如早一點時間G2 就沒有聲明文件，這種情況下只能自行編寫聲明文件。
Angular Cli 創建的專案會包含一個 src/typings.d.ts 聲明文件，它會自動包含在全域聲明定義中，而把這些類別庫的聲明資訊寫在這裡面再好不過。
一般而言自己很難對一個類別庫寫一個完整的聲明文件，這對於成本來說太不合算，因此往往都是只對部分全域物件做一個any （表示忽略該靜態類型檢查）亦可，例如：
// src/typings.d.ts declare var G2: any;
三、如何使用？
聲明文件是紐帶，依然以這種方式劃分如何使用。
對於有聲明文件，無需額外做什麼，只需在需要模組的地方使用import 來導入即可，例如：
import * as moment from 'moment'; moment(); // 当前时间
無聲明文件
重要來看無宣告檔案時怎麼做，前面說到使用any 來表示忽略靜態類型檢查，意味者無法享受宣告檔案帶來的智慧提示快感。
像 G2 ，我們可以在專案的任意位置直接使用它，但也僅僅只能識別 G2 變量，而實例的方法或屬性是不可知的。
// app.component.ts const g2 = new G2(); g2. // 输入 `.` 后是不会有任何方法或属性
除此之外 TypeScript 編譯過程中也不會對 G2 做任何型別檢查，G2 是否真的存在只能由自己掌握。對於 Angular 而言，是需要額外在 .angular-cli.json 的 scripts 節點上明確載入這些模組。
// .angular-cli.json "scripts": [ "../node_modules/@antv/g2/dist/g2.min.js" ]
TypeScript 編譯後還是 JavaScript 程式碼，假如不手動載入 G2 相關 JavaScript 文件，自然在運行過程中會提供未找到 G2 的錯誤。
相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
推薦閱讀：
以上是Angular中怎樣呼叫第三方函式庫的詳細內容。更多資訊請關注PHP中文網其他相關文章！
