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 的錯誤。

總結

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

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

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。