Angular 的組件與模塊看似好像與現(xiàn)有各種第三方類庫(kù)（例如：lodash、moment 等）使用上有點(diǎn)格格不入，這很大的原因是 TypeScript 造成的假象。三足鼎立的前端其實(shí)都是雷同的，不管是哪種前端框架都可以使用到這些第三方類庫(kù)。

以下我將從另一個(gè)視角解釋 Angular 如何使用第三方類庫(kù)的一種經(jīng)驗(yàn)做法。

一、寫在前面

在開始之前，需要先了解一下 TypeScript 模塊系統(tǒng) ——模塊是指在其自身作用域里執(zhí)行，而不是在全局作用域里；模塊間是依靠 export 和 import 建立關(guān)系。編譯器在編譯過程中，也是依賴這種關(guān)系來(lái)定位需要編譯的文件。

TypeScript 依然還是以 JavaScript 文件的形式發(fā)布類庫(kù)，這會(huì)導(dǎo)致類型無(wú)法表述，需要配合聲明文件對(duì)其進(jìn)行類型描述；因此聲明文件成了類庫(kù)一個(gè)必不可少的組成部分。

二、分類

Angular 使用 TypeScript 語(yǔ)言開發(fā)，誠(chéng)如上一小節(jié)講來(lái)說(shuō)，要想讓一個(gè)類庫(kù)被運(yùn)用，要件是有沒有聲明文件。

有聲明文件

要分清類庫(kù)是否有聲明文件 *.d.ts，可以從兩個(gè)方面來(lái)確認(rèn)這件事：

1、類庫(kù)自帶

從 Npm 安裝一個(gè)依賴包后，可以直接檢查其庫(kù)的 package.json 是否包含 typings 節(jié)點(diǎn)，例如 moment：

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

2、TypeSearch檢索

TypeScript 提供了一個(gè)叫 TypeSearch 網(wǎng)站，可以直接輸入關(guān)鍵詞檢查是否包含該類庫(kù)的聲明文件。

例如 lodash 可以在列表中點(diǎn)擊會(huì)跳轉(zhuǎn)至 npm 網(wǎng)站，并且會(huì)看到這樣的一個(gè)命令：

npm install --save @types/lodash

無(wú)聲明文件

這類情況還蠻常見，例如早一點(diǎn)時(shí)間 G2 就沒有聲明文件，這種情況下只能自行編寫聲明文件。

Angular Cli 創(chuàng)建的項(xiàng)目會(huì)包含一個(gè) src/typings.d.ts 聲明文件，它會(huì)自動(dòng)包含在全局聲明定義中，而把這些類庫(kù)的聲明信息寫在這里面再好不過。

一般而言自己很難對(duì)一個(gè)類庫(kù)寫一個(gè)完整的聲明文件，這對(duì)于成本來(lái)說(shuō)太不合算，因此往往都是只對(duì)部分全局對(duì)象做一個(gè) any （表示忽略該靜態(tài)類型檢查）亦可，例如：

// src/typings.d.ts
declare var G2: any;

三、如何使用？

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

對(duì)于有聲明文件，無(wú)需額外做什么，只需在需要模塊的地方使用 import 來(lái)導(dǎo)入即可，例如：

import * as moment from 'moment';

moment(); // 當(dāng)前時(shí)間

無(wú)聲明文件

重要來(lái)看無(wú)聲明文件時(shí)怎么做，前面說(shuō)到使用 any 來(lái)表示忽略靜態(tài)類型檢查，意味者無(wú)法享受聲明文件帶來(lái)的智能提示快感。

像 G2 ，我們可以在項(xiàng)目的任意位置直接使用它，但也僅僅只能識(shí)別 G2 變量，而實(shí)例的方法或?qū)傩允遣豢芍摹?/p>

// app.component.ts

const g2 = new G2();
g2. // 輸入 `.` 后是不會(huì)有任何方法或?qū)傩?

除此之外 TypeScript 編譯過程中也不會(huì)對(duì) G2 做任何類型檢查，G2 是否真的存在只能由自己把握。對(duì)于 Angular 而言，是需要額外在 .angular-cli.json 的 scripts 節(jié)點(diǎn)上明確加載這些模塊。

// .angular-cli.json
"scripts": [
  "../node_modules/@antv/g2/dist/g2.min.js"
]

TypeScript 編譯后依然還是 JavaScript 代碼，假如不手動(dòng)加載 G2 相關(guān) JavaScript 文件，自然在運(yùn)行過程中會(huì)提供未找到 G2 的錯(cuò)誤。

總結(jié)

從 TypeScript 的視角來(lái)看如何使用第三方類庫(kù)，會(huì)有不同的感覺，只是一個(gè)簡(jiǎn)單的非靠譜但有效的描述。希望懂得多的人手下留情。

這里無(wú)意黑 G2 的意思，現(xiàn) G2 已經(jīng)提供了聲明文件了。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論