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

kak ispolzovat biblioteki javascript v prilozheniyah angular 2

Вы помните, когда изучали AngularJS (версия 1) и учебники постоянно говорили вам, что вам не нужно добавлять JQuery в свой проект?

Это не изменилось – вам не нужно добавлять JQuery в ваш проект Angular 2+. Но если по какой-либо причине вам может понадобиться использовать некоторые библиотеки JavaScript, вам нужно знать, как их использовать в Angular. Итак, начнём с нуля.

Я собираюсь добавить underscore.js проекта и показать вам, как это работает.

1. Создайте новый проект с помощью Angular CLI

Если на компьютере еще не установлен CLI, установите его. После установки создайте новый проект (если у вас его нет).

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

Теперь у вас будет новый проект Angular под названием «обучение”.

2. Установите пакет в свой проект

Перейдите к проекту, который мы только что создали:

CD обучение

Используйте желаемый менеджер пакетов для установки библиотеки, которую вы собираетесь использовать; я использую npm установить underscore.js.

npm install — сохранить подчеркивание

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 файл определения типа. Я предлагаю вам использовать поиск типа, чтобы найти файл декларации для нужных вам библиотек.

Искать 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 класс написать а 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 в свой проект, следуя тем же шагам.

Вы можете следить за мной для получения дополнительных статей о технологиях и программировании.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *