How to use Lodash in Angular

How does Lodash be a very famous package for JavaScript, especially for handling arrays. How does Angular use lodash? This can also be seen as a SOP using traditional JavaScript package in Angular.

Version

8.9.4

Angular CLI 1.6.2

Angular 5.2.2

Install Lodash

~/MyProject $ npm install lodash --save

Use npm to install lodash.

Install Lodash Type Definition File

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

Traditional JavaScript is not stylish, but TypeScript is a strong language, with generics in addition to style. How can this be matched with traditional JavaScript?

The solution to TypeScript is to use *., which is the type definition file.

Generally speaking, if it is a well-known JavaScript library, someone has maintained the type definition file, and the package rule is @types/package.

Since the type definition file is only used for TypeScript translation, add --save-dev .

{
 "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"],

Added types in typeRoots and added lodash to the array, indicating that TypeScript will use the just-installed lodash type definition file when translating.

Import Lodash

import {Component, OnInit} from '@angular/core';
import * as _ from 'lodash';
@Component({
 selector: 'app-root',
 templateUrl: './',
 styleUrls: ['./']
})
export class AppComponent implements OnInit {
 title = 'app';
 ngOnInit(): void {
  const scores: number[] = [100, 99, 98];
  _.remove(scores, 2);
  ((score) => (score));
 }
}

Line 2

import * as _ from 'lodash';

Load lodash .

Because lodash is used to use _, import is specially aliased as _

WebStorm can automatically import the built-in APIs in Angular, but for JavaScript packages, WebStorm currently does not have automatic imports, so it needs to be loaded manually.

15 rows

_.remove(scores, 2);

The removal of the array has always been a relatively complicated part of JavaScript. It can be used very simply through lodash's remove().

Conclusion

In fact, if there is an Angular version of package, of course, it is preferred to use it; if you encounter a combination that must use JavaScript package, in addition to installing package, you must also install the type definition file and set it up, so that you can use it correctly in Angular and edit it through

Sample Code

A complete example can be found in mineGitHub Found on

Summarize

The above is the method of using Lodash in Angular introduced by the editor. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to everyone in time. Thank you very much for your support for my website!