首頁 > 文章 > web前端 > Angular中怎樣呼叫第三方函式庫

Angular中怎樣呼叫第三方函式庫

這次帶給大家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中文網其它相關文章！