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"
Nach dem Login kopieren
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
Nach dem Login kopieren
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;
Nach dem Login kopieren
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(); // 当前时间
Nach dem Login kopieren
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. // 输入 `.` 后是不会有任何方法或属性
Nach dem Login kopieren
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"
]
Nach dem Login kopieren
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!
