如何Lodash 是 JavaScript 很有名的 package，尤其對(duì)於處理 array 很有一套，Angular 該如何使用 lodash 呢 ? 這也可以視為在 Angular 使用傳統(tǒng) JavaScript package 的 SOP。

Version

Node.js 8.9.4

Angular CLI 1.6.2

Angular 5.2.2

安裝 Lodash

~/MyProject $ npm install lodash --save

使用 npm 安裝 lodash 。

安裝 Lodash Type 定義檔

~/MyProject $ npm install @types/lodash --save-dev

傳統(tǒng) JavaScript 並沒(méi)有型別，但 TypeScript 是個(gè)強(qiáng)型別語(yǔ)言，除了型別外還有泛型，這該怎麼與傳統(tǒng) JavaScript 搭配呢 ?

TypeScript 的解決方案是另外使用 *.d.ts ，此為 type 定義檔。

一般來(lái)說(shuō)，若是知名的 JavaScript library，都已經(jīng)有人維護(hù) type 定義檔，其 package 的規(guī)則是 @types/package 。

由於 type 定義檔只是 TypeScript 編譯使用，以此加上 --save-dev 。

tsconfig.json{ "compileOnSave": false, "compilerOptions": {  "outDir": "./dist/out-tsc",  "sourceMap": true,  "declaration": false,  "moduleResolution": "node",  "emitDecoratorMetadata": true,  "experimentalDecorators": true,  "target": "es5",  "typeRoots": [   "node_modules/@types"  ],  "types" : ["lodash"],  "lib": [   "es2017",   "dom"  ] }}

14 行

"types" : ["lodash"],

在 typeRoots 新增 types ，在陣列中加入 lodash ，表示 TypeScript 在編譯時(shí)會(huì)使用剛剛安裝的 lodash type 定義檔。

Import Lodashapp.component.tsimport {Component, OnInit} from '@angular/core';import * as _ from 'lodash';@Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css']})export class AppComponent implements OnInit { title = 'app'; ngOnInit(): void {  const scores: number[] = [100, 99, 98];  _.remove(scores, 2);  scores.forEach((score) => console.log(score)); }}

第 2 行

import * as _ from 'lodash';

載入 lodash 。

因?yàn)?lodash 習(xí)慣以 _ 使用，因此 import 時(shí)特別取別名為 _

WebStorm 對(duì)於 Angular 內(nèi)建的 API，都可以自動(dòng) import，但對(duì)於 JavaScript 的 package，目前 WebStorm 還沒(méi)有辦法自動(dòng) import，需手動(dòng)載入

15 行

_.remove(scores, 2);

陣列的移除元素一直是 JavaScript 比較麻煩的部分，透過(guò) lodash 的 remove() ，可以很簡(jiǎn)單的使用。

Conclusion

實(shí)務(wù)上若有 Angular 版本的 package，當(dāng)然優(yōu)先使用；若遇到必須使用 JavaScript package 不可的場(chǎng)合，除了安裝 package 外，還要安裝 type 定義檔，並且在 tsconfig.json 設(shè)定，如此才可以在 Angular 正確使用並通過(guò)編譯

Sample Code

完整的範(fàn)例可以在我的GitHub 上找到

總結(jié)

以上所述是小編給大家介紹的在 Angular中 使用 Lodash 的方法，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)錯(cuò)新站長(zhǎng)站網(wǎng)站的支持！