Автор оригинала: Mohammad Kermani.
Вы помните, когда вы изучали Angularjs (версию 1), и учебники продолжали рассказывать вам, что вам не нужно добавлять jQuery в ваш проект?
Это не изменилось – вам не нужно добавлять jQuery в ваш угловой 2+ проекта. Но если по какой-либо причине вам может потребоваться использовать некоторые библиотеки JavaScript, вам нужно знать, как использовать их в угловом углу. Итак, давайте начнем с нуля.
Я собираюсь добавить underscore.js к проекту и показать вам, как это работает.
1. Создайте новый проект, используя угловые CLI
Если у вас еще нет CLI установлено на вашем компьютере, Установите это Отказ После установки создайте новый проект (если у вас его еще нет).
NG Новое обучение
Теперь у вас будет новый угловой проект « Обучение ».
2. Установите пакет в свой проект
Перейти к проекту, которую мы только что сделали:
CD обучение
Используйте свой предпочтительный менеджер пакетов для установки библиотеки, которую вы собираетесь использовать; Я использую NPM Чтобы установить underscore.js Отказ
NPM установить –save. подчеркивать
3. Импортируйте библиотеку в угловую (Tymdercript)
Мы записываем код в Teadescript, и мы должны следовать его правилам. Teadercript должен понимать underscore.js Отказ
Как вы можете знать, TypeScript – это напечатанное суперсетом JavaScript, который компилирует на простой JavaScript. Teadercript имеет свой собственный синтаксис, функцию и переменные могут иметь определенные типы. Но когда мы собираемся использовать внешнюю библиотеку, такую как подчеркивание, нам нужно объявить определения типа для TypeScript.
В JavaScript тип аргументов не важен, и вы не получите ошибку во время записи кода. Но Typeyctry не позволит вам дать массив на функцию, которая принимает строку в качестве ввода. Тогда вот вопрос: мы должны переписать underscore.js в типографии и определить типы там?
Конечно, нет – Typeycript предоставляет декларационные файлы (* .d.ts) которые определяют типы и стандартизируют файл/библиотеки JavaScript для TypeyctScript.
Некоторые библиотеки включают в себя файл ввода, и вам не нужно для их назначения типа TypeyScript для них. Но в случае, если библиотека не имеет .dts Файл, вам нужно установить его.
Нам просто нужно найти и импортировать underscore.js Тип определения файла. Я предлагаю вам использовать Тип поиска Чтобы найти файл декларации для библиотек, которые вам нужны.
Поиск подчеркивание в Тип Sceach И это перенаправляет вас на Типы/подчеркивают Отказ Установите файл декларации, используя следующую команду:
NPM установить –save. @ Типы/подчеркивание
4. Декларация типа импорта в угловое приложение
Допустим, вы собираетесь использовать подчеркивание в вашем app.component.ts файл. Открыть app.component.ts По вашему IDE и добавьте следующий код в верхней части файла:
import * as _ from 'underscore';/*** OR simply:* import 'underscore';*/
Teadercript в этом компонент теперь понимает _ И это легко работает, как ожидалось.
Вопрос: Как использовать библиотеку, которая не имеет определения типа (* .d.ts) в типографии и угловой?
Создайте его, если SRC/Typings.d.ts не существует. В противном случае откройте его и добавьте свой пакет к нему:
declare var
В вашем TypeScript теперь вам нужно импортировать его по имени:
import * as yourPreferedName from 'yourLibrary';yourPreferedName.method();
Заключение
Чтобы завернуть, давайте сделаем простой пример, чтобы увидеть рабочий пример _ Отказ Открыть app.component.ts и внутри AppComponent Класс Написать A Конструктор который возвращает последний пункт массива, используя подчеркивание _.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
}
}
Если вы открываете свое угловое приложение сейчас, вы получите 5 в консоли, что означает, что мы могли правильно добавить подчеркивание в наш проект И это работает как ожидалось.
Вы можете добавить какие-либо библиотеки JavaScript в ваш проект, только следуя тем же этапам.
Вы можете следовать я Для получения дополнительных статей о технологиях и программировании.
Оригинал: “https://www.freecodecamp.org/news/how-to-use-javascript-libraries-in-angular-2-apps/”