在 Angular中 使用 Lodash 的方法

在 Angular中 使用 Lodash 的方法

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

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

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

一般來說，若是知名的 JavaScript library，都已經有人維護 type 定義檔，其 package 的規則是 @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",

yKkZAvY"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: ['./http://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 習慣以 _ 使用，因此 import 時特別取別名為 _

WebStorm 對於 Angular 內建的 API，都可以自動 import，但對於 JavaScript 的 package，目前 WebStorm 還沒有辦法自動 import，需手動載yKkZAvY入

15 行

_.remove(scores, 2);

陣列的移除元素一直是 JavaScript 比較麻煩的部分，透過 lodash 的 remove() ，可以很簡單的使用。

Conclusion

實務上若有 Angular 版本的 package，當然優先使用；若遇到必須使用 JavaScript package 不可的場合，除了安裝 package 外，還要安裝 type 定義檔，並且在 tsconfig.json 設定，如此才可以在 Angular 正確使用並通過編譯

Sample Code

完整的範例可以在我的github 上找到

总结

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

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。