Wie verwende ich Bibliotheken von Drittanbietern in AngularJS? Detaillierte Erläuterung der Verwendung von Bibliotheken von Drittanbietern in AngularJS

In diesem Artikel wird erläutert, wie AngularJS Bibliotheken von Drittanbietern verwendet. Welche Bibliotheken von Drittanbietern können von AngularJS verwendet werden?

Angulars Komponenten und Module scheinen etwas inkompatibel mit vorhandenen Bibliotheken von Drittanbietern zu sein (z. B. lodash, moment usw.). Der Hauptgrund dafür ist die durch verursachte Illusion TypeScript . Die drei Säulen des Frontends sind eigentlich dieselben. Unabhängig davon, welches Frontend-Framework verwendet wird, können diese Bibliotheken von Drittanbietern verwendet werden.

Im Folgenden erkläre ich aus einer anderen Perspektive, wie Angular Bibliotheken von Drittanbietern nutzt.

1. Vorab geschrieben

Bevor Sie beginnen, müssen Sie das TypeScript-Modulsystem verstehen – ein Modul wird in seinem eigenen Bereich ausgeführt, nicht im globalen Bereich, auf den Time angewiesen ist export und import um Beziehungen aufzubauen. Während des Kompilierungsprozesses verlässt sich der Compiler auch auf diese Beziehung, um die zu kompilierenden Dateien zu finden.

TypeScript veröffentlicht Klassenbibliotheken immer noch in Form von JavaScript-Dateien, was zu Typen führt, die nicht ausgedrückt werden können und eine Deklarationsdatei zur Beschreibung des Typs erfordern. Daher ist die Deklarationsdatei zu einem unverzichtbaren Bestandteil der Klassenbibliothek geworden .

2. Klassifizierung

Angular wird unter Verwendung der TypeScript-Sprache entwickelt. Damit eine Klassenbibliothek verwendet werden kann, ist die wesentliche Voraussetzung, ob ein vorhanden ist Deklarationsdatei .

Es gibt eine Deklarationsdatei

Um zu unterscheiden, ob die Klassenbibliothek über eine Deklarationsdatei verfügt*.d.ts, können Sie dies unter zwei Gesichtspunkten bestätigen:

1. Klasse Die Bibliothek wird mit

geliefert. Nach der Installation eines abhängigen Pakets von Npm können Sie direkt überprüfen, ob das package.json seiner Bibliothek den Knoten typings enthält, z. B. moment >

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

2. TypeSearch-Suche

TypeScript bietet eine Website namens TypeSearch, auf der Sie direkt Schlüsselwörter eingeben können, um zu überprüfen, ob die Deklarationsdatei der Klassenbibliothek enthalten ist.

Zum Beispiel kann

in der Liste angeklickt werden, um zur npm-Website zu springen, und Sie sehen einen Befehl wie diesen: lodash

npm install --save @types/lodash

Keine Deklarationsdatei

Eine solche Situation ist durchaus üblich.

hatte zuvor keine Deklarationsdatei. In diesem Fall können Sie die Deklarationsdatei nur selbst schreiben. G2

Das von Angular Cli erstellte Projekt enthält eine

Deklarationsdatei, die automatisch in die src/typings.d.tsglobale Deklarationsdefinition aufgenommen wird, und es wäre besser, die Deklarationsinformationen dieser Dateien zu schreiben Klassenbibliotheken darin aber.

Im Allgemeinen ist es für Sie schwierig, eine vollständige Deklarationsdatei für eine Klassenbibliothek zu schreiben. Dies ist zu kosteneffektiv, sodass Sie häufig nur ein

für einige globale Objekte erstellen (was bedeutet, dass Sie das ignorieren). (Statische Typprüfung) ist ebenfalls verfügbar, zum Beispiel: any

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

3. Wie verwende ich es?

Die Kontoauszugsdatei ist ein Link und wird immer noch auf diese Weise verwendet, um die Verwendung zu unterteilen.

Für Deklarationsdateien müssen Sie nichts extra tun, verwenden Sie einfach

, um dort zu importieren, wo das Modul benötigt wird, zum Beispiel: import

import * as moment from 'moment';

moment(); // 当前时间

Keine Deklarationsdatei

Es ist wichtig zu prüfen, was zu tun ist, wenn keine Deklarationsdatei vorhanden ist. Wie bereits erwähnt, bedeutet die Verwendung von

, um anzugeben, dass die statische Typprüfung ignoriert wird, dass der Benutzer nicht in den Genuss intelligenter Eingabeaufforderungen kommen kann, die die Deklarationsdatei mit sich bringt. any

Wie

können wir es direkt an einer beliebigen Stelle im Projekt verwenden, es kann jedoch nur G2-Variablen erkennen und die Methoden oder Eigenschaften der Instanz sind agnostisch. G2

// app.component.ts

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

Außerdem führt TypeScript während des Kompilierungsprozesses keine Typprüfung für

durch. Ob G2 wirklich existiert, können nur Sie selbst feststellen. Für Angular müssen diese Module explizit auf den Knoten G2 von .angular-cli.json geladen werden. (Wenn Sie mehr erfahren möchten, besuchen Sie die chinesische PHP-Website scriptsAngularJS Development Manual, um mehr zu erfahren)

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

TypeScript ist nach der Kompilierung immer noch JavaScript-Code, wenn Sie den

verwandte JavaScript-Dateien, wird während des Betriebs natürlich der Fehler G2 nicht gefunden angezeigt. G2

Zusammenfassung

Wenn Sie sich die Verwendung von Bibliotheken von Drittanbietern aus der TypeScript-Perspektive ansehen, werden Sie ein anderes Gefühl haben. Es handelt sich lediglich um eine einfache, unzuverlässige, aber effektive Beschreibung. Ich hoffe, dass Menschen, die es besser wissen, Gnade zeigen.

Es besteht keine Absicht,

hier zu diskreditieren. Jetzt hat G2 ein Erklärungsdokument vorgelegt. G2

Okay, dieser Artikel endet hier (wenn Sie mehr sehen möchten, besuchen Sie die chinesische PHP-Website

AngularJS-Benutzerhandbuch , um mehr zu erfahren. Wenn Sie Fragen haben, können Sie eine Nachricht hinterlassen). unten.

Das obige ist der detaillierte Inhalt vonWie verwende ich Bibliotheken von Drittanbietern in AngularJS? Detaillierte Erläuterung der Verwendung von Bibliotheken von Drittanbietern in AngularJS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!