Kā izmantot JavaScript bibliotēkas lietotnēs Angular 2+

Vai atceraties, kad mācījāties AngularJS (1. versija), un konsultācijas jums vienmēr teica, ka jums nav jāpievieno JQuery savam projektam?

Tas nav mainījies - jums nav jāpievieno JQuery savam Angular 2+ projektam. Bet, ja kāda iemesla dēļ jums, iespējams, būs jāizmanto dažas JavaScript bibliotēkas, jums jāzina, kā tās izmantot Angular. Tātad, sāksim no nulles.

Es projektam pievienošu underderscore.js un parādīšu, kā tas darbojas.

1. Izveidojiet jaunu projektu, izmantojot Angular CLI

Ja jūsu datorā vēl nav instalēts CLI, instalējiet to. Pēc instalēšanas izveidojiet jaunu projektu (ja jums to vēl nav).

jauna mācīšanās

Tagad jums būs jauns leņķa projekts ar nosaukumu “ mācīšanās ”.

2. Instalējiet paketi savā projektā

Pārejiet uz tikko izveidoto projektu:

CD mācīšanās

Izmantojiet vēlamo pakotņu pārvaldnieku, lai instalētu bibliotēku, kuru izmantosit; Es izmantoju, npmlai instalētu underscore.js.

npm install - saglabājiet pasvītrojumu

3. Importējiet bibliotēku Angular (TypeScript)

Mēs rakstām kodu TypeScript, un mums jāievēro tā noteikumi. TypeScript ir jāsaprot underscore.js.

Kā jūs, iespējams, zināt, TypeScript ir tipizēts JavaScript superset, kas tiek apkopots vienkāršā JavaScript. TypeScript ir sava sintakse, funkcija un mainīgajiem var būt noteikti tipi. Bet, kad mēs izmantosim ārēju bibliotēku, piemēram, pasvītrojumu, mums jādeklarē tipa definīcijas TypeScript.

Programmā JavaScript argumentu veids nav svarīgs, un, rakstot kodu, jūs nesaņemsit kļūdu. Bet TypeScript neļaus jums piešķirt masīvu funkcijai, kas pieņem virkni kā ievadi. Tad šeit ir jautājums: vai mums vajadzētu pārrakstīt underscore.jsTypeScript un definēt tipus tur?

Protams, nē - TypeScript nodrošina deklarācijas failus (* .d.ts), kas definē tipus un standartizē JavaScript failu / bibliotēkas.

Dažās bibliotēkās ir ierakstīšanas fails, un jums nav jāinstalē TypeScript tipa galamērķis. Bet, ja bibliotēkā nav   .d.tsfaila, tas ir jāinstalē.

Mums vienkārši jāatrod un jāimportē underscore.jstipa definīcijas fails. Es iesaku jums izmantot Type Search, lai atrastu nepieciešamo bibliotēku deklarācijas failu.

Meklējiet underscorevienumu Type Sceach, un tas novirza jūs tipus / pasvītrojumus. Instalējiet deklarācijas failu, izmantojot šādu komandu:

npm install --save @types/underscore

4. Importējiet tipa deklarāciju lietotnē Angular

Pieņemsim, ka app.component.tsfailā izmantosit pasvītrojumu . Atveriet app.component.tsIDE un faila augšdaļā pievienojiet šādu kodu:

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

Šajā komponentā esošais TypeScript tagad ir saprotams _un viegli darbojas, kā paredzēts.

Jautājums: Kā izmantot bibliotēku, kurai TypeScript un Angular nav tipa definīcijas (* .d.ts)?

Izveidojiet to, ja tāda src/typings.d.tsnepastāv. Pretējā gadījumā atveriet to un pievienojiet tai savu paketi:

declare var 

Jūsu TypeScript tagad tas ir jāimportē ar vārdu:

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

Secinājums

Īsāk sakot, izveidosim vienkāršu piemēru, lai redzētu tā piemēru _. Atveriet app.component.tsun iekšpusē appComponentrakstiet a, constructorkas atgriež masīva pēdējo vienumu, izmantojot pasvītrojuma _.last()funkciju:

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

Ja tagad atvērsit savu Angular lietotni, jūs nokļūsiet 5konsolē, kas nozīmē, ka mēs varētu pareizi pievienot underscoremūsu projektam, un tas darbojas, kā paredzēts.

Varat pievienot jebkuras JavaScript bibliotēkas savam projektam, veicot tās pašas darbības.

Jūs varat sekot man, lai iegūtu vairāk rakstu par tehnoloģijām un programmēšanu.