在 Angular中 使用 Lodash 的方法

如何Lodash 是 JavaScript 很有名的 package，尤其??於?理 array 很有一套，Angular ?如何使用 lodash 呢 ? ?@也可以??樵? Angular 使用?鹘y JavaScript package 的 SOP。

Version

Node.js 8.9.4

Angular CLI 1.6.2

Angular 5.2.2

安?b Lodash

~/MyProject $ npm install lodash --save

使用 npm 安?b lodash 。

安?b Lodash Type 定?x?n

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

?鹘y JavaScript ?K?]有型?e，但 TypeScript 是????型?e?Z言，除了型?e外?有泛型，?@?怎?N?c?鹘y JavaScript 搭配呢 ?

TypeScript 的解?Q方案是另外使用 *.d.ts ，此?? type 定?x?n。

一般?碚f，若是知名的 JavaScript library，都已?有人?S?o type 定?x?n，其 package 的??t是 @types/package 。

由於 type 定?x?n只是 TypeScript ??g使用，以此加上 --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 在??g?r??使用????安?b的 lodash type 定?x?n。

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));
 }
}

第 2 行

import * as _ from 'lodash';

?d入 lodash 。

因?? lodash ??T以 _ 使用，因此 import ?r特?e取?e名?? _

WebStorm ??於 Angular ?冉ǖ? API，都可以自?? import，但??於 JavaScript 的 package，目前 WebStorm ??]有?k法自?? import，需手?虞d入

15 行

_.remove(scores, 2);

?列的移除元素一直是 JavaScript 比?^麻?┑牟糠郑?透?^ lodash 的 remove() ，可以很??蔚氖褂谩?

Conclusion

???丈先粲? Angular 版本的 package，??然??先使用；若遇到必?使用 JavaScript package 不可的?龊希?除了安?b package 外，?要安?b type 定?x?n，?K且在 tsconfig.json ?O定，如此才可以在 Angular 正?_使用?K通?^??g

Sample Code

完整的?例可以在我的GitHub 上找到

总结