Как да използвам JavaScript библиотеки в приложения Angular 2+

Спомняте ли си, когато учехте AngularJS (версия 1), и уроците непрекъснато ви казваха, че не е необходимо да добавяте JQuery във вашия проект?

Това не се е променило - не е нужно да добавяте JQuery към вашия проект Angular 2+. Но ако по някаква причина може да се наложи да използвате някои JavaScript библиотеки, трябва да знаете как да ги използвате в Angular. И така, нека започнем от нула.

Ще добавя underscore.js към проект и ще ви покажа как работи.

1. Създайте нов проект, използвайки Angular CLI

Ако все още нямате инсталиран CLI на вашата машина, инсталирайте го. След инсталацията създайте нов проект (ако все още нямате такъв).

ново обучение

Сега ще имате нов Angular проект, наречен „ обучение “.

2. Инсталирайте пакета във вашия проект

Отидете на проекта, който току-що направихме:

cd обучение

Използвайте предпочитания от вас мениджър на пакети, за да инсталирате библиотеката, която ще използвате; Използвам npmза инсталиране underscore.js.

npm install --save долна черта

3. Импортирайте библиотеката в Angular (TypeScript)

Пишем код на TypeScript и трябва да следваме неговите правила. TypeScript трябва да разбере underscore.js.

Както може би знаете, TypeScript е типизиран супер набор от JavaScript, който се компилира в обикновен JavaScript. TypeScript има собствен синтаксис, функцията и променливите могат да имат определени типове. Но когато ще използваме външна библиотека като долна черта, трябва да декларираме дефиниции на типа за TypeScript.

В JavaScript видът аргументи не е важен и няма да получите грешка, докато пишете код. Но TypeScript няма да ви позволи да дадете масив на функция, която приема низ като вход. Тогава тук е въпросът: трябва ли да пренапишем underscore.jsв TypeScript и да дефинираме типове там?

Разбира се, че не - TypeScript предоставя файлове за декларация (* .d.ts), които определят типовете и стандартизират JavaScript файл / библиотеки за TypeScript.

Някои библиотеки включват файл за въвеждане и не е необходимо да инсталирате местоназначението на TypeScript за тях. Но в случай, че библиотеката няма   .d.tsфайл, трябва да го инсталирате.

Просто трябва да намерим и импортираме underscore.jsфайл за дефиниция на типа. Предлагам ви да използвате Type Search, за да намерите файла за декларация за необходимите библиотеки.

Потърсете underscoreв Type Sceach и той ви пренасочва към типове / подчертавания. Инсталирайте файла за декларация, като използвате следната команда:

npm install --save @types/underscore

4. Импортирайте декларация за тип в приложението Angular

Да предположим, че ще използвате подчертаване във вашия app.component.tsфайл. Отворете app.component.tsот вашата IDE и добавете следния код в горната част на файла:

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

TypeScript в този компонент вече разбира _и той лесно работи според очакванията.

Въпрос: Как да използвам библиотека, която няма дефиниция на типа (* .d.ts) в TypeScript и Angular?

Създайте го, ако src/typings.d.tsне съществува. В противен случай го отворете и добавете пакета си към него:

declare var 

Сега във вашия TypeScript трябва да го импортирате с даденото име:

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

Заключение

За да завършим, нека направим прост пример, за да видим работещ пример за _. Отворете app.component.tsи вътре в appComponentкласа напишете a, constructorкойто връща последния елемент от масив, използвайки _.last()функцията за подчертаване :

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

Ако отворите приложението си Angular сега, ще влезете 5в конзолата, което означава, че можем правилно да добавим underscoreкъм нашия проект и той работи, както се очаква.

Можете да добавите всякакви библиотеки на JavaScript към вашия проект, като следвате същите стъпки.

Можете да ме следвате за още статии за технологиите и програмирането.