Angular でサードパーティのライブラリを呼び出す方法

今回は、Angular でサードパーティ ライブラリを呼び出す方法と、Angular でサードパーティ ライブラリを呼び出す際の注意点について説明します。以下は実際のケースです。見てみましょう。

Angular のコンポーネントとモジュールは、既存のサードパーティ ライブラリ (lodash、moment など) と少し互換性がないようです。その主な理由は、TypeScript によって引き起こされる錯覚です。フロントエンドの 3 本柱は実は同じで、どのようなフロントエンド フレームワークであっても、これらのサードパーティ ライブラリを使用できます。

以下では、Angular がサードパーティ ライブラリをどのように使用するかを別の観点から説明します。

1. 前に書きます

始める前に、TypeScript モジュール システムを理解する必要があります。モジュールはグローバル スコープではなく、独自のスコープで実行されます。モジュールはインポートに依存します。インポートとの関係を確立します。コンパイル プロセス中に、コンパイラはこの関係に基づいて、コンパイルする必要のあるファイルを見つけます。

TypeScript は依然として JavaScript ファイルの形式でクラス ライブラリを公開していますが、その結果、型を表現できず、型を記述するために宣言ファイルが必要となるため、宣言ファイルはクラス ライブラリの不可欠な部分となっています。

2. 分類

Angular は TypeScript 言語を使用して開発されています。 前節で述べたように、クラス ライブラリを使用するためには、宣言ファイルが存在することが必須の要件です。

宣言ファイルがあります

クラスライブラリに宣言ファイル*.d.tsがあるかどうかを区別するには、次の2つの側面から確認できます:

1. クラスライブラリには付属しています

。 Npm からのもの パッケージに依存した後、そのライブラリの package.json に、moment:

"typings": "./moment.d.ts"

2、TypeSearch retrieval

などの型付けノードが含まれているかどうかを直接確認できます。TypeScript では、TypeSearch という Web サイトを提供しています。キーワードを直接入力して、クラスがライブラリ宣言ファイルに含まれているかどうかを確認します。

たとえば、リスト内の lodash をクリックすると、npm Web サイトにジャンプし、次のようなコマンドが表示されます:

npm install --save @types/lodash

宣言ファイルがありません

このような状況はよくあります。たとえば、G2 は以前にこのファイルを宣言していませんでした。この場合、宣言ファイルを自分で作成することしかできません。

Angular Cli で作成したプロジェクトには、グローバル宣言定義に自動的に組み込まれる src/typings.d.ts 宣言ファイルが含まれており、その中にこれらのクラス ライブラリの宣言情報を記述するのが最善です。

一般に、クラス ライブラリの完全な宣言ファイルを作成するのはコスト効率が高すぎるため、一部のグローバルに対して "any" (静的型チェックを無視することを意味します) を作成することしかできないことがよくあります。オブジェクト。例:

// src/typings.d.ts
declare var G2: any;

3. 使用方法?

ステートメントファイルはリンクになっており、使い方はやはりこのように分かれています。

宣言ファイルの場合、追加の操作は必要ありません。モジュールが必要な場所で import を使用するだけです。例:

import * as moment from 'moment';
moment(); // 当前时间

宣言ファイルなし

宣言がない場合にどうするかを確認することが重要です前述したように、any を使用して静的型チェックを無視することを示すことは、ユーザーが宣言ファイルによってもたらされるインテリジェントなプロンプトを享受できないことを意味します。

G2 と同様に、プロジェクト内のどこでも直接使用できますが、認識できるのは G2 変数のみであり、インスタンスのメソッドやプロパティは認識されません。

// app.component.ts
const g2 = new G2();
g2. // 输入 `.` 后是不会有任何方法或属性

さらに、TypeScript はコンパイル プロセス中に G2 の型チェックを実行しません。G2 が実際に存在するかどうかは自分で判断するしかありません。 Angular の場合、これらのモジュールは .angular-cli.json のスクリプト ノードに明示的にロードされる必要があります。

// .angular-cli.json
"scripts": [
  "../node_modules/@antv/g2/dist/g2.min.js"
]

TypeScript はコンパイル後も JavaScript コードのままです。G2 関連の JavaScript ファイルを手動でロードしないと、当然のことながら、実行プロセス中に G2 が見つからないというエラーが発生します。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

vuex での状態オブジェクトの使用法の概要

react-redux プラグイン プロジェクトの実践的な使用法分析

以上がAngular でサードパーティのライブラリを呼び出す方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。