В прошлой теме было рассмотрено использование декларативных заголовочных файлов для внешнего кода на javascript. Однако, как правило, нам приходится взаимодействовать с крупными библиотеками, например, jquery, angularjs, extjs и так далее. Если мы хотим использовать функционал этих библиотек в коде на TS, то для них надо создать свои файлы определений. И это может быть довольно утомительно в виду сложности библиотек и больших объемов кода. Но в сообществе TypeScript возникла идея создать общий репозиторий для подобных файлов, чтобы не надо было заново определять свои файлы, а можно бы было взять уже готовые. Этот репозиторий расположен на гитхабе: https://github.com/DefinitelyTyped/DefinitelyTyped/
Как использовать js-библиотеки и заголовочные файлы для них? Рассмотрим на примере библиотеки jquery.
Вначале загрузим определения типов для библиотеки jquery с помощью следующей команды:
npm install --save-dev @types/jquery
В итоге в проекте будет создана папка node_modules/@types, в которой каталог jquery будет хранить заголовочные файлы для библиотеки jquery.
Кроме того, в проекте будет создан файл package.json со следующим содержимым:
{ "devDependencies": { "@types/jquery": "^3.5.5" } }
Здесь мы видим, что текущие определения для jquery работают с версией 3.5.5 и выше.
Теперь нам надо указать компилятору TypeScript с помощью параметра typeRoots, где находятся заголовочные файлы - а это каталог node_modules/@types. Для этого в проекте определим следующий файл конфигурации tsconfig.json:
{ "compilerOptions": { "noImplicitAny": true, "noEmitOnError": true, "strictNullChecks": true, "outFile": "app.js", "typeRoots": [ "node_modules/@types" ], } }
Далее в корневой папке проекта определим следующую веб-страницу index.html:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Metanit.com</title> </head> <body> <div id="content"></div> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="app.js"></script> </body> </html>
Здесь только подключается библиотека jquery из cdn, а также файл нашего приложения - app.js.
Далее в корневой папке проекта определим следующий файла app.ts:
$(document).ready(() => { $("#content").html("<h1>Привет TypeScript</h1>"); });
В данном случае мы задействуем событие document.ready
, которое определено в jquery и которое срабатывает при загрузке документа.
И далее с помощью лямбда-выражения, которое определяет функцию обратного вызова, с помощью знакомого многим синтаксиса jquery на веб-страницу добавляется новый элемент.
Также мы могли бы использовать сокращенное определение функции:
$(() => { $("#content").html("<h1>Привет TypeScript</h1>"); });
То есть в итоге проект будет выглядеть следующим образом:
Теперь скомпилируем файл приложения с помощью команды
tsc
В итоге при запуске веб-страницы index.html сработает код из файла app.ts:
Для примера еще обработаем событие нажатия кнопки. Допустим, в html-коде страницы есть такая кнопка:
<button id="alertBtn">Жми</button>
В коде на TS мы могли бы так обработать нажатия на эту кнопку:
$(() => { $("#alertBtn").click((e) => { $("#content").html("<h2>Привет мир</h2>"); }); });
Обработчики событий, например, click
в качестве параметра также принимают лямбда-выражение, которое определяет
набор инструкции, выполняемых при нажатии.