Angular で Lodash メソッドを使用するにはどうすればよいですか?

この記事では主に 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 にあります

上記は、私が皆さんのためにコンパイルしたものです. 今後も皆様のお役に立てれば幸いです。

関連記事:

ノードを使用して組み込みデバッグを実装する

vueモバイルターミナルに日付選択コンポーネントを実装する

指定したJSファイルをwebpackに個別にパッケージ化する方法

以上がAngular で Lodash メソッドを使用するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。