Sådan bruges JavaScript-biblioteker i Angular 2+ apps

Kan du huske, da du lærte AngularJS (version 1), og selvstudier fortsatte med at fortælle dig, at du ikke behøver at tilføje JQuery til dit projekt?

Det har ikke ændret sig - du behøver ikke at tilføje JQuery til dit Angular 2+-projekt. Men hvis du af en eller anden grund muligvis skal bruge nogle JavaScript-biblioteker, skal du vide, hvordan du bruger dem i Angular. Så lad os komme i gang fra nul.

Jeg vil føje underscore.js til et projekt og vise dig, hvordan det fungerer.

1. Opret et nyt projekt ved hjælp af Angular CLI

Hvis du ikke allerede har CLI installeret på din maskine, skal du installere den. Efter installation skal du oprette et nyt projekt (hvis du ikke allerede har et).

ng ny læring

Nu får du et nyt Angular-projekt med navnet “ learning ”.

2. Installer pakken i dit projekt

Gå til det projekt, vi lige har lavet:

cd læring

Brug din foretrukne pakkehåndtering til at installere det bibliotek, du vil bruge; Jeg bruger npmtil at installere underscore.js.

npm install - gem understregning

3. Importer biblioteket til kantet (TypeScript)

Vi skriver kode i TypeScript, og vi skal følge dens regler. TypeScript skal forstå underscore.js.

Som du måske ved, er TypeScript et skrevet supersæt af JavaScript, der kompileres til almindeligt JavaScript. TypeScript har sin egen syntaks, funktion og variabler kan have definerede typer. Men når vi skal bruge et eksternt bibliotek som understregning, er vi nødt til at erklære typedefinitioner til TypeScript.

I JavaScript er typen af ​​argumenter ikke vigtig, og du får ikke en fejl, mens du skriver kode. Men TypeScript giver dig ikke mulighed for at give en matrix til en funktion, der accepterer en streng som input. Så er der spørgsmålet: skal vi omskrive underscore.jsi TypeScript og definere typer der?

Naturligvis ikke - TypeScript giver erklæringsfiler (* .d.ts), der definerer typer og standardiserer en JavaScript-fil / biblioteker til TypeScript.

Nogle biblioteker inkluderer en typefil, og du behøver ikke installere TypeScript's destinationsdestination for dem. Men hvis et bibliotek ikke har en   .d.tsfil, skal du installere den.

Vi skal bare finde og importere underscore.jstypedefinitionsfil. Jeg foreslår, at du bruger Type Search til at finde erklæringsfilen til de biblioteker, du har brug for.

Søg efter underscorei Type Sceach, og det omdirigerer dig til alle typer / understregning. Installer erklæringsfilen ved hjælp af følgende kommando:

npm install --save @types/underscore

4. Importtypedeklaration til Angular app

Lad os sige, at du vil bruge understregning i din app.component.tsfil. Åbn den app.component.tsved din IDE, og tilføj følgende kode øverst i filen:

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

TypeScript i den komponent forstår nu, _og det fungerer let som forventet.

Spørgsmål: Hvordan bruges et bibliotek, der ikke har typedefinition (* .d.ts) i TypeScript og Angular?

Opret det, hvis det src/typings.d.tsikke findes. Ellers skal du åbne den og tilføje din pakke til den:

declare var 

I din TypeScript skal du nu importere den med det givne navn:

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

Konklusion

For at afslutte, lad os lave et simpelt eksempel for at se et fungerende eksempel på _. Åbn app.component.tsog inde i appComponentklassen skriv a, constructorsom returnerer det sidste element i en matrix ved hjælp af understregningens _.last()funktion:

... 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 } } 

Hvis du åbner din Angular-app nu, kommer du 5ind i konsollen, hvilket betyder, at vi korrekt kunne tilføje underscoretil vores projekt, og det fungerer som forventet.

Du kan tilføje alle JavaScript-biblioteker til dit projekt bare ved at følge de samme trin.

Du kan følge mig for flere artikler om teknologi og programmering.