How to use Lodash method in Angular?

This article mainly introduces the method of using Lodash in Angular. Friends who need it can refer to it

How to Lodash is a well-known package for JavaScript, especially for processing arrays. How to use Angular What about lodash? This can also be considered an SOP for using traditional JavaScript packages in Angular.

Version

Node.js 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 the Lodash Type definition file

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

Traditional JavaScript does not have types, but TypeScript is a strongly typed language. In addition to types, it also has generics. This should How to match it with traditional JavaScript?

The solution for TypeScript is to use *.d.ts separately, which is the type definition file.

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

Since the type definition file is only used by TypeScript compilation, add --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 Line

"types" : ["lodash"],

Add types in typeRoots and add lodash to the array, indicating that TypeScript will use the lodash type definition file just installed when compiling.

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

Line 2

import * as _ from 'lodash';

Load lodash.

Because lodash is used to using _, so when importing, the alias is _

WebStorm can automatically import Angular's built-in API, but for JavaScript packages, WebStorm currently does not The method is to automatically import, and you need to manually load the

15 rows

_.remove(scores, 2);

Removing elements from the array has always been a troublesome part of JavaScript. Through lodash's remove(), it can be used very simply.

Conclusion

In practice, if there is an Angular version of the package, of course it will be used first; if you encounter situations where JavaScript package must be used, in addition to installing the package, you must also Install the type definition file and set it in tsconfig.json so that it can be used correctly in Angular and compiled

Sample Code

The complete example can be found in my I found

on GitHub. The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Use node to implement built-in debugging

Implement date selection component in vue mobile terminal

How to package specified JS files separately in webpack

The above is the detailed content of How to use Lodash method in Angular?. For more information, please follow other related articles on the PHP Chinese website!