Заголовочные файлы для популярных библиотек¶
В прошлой теме было рассмотрено использование декларативных заголовочных файлов для внешнего кода на javascript. Однако, как правило, нам приходится взаимодействовать с крупными библиотеками, например, jquery, angularjs, extjs и так далее. Если мы хотим использовать функционал этих библиотек в коде на TS, то для них надо создать свои файлы определений.
И это может быть довольно утомительно в виду сложности библиотек и больших объемов кода. Но в сообществе TypeScript возникла идея создать общий репозиторий для подобных файлов, чтобы не надо было заново определять свои файлы, а можно бы было взять уже готовые. Этот репозиторий расположен на гитхабе: https://github.com/DefinitelyTyped/DefinitelyTyped/
Как использовать js-библиотеки и заголовочные файлы для них? Во-первых, создадим в проекте каталог Scripts
, который будет предназначен для хранения библиотек на javascript. Например, мы хотим использовать библиотеку jquery. На данный момент это версия jquery 3.3.1.
Создадим в проекте каталог @types
, а в нем - подкаталог jquery
. То есть в итоге проект будет выглядеть следующим образом:
В каталог @types/jquery
поместим заголовочный файл для jquery - index.d.ts
, который можно найти по адресу.
В корневой папке проекта определим следующую веб-страницу index.html
:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>TypeScript HTML App</title> </head> <body> <h1>TypeScript HTML App</h1> <div id="content"></div> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script src="app.js"></script> </body> </html>
Здесь только подключается библиотека jquery из cdn, а также файл нашего приложения - app.js
.
Далее в корневой папке проекта определим следующий файла app.ts
:
/// <reference path="@types/jquery/index.d.ts" /> $(document).ready(() => { $('#content').html('<h1>Привет мир</h1>') })
В данном случае мы задействуем событие document.ready
, которое определено в jquery и которое срабатывает при загрузке документа. И далее с помощью лямбда-выражения, которое определяет функцию обратного вызова, с помощью знакомого многим синтаксиса jquery на веб-страницу добавляется новый элемент.
Также мы могли бы использовать сокращенное определение функции:
$(() => { $('#content').html('<h1>Привет мир</h1>') })
В итоге при запуске веб-страницы index.html
сработает код из файла app.ts
:
Для примера еще обработаем событие нажатия кнопки. Допустим, в html-коде страницы есть такая кнопка:
<button id="alertBtn">Жми</button>
В коде на TS мы могли бы так обработать нажатия на эту кнопку:
$(() => { $("#alertBtn").click((e) => { \$("#content").html("<h2>Привет мир</h2>"); }); });
Обработчики событий, например, click
в качестве параметра также принимают лямбда-выражение, которое определяет набор инструкции, выполняемых при нажатии.