在 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

安? Lodash

~/MyProject $ npm install lodash --save

使用 npm 安? lodash 。

安? Lodash Type 定??n

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

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

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

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

由於 type 定??n只是 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 在???r??褂????安?的 lodash type 定??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';

?入 lodash 。

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

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

15 行

_.remove(scores, 2);

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

Conclusion

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

Sample Code

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

总结

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