Verwendung von JavaScript-Bibliotheken in Angular 2+ -Apps

Erinnern Sie sich, als Sie AngularJS (Version 1) lernten und Tutorials Ihnen immer wieder sagten, dass Sie JQuery nicht zu Ihrem Projekt hinzufügen müssen?

Das hat sich nicht geändert - Sie müssen Ihrem Angular 2+ -Projekt kein JQuery hinzufügen. Wenn Sie jedoch aus irgendeinem Grund einige JavaScript-Bibliotheken verwenden müssen, müssen Sie wissen, wie diese in Angular verwendet werden. Beginnen wir also bei Null.

Ich werde einem Projekt underscore.js hinzufügen und Ihnen zeigen, wie es funktioniert.

1. Erstellen Sie ein neues Projekt mit Angular CLI

Wenn Sie CLI noch nicht auf Ihrem Computer installiert haben, installieren Sie es. Erstellen Sie nach der Installation ein neues Projekt (falls Sie noch keines haben).

ng neues Lernen

Jetzt haben Sie ein neues Angular-Projekt namens " Lernen ".

2. Installieren Sie das Paket in Ihrem Projekt

Gehen Sie zu dem Projekt, das wir gerade gemacht haben:

CD lernen

Verwenden Sie Ihren bevorzugten Paketmanager, um die Bibliothek zu installieren, die Sie verwenden möchten. Ich benutze npm, um zu installieren underscore.js.

npm install - Unterstrich speichern

3. Importieren Sie die Bibliothek in Angular (TypeScript).

Wir schreiben Code in TypeScript und sollten dessen Regeln befolgen. TypeScript muss verstehen underscore.js.

Wie Sie vielleicht wissen, ist TypeScript eine typisierte Obermenge von JavaScript, die zu einfachem JavaScript kompiliert wird. TypeScript hat eine eigene Syntax, Funktion und Variablen können definierte Typen haben. Wenn wir jedoch eine externe Bibliothek wie den Unterstrich verwenden möchten, müssen wir Typdefinitionen für TypeScript deklarieren.

In JavaScript ist die Art der Argumente nicht wichtig und Sie erhalten beim Schreiben von Code keine Fehlermeldung. Mit TypeScript können Sie jedoch einer Funktion, die eine Zeichenfolge als Eingabe akzeptiert, kein Array zuweisen. Dann ist hier die Frage: Sollen wir das underscore.jsin TypeScript umschreiben und dort Typen definieren?

Natürlich nicht - TypeScript bietet Deklarationsdateien (* .d.ts), die Typen definieren und eine JavaScript-Datei / Bibliotheken für TypeScript standardisieren.

Einige Bibliotheken enthalten eine Typisierungsdatei, und Sie müssen das Typziel von TypeScript nicht für sie installieren. Falls eine Bibliothek jedoch keine   .d.tsDatei enthält, müssen Sie diese installieren.

Wir müssen nur die underscore.jsTypdefinitionsdatei suchen und importieren . Ich schlage vor, dass Sie die Typensuche verwenden, um die Deklarationsdatei für die benötigten Bibliotheken zu finden.

Suchen Sie underscorein Type Sceach nach und es leitet Sie zu Totypes / Unterstrichen weiter. Installieren Sie die Deklarationsdatei mit dem folgenden Befehl:

npm install --save @types/underscore

4. Importieren Sie die Typdeklaration in die Angular App

Angenommen, Sie verwenden in Ihrer app.component.tsDatei einen Unterstrich . Öffnen Sie die app.component.tsvon Ihrer IDE und fügen Sie den folgenden Code oben in die Datei ein:

import * as _ from 'underscore';/*** OR simply:* import 'underscore';*/ 

Das TypeScript in dieser Komponente versteht jetzt _und funktioniert problemlos wie erwartet.

Frage: Wie verwende ich eine Bibliothek ohne Typdefinition (* .d.ts) in TypeScript und Angular?

Erstellen Sie es, wenn das src/typings.d.tsnicht existiert. Öffnen Sie es andernfalls und fügen Sie Ihr Paket hinzu:

declare var 

In Ihrem TypeScript müssen Sie es jetzt unter dem angegebenen Namen importieren:

import * as yourPreferedName from 'yourLibrary';yourPreferedName.method(); 

Fazit

Lassen Sie uns zum Abschluss ein einfaches Beispiel erstellen, um ein funktionierendes Beispiel zu sehen _. Öffnen Sie app.component.tsund appComponentschreiben Sie innerhalb der Klasse ein, constructordas das letzte Element eines Arrays mit der _.last()Funktion des Unterstrichs zurückgibt :

... import * as _ from 'underscore'; ... export class AppComponent { constructor() { const myArray: number[] = [9, 1, 5]; const lastItem: number = _.last(myArray); //Using underscore console.log(lastItem); //5 } } 

Wenn Sie Ihre Angular-App jetzt öffnen, gelangen Sie 5in die Konsole. Dies bedeutet, dass wir underscoreunser Projekt korrekt hinzufügen können und es wie erwartet funktioniert.

Sie können Ihrem Projekt beliebige JavaScript-Bibliotheken hinzufügen, indem Sie dieselben Schritte ausführen.

Sie können mir für weitere Artikel über Technologie und Programmierung folgen.