在 Angular中使用 Lodash 的方法

更新時間：2018年02月11日 11:06:12 投稿：mrr

這篇文章主要介紹了在 Angular中使用 Lodash 的方法,需要的朋友可以參考下

如何Lodash 是 JavaScript 很有名的 package，尤其對於處理 array 很有一套，Angular 該如何使用 lodash 呢 ? 這也可以視為在 Angular 使用傳統(tǒng) 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 定義檔

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

傳統(tǒng) JavaScript 並沒有型別，但 TypeScript 是個強型別語言，除了型別外還有泛型，這該怎麼與傳統(tǒng) JavaScript 搭配呢 ?

TypeScript 的解決方案是另外使用 *.d.ts ，此為 type 定義檔。

一般來說，若是知名的 JavaScript library，都已經(jīng)有人維護 type 定義檔，其 package 的規(guī)則是 @types/package 。

由於 type 定義檔只是 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 在編譯時會使用剛剛安裝的 lodash type 定義檔。

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 行