在 Angular中 使用 Lodash 的方法
如何Lodash是JavaScript很有名的package，尤其對於處理array很有一套，Angular該如何使用lodash呢?這也可以視為在Angular使用傳統JavaScriptpackage的SOP。
Version
Node.js8.9.4
AngularCLI1.6.2
Angular5.2.2
安裝Lodash
~/MyProject$npminstalllodash--save
使用npm安裝lodash。
安裝LodashType定義檔
~/MyProject$npminstall@types/lodash--save-dev
傳統JavaScript並沒有型別，但TypeScript是個強型別語言，除了型別外還有泛型，這該怎麼與傳統JavaScript搭配呢?
TypeScript的解決方案是另外使用*.d.ts，此為type定義檔。
一般來說，若是知名的JavaScriptlibrary，都已經有人維護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",
"dom"
]
}
}
14行
"types":["lodash"],
在typeRoots新增types，在陣列中加入lodash，表示TypeScript在編譯時會使用剛剛安裝的lodashtype定義檔。
ImportLodash
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']
})
exportclassAppComponentimplementsOnInit{
title='app';
ngOnInit():void{
constscores: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，需手動載入
15行
_.remove(scores,2);
陣列的移除元素一直是JavaScript比較麻煩的部分，透過lodash的remove()，可以很簡單的使用。
Conclusion
實務上若有Angular版本的package，當然優先使用；若遇到必須使用JavaScriptpackage不可的場合，除了安裝package外，還要安裝type定義檔，並且在tsconfig.json設定，如此才可以在Angular正確使用並通過編譯
SampleCode
完整的範例可以在我的GitHub上找到
总结
以上所述是小编给大家介绍的在Angular中使用Lodash的方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！