Як користуватися бібліотеками 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файл визначення типу. Я пропоную вам використовувати Search Type, щоб знайти файл декларації для потрібних вам бібліотек.

Шукайте underscoreв Type Sceach, і він переспрямовує вас на типи / підкреслення. Встановіть файл декларації, використовуючи таку команду:

npm install --save @types/underscore

4. Імпортуйте декларацію типу в програму Angular

Скажімо, ви збираєтеся використовувати підкреслення у своєму app.component.tsфайлі. Відкрийте app.component.tsIDE і додайте наступний код у верхній частині файлу:

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 до свого проекту, виконуючи ті самі дії.

Ви можете піти за мною, щоб отримати більше статей про технології та програмування.