在 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 上找到

总结

以上所述是小编给大家介绍的在 Angular中 使用 Lodash 的方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！