Заголовочные файлы для популярных библиотек

Последнее обновление: 20.05.2021

В прошлой теме было рассмотрено использование декларативных заголовочных файлов для внешнего кода на 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>");
});

То есть в итоге проект будет выглядеть следующим образом:

Подключение jquery в TypeScript

Теперь скомпилируем файл приложения с помощью команды

tsc
компиляция jquery в typescript

В итоге при запуске веб-страницы index.html сработает код из файла app.ts:

Jquery and TypeScript

Для примера еще обработаем событие нажатия кнопки. Допустим, в html-коде страницы есть такая кнопка:

<button id="alertBtn">Жми</button>

В коде на TS мы могли бы так обработать нажатия на эту кнопку:

$(() => {
    $("#alertBtn").click((e) => { $("#content").html("<h2>Привет мир</h2>"); });
});

Обработчики событий, например, click в качестве параметра также принимают лямбда-выражение, которое определяет набор инструкции, выполняемых при нажатии.

Помощь сайту
Юмани:
410011174743222
Перевод на карту
Номер карты:
4048415020898850