在 Angular中 使用 Lodash 的方法

转自

如何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 上找到