So rufen Sie Bibliotheken von Drittanbietern in Angular auf

Dieses Mal zeige ich Ihnen, wie Sie Bibliotheken von Drittanbietern in Angular aufrufen und welche Vorsichtsmaßnahmen für den Aufruf von Bibliotheken von Drittanbietern in Angular gelten. Das Folgende ist ein praktischer Fall, schauen wir uns das an.

Die Komponenten und Module von Angular scheinen mit vorhandenen Bibliotheken von Drittanbietern (wie lodash, moment usw.) etwas inkompatibel zu sein. Der Hauptgrund dafür ist die durch TypeScript verursachte Illusion. Die drei Säulen des Front-Ends sind tatsächlich dieselben. Unabhängig von der Art des Front-End-Frameworks können diese Bibliotheken von Drittanbietern verwendet werden.

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

1. Schreiben Sie es vorne

Bevor Sie beginnen, müssen Sie das TypeScript-Modulsystem verstehen – ein Modul bezieht sich auf ein Modul in sein eigener Bereich Wird im globalen Bereich statt im globalen Bereich ausgeführt; die Beziehung zwischen Modulen basiert auf Export und Import. 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 mit der TypeScript-Sprache entwickelt, wenn Sie eine Klassenbibliothek verwenden möchten Voraussetzung ist, ob ein Deklarationsdokument vorliegt.

Es gibt eine Deklarationsdatei

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

1. Die Klassenbibliothek ist im Lieferumfang enthalten

Nach der Installation eines abhängigen Pakets von Npm können Sie beispielsweise direkt überprüfen, ob die package.json seiner Bibliothek den Typisierungsknoten enthält , 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 vorhanden ist enthalten.

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

npm install --save @types/lodash

Keine Deklarationsdatei

Solche Situationen kommen beispielsweise recht häufig vor. G2 hatte zuvor keine Deklarationsdatei. In diesem Fall können Sie die Deklarationsdatei nur selbst schreiben.

Das von Angular Cli erstellte Projekt enthält eine Deklarationsdatei src/typings.d.ts, die automatisch in die globale Deklarationsdefinition aufgenommen wird. Am besten schreiben Sie die Deklarationsinformationen dieser Klassenbibliotheken hinein Es.

Im Allgemeinen ist es schwierig, eine vollständige Deklarationsdatei für eine Klassenbibliothek zu schreiben. Dies ist zu kosteneffektiv, daher ist es für einige globale Objekte oft nur ein „Any“ (was bedeutet, dass der statische Typ ignoriert wird). ).

Kontoauszugsdateien sind Links, und ihre Verwendung ist immer noch auf diese Weise unterteilt. Für Deklarationsdateien müssen Sie nichts extra tun, verwenden Sie einfach Import, wo das Modul benötigt wird, zum Beispiel:

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

Es ist wichtig zu prüfen, was zu tun ist, wenn keine Deklarationsdatei vorhanden ist. Wenn Sie „any“ verwenden, um anzugeben, dass die statische Typprüfung ignoriert wird, kann der Benutzer nicht in den Genuss intelligenter Eingabeaufforderungen kommen, die die Deklarationsdatei mit sich bringt. Wie G2 können wir es direkt überall im Projekt verwenden, es kann jedoch nur G2-Variablen erkennen und die Methoden oder Eigenschaften der Instanz sind agnostisch.

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

Außerdem führt TypeScript während des Kompilierungsprozesses keine Typprüfung für G2 durch. Ob G2 wirklich existiert, können nur Sie selbst feststellen. Für Angular müssen diese Module explizit in den Skriptknoten von .angular-cli.json geladen werden.

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

TypeScript ist nach der Kompilierung immer noch JavaScript-Code. Wenn Sie G2-bezogene JavaScript-Dateien nicht manuell laden, wird natürlich eine Fehlermeldung ausgegeben, dass G2 während des laufenden Prozesses nicht gefunden wird.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

React-Redux-Plug-In-Projekt praktische Nutzungsanalyse

Das obige ist der detaillierte Inhalt vonSo rufen Sie Bibliotheken von Drittanbietern in Angular auf. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!