Angular 如何使用第三方庫

Angular 的組件與模塊看似好像與現有各類第三方類庫（例如：lodash、moment 等）使用上有點格格不入，這很大的緣由是 TypeScript 形成的假象。三足鼎立的前端其實都是雷同的，不論是哪一種前端框架均可以使用到這些第三方類庫。

如下我將從另外一個視角解釋 Angular 如何使用第三方類庫的一種經驗作法。

1、寫在前面

在開始以前，須要先了解一下 TypeScript 模塊系統 ——模塊是指在其自身做用域裏執行，而不是在全局做用域裏；模塊間是依靠 export 和 import 創建關係。編譯器在編譯過程當中，也是依賴這種關係來定位須要編譯的文件。

TypeScript 依然仍是以 JavaScript 文件的形式發佈類庫，這會致使類型沒法表述，須要配合聲明文件對其進行類型描述；所以聲明文件成了類庫一個必不可少的組成部分。

2、分類

Angular 使用 TypeScript 語言開發，誠如上一小節講來講，要想讓一個類庫被運用，要件是有沒有聲明文件。

有聲明文件

要分清類庫是否有聲明文件 *.d.ts，能夠從兩個方面來確認這件事：

一、類庫自帶

從 Npm 安裝一個依賴包後，能夠直接檢查其庫的 package.json 是否包含 typings 節點，例如 moment：

"typings": "./moment.d.ts"

二、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;

3、如何使用？

聲明文件是紐帶，依然以這種方式來劃分如何使用。

對於有聲明文件，無需額外作什麼，只需在須要模塊的地方使用 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 的錯誤。

總結

從 TypeScript 的視角來看如何使用第三方類庫，會有不一樣的感受，只是一個簡單的非靠譜但有效的描述。但願懂得多的人手下留情。

這裏無心黑 G2 的意思，現 G2 已經提供了聲明文件了。

（完）