在 Angular中 使用 Lodash 的方法
阿新 • • 發佈:2019-01-09
如何Lodash 是 JavaScript 很有名的 package,尤其對於處理 array 很有一套,Angular 該如何使用 lodash 呢 ? 這也可以視為在 Angular 使用傳統 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
TypeScript 的解決方案是另外使用 *.d.ts 。
一般來說,若是知名的 JavaScript library,都已經有人維護 type 定義包,其 package 的規則是 @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"
]
}
}
"types" : ["lodash"],
在 typeRoots 新增 types ,其中加入 lodash ,表示 TypeScript 在編譯時會使用剛剛安裝的 lodash type 定義包。
//Import Lodash
//app.component.ts
import {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));
}
}
第二行
import * as _ from 'lodash';
載入 lodash 。
因為 lodash 習慣以 _ 使用,因此 import 時特別取別名為 _
WebStorm 對於Angular 內建的 API,都可以自動 import,但對於 JavaScript 的 package,目前 WebStorm 還沒有辦法自動 import,需手動載入
15 行
_.remove(scores, 2);
陣列移除元素一直是 JavaScript 比較麻煩的部分,通過 lodash 的 remove() ,可以很簡單地使用。
Conclusion
實際上若有 Angular 版本的 package,當然應優先使用;若遇到必須使用 JavaScript package 不可的場合,除了安裝 package 外,還要安裝 type 定義包,並在 tsconfig.json 設定,如此才可以在 Angular 正確使用並通過編譯
Sample Code
完整的例子可以在我的GitHub 上找到