如何在 Angular 使用傳統 JavaScript 套件 ?

在 Angular 內使用 JavaScript Package

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 4.17.4

安裝 Lodash

1
~/MyProject $ npm install lodash --save

使用 npm 安裝 lodash。

安裝 Lodash Type 定義檔

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

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

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

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

由於 type 定義檔只是 TypeScript 編譯使用，以此加上 --save-dev。

Import Lodash

app.component.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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 行

1
import * as _ from 'lodash';

載入 lodash 。

因為 lodash 習慣以 _ 使用，因此 import 時特別取別名為 _

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

15 行

1
_.remove(scores, 2);

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

目前 WebStorm 在輸入 _. 之後的 intellisense 速度較慢，需要等 1s 之後才會顯示，這應該是 WebStorm 本身的問題

Conclusion

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

Sample Code

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

Reference

CK’s Notepad, Angular 3rd Library 的安裝筆記

2018-02-01
▲