この記事では主に Angular で Lodash を使用する方法を紹介します。必要な方は参考にしてください。
Lodash は JavaScript、特に配列の処理によく知られていますが、これをどのように使用すればよいでしょうか? Angular で従来の JavaScript パッケージを使用するための SOP を検討してください。
バージョン
Node.js 8.9.4
Angular CLI 1.6.2
Angular 5.2.2
Lodashのインストール
~/MyProject $ npm install lodash --save
npmを使用してlodashをインストールします。
Lodash 型定義ファイルをインストールします
~/MyProject $ npm install @types/lodash --save-dev
従来の JavaScript には型がありませんが、TypeScript には型に加えてジェネリックスもあります。これを従来の JavaScript とどのように組み合わせる必要がありますか?
TypeScript。解決策 解決策は、型定義ファイルである *.d.ts を個別に使用することです。
一般的に、有名な JavaScript ライブラリであれば、すでに誰かが型定義ファイルを保守しており、そのパッケージ ルールは @types/package です。
型定義ファイルは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 に型を追加し、配列に lodash を追加します。これは、TypeScript がコンパイル時にインストールされたばかりの lodash 型定義ファイルを使用することを示します。
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行目
import * as _ from 'lodash';
lodashをロードします。
lodash は _ の使用に慣れているため、インポートには _ という特別なエイリアスが付けられています
WebStorm は Angular の組み込み API を自動的にインポートできますが、JavaScript パッケージの場合、現在 WebStorm には自動的にインポートする方法がなく、手動でロードする必要があります。
15 行
_.remove(scores, 2);
JavaScript では常に面倒な要素の配列からの要素の削除が、lodash のremove() を使用することで簡単に行えます。
結論
実際には、パッケージの Angular バージョンがある場合は、もちろんそれが最初に使用されます。JavaScript パッケージを使用しなければならない状況に遭遇した場合は、パッケージをインストールするだけでなく、それもインストールする必要があります。型定義ファイルを作成して tsconfig.json に設定すると、Angular で正しく使用してコンパイルできるようになります
サンプル コード
完全な例は私の GitHub にあります
上記は、私が皆さんのためにコンパイルしたものです. 今後も皆様のお役に立てれば幸いです。
関連記事:
指定したJSファイルをwebpackに個別にパッケージ化する方法
以上がAngular で Lodash メソッドを使用するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。