Îți amintești când învățai AngularJS (versiunea 1), iar tutorialele îți spuneau în continuare că nu trebuie să adaugi JQuery în proiectul tău?

Asta nu s-a schimbat – nu este nevoie să adăugați JQuery la proiectul dvs. Angular 2+. Dar dacă, din orice motiv, poate fi necesar să utilizați unele biblioteci JavaScript, trebuie să știți cum să le utilizați în Angular. Deci, să începem de la zero.

Am de gând să adaug subliniază.js la un proiect și vă arată cum funcționează.

1. Creați un nou proiect utilizând Angular CLI

Dacă nu aveți deja CLI instalat pe computer, instalează-l. După instalare, creați un proiect nou (dacă nu aveți deja unul).

o nouă învățare

Acum veți avea un nou proiect Angular numit „învăţare”.

2. Instalați pachetul în proiectul dvs.

Accesați proiectul pe care tocmai l-am făcut:

învățarea cd-urilor

Utilizați managerul de pachete preferat pentru a instala biblioteca pe care o veți folosi; eu folosesc npm a instala underscore.js.

npm install – salvați sublinierea

3. Importați biblioteca în Angular (TypeScript)

Scriem cod în TypeScript și ar trebui să respectăm regulile acestuia. TypeScript trebuie să înțeleagă underscore.js.

După cum s-ar putea să știți, TypeScript este un superset de JavaScript tipărit care se compilează în JavaScript simplu. TypeScript are propria sa sintaxă, funcția și variabilele pot avea tipuri definite. Dar când vom folosi o bibliotecă externă, cum ar fi underscore, trebuie să declarăm definițiile de tip pentru TypeScript.

În JavaScript, tipul de argumente nu este important și nu veți primi o eroare în timp ce scrieți codul. Dar TypeScript nu vă permite să dați o matrice unei funcții care acceptă un șir ca intrare. Apoi, iată întrebarea: ar trebui să rescriem fișierul underscore.js în TypeScript și definiți tipurile acolo?

Desigur că nu – TypeScript oferă fișiere de declarație (* .d.ts) care definesc tipurile și standardizează un fișier / biblioteci JavaScript pentru TypeScript.

Unele biblioteci includ un fișier de tastare și nu este nevoie să instalați destinația de tip TypeScript pentru ele. Dar în cazul în care o bibliotecă nu are un .d.ts fișier, trebuie să îl instalați.

Trebuie doar să găsim și să importăm underscore.js fișier de definiție tip. Vă sugerez să utilizați Tastați Căutare pentru a găsi fișierul de declarație pentru bibliotecile de care aveți nevoie.

Caută underscore în Tastați Sceach și te redirecționează cătretipuri / subliniere. Instalați fișierul declarației folosind următoarea comandă:

npm install --save @types/underscore

4. Importați declarația de tip în aplicația Angular

Să presupunem că veți utiliza subliniere în app.component.ts fişier. Deschide app.component.ts după IDE și adăugați următorul cod în partea de sus a fișierului:

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

TypeScript din acea componentă înțelege acum _ și funcționează cu ușurință așa cum era de așteptat.

Întrebare: Cum se folosește o bibliotecă care nu are definiție de tip (* .d.ts) în TypeScript și Angular?

Creați-l dacă src/typings.d.ts nu exista. În caz contrar, deschideți-l și adăugați pachetul la acesta:

declare var 

În TypeScript, acum trebuie să îl importați cu numele dat:

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

Concluzie

Pentru a încheia, să facem un exemplu simplu pentru a vedea un exemplu de lucru _. Deschis app.component.ts iar în interiorul appComponent clasa scrie a constructor care returnează ultimul element al unui tablou folosind subliniere _.last() funcţie:

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

Dacă deschideți aplicația Angular acum, veți primi 5 în consolă, ceea ce înseamnă că am putea adăuga corect underscore în proiectul nostru și funcționează conform așteptărilor.

Puteți adăuga orice biblioteci JavaScript la proiectul dvs. urmând aceiași pași.


Puteți urmări pe mine pentru mai multe articole despre tehnologie și programare.