Настройка TypeScript окружения

Для интеграции Tippy.js в проект на TypeScript необходимо корректно настроить окружение, чтобы обеспечить строгую типизацию и автодополнение при работе с библиотекой.

Инициализация проекта

  1. Создание проекта:
mkdir tippy-typescript
cd tippy-typescript
npm init -y

Это создаёт базовый package.json для управления зависимостями.

  1. Установка TypeScript и необходимых инструментов:
npm install typescript ts-node @types/node --save-dev
  • typescript — компилятор TS.
  • ts-node — запуск TypeScript файлов напрямую.
  • @types/node — типы для Node.js.
  1. Инициализация конфигурации TypeScript:
npx tsc --init

Файл tsconfig.json содержит основные настройки компиляции TypeScript. Рекомендуется включить строгую проверку типов:

{
  "compilerOptions": {
    "target": "ES6",
    "module": "ESNext",
    "strict": true,
    "moduleResolution": "node",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "skipLibCheck": true
  }
}

Установка Tippy.js и типов

  1. Установка самой библиотеки:
npm install tippy.js
  1. Установка типизаций:
npm install @types/tippy.js --save-dev

Типы позволяют использовать автокомплит и проверку параметров в редакторе, обеспечивая безопасную интеграцию Tippy.js с TypeScript.

Импорт и использование Tippy.js в TypeScript

Для работы с Tippy.js в TS можно использовать стандартный модульный импорт:

import tippy, { Instance, Props } from 'tippy.js';
import 'tippy.js/dist/tippy.css';
  • tippy — основной конструктор тултипов.
  • Instance — интерфейс экземпляра тултипа.
  • Props — интерфейс параметров конфигурации.

Пример создания простого тултипа:

const button = document.querySelector<HTMLButtonElement>('#myButton');

if (button) {
  const tooltip: Instance<Props> = tippy(button, {
    content: 'Привет, Tippy.js!',
    placement: 'top',
    animation: 'scale',
  });
}

Здесь Instance<Props> гарантирует, что конфигурация соответствует типам Tippy.js.

Настройка типов для кастомных расширений

TypeScript позволяет расширять стандартные типы Tippy.js для собственных плагинов или нестандартных опций:

interface CustomTippyProps extends Props {
  delayShow?: number; // кастомная опция
}

const customTooltip: Instance<CustomTippyProps> = tippy(button!, {
  content: 'Кастомный тултип',
  delayShow: 200,
});

Такой подход предотвращает ошибки при передаче новых параметров.

Интеграция с модульными сборщиками

При использовании Webpack, Vite или Parcel рекомендуется:

  1. Установить соответствующий загрузчик для TypeScript (ts-loader для Webpack, встроенный TS-плагин для Vite).
  2. Включить в tsconfig.json:
"module": "ESNext",
"moduleResolution": "node",
"esModuleInterop": true
  1. Импорт CSS Tippy.js через:
import 'tippy.js/dist/tippy.css';

Работа с динамическими элементами

TypeScript обеспечивает строгую проверку типов при динамическом создании тултипов:

document.querySelectorAll<HTMLButtonElement>('.tooltip-btn').forEach(btn => {
  tippy(btn, {
    content: btn.dataset.tooltip ?? 'Default tooltip',
    placement: 'bottom',
  });
});

Использование дженериков <HTMLButtonElement> гарантирует, что элементы соответствуют ожидаемому типу.

Рекомендации по строгой типизации

  • Всегда указывать тип элементов DOM (HTMLButtonElement, HTMLDivElement).
  • Использовать интерфейсы для кастомных свойств тултипов.
  • Применять strict режим компилятора для предотвращения ошибок в рантайме.
  • Обновлять типы Tippy.js вместе с библиотекой, чтобы не возникало конфликтов.

Подключение плагинов Tippy.js в TypeScript

Tippy.js поддерживает плагины, например followCursor:

import tippy, { followCursor } from 'tippy.js';

tippy(button!, {
  content: 'Следующий курсор!',
  plugins: [followCursor],
  followCursor: true,
});

Типизация гарантирует, что plugins принимает только валидные плагины, а параметры followCursor корректны.

Автодополнение и проверка параметров

TypeScript вместе с @types/tippy.js позволяет использовать автодополнение всех параметров:

  • placement: ‘top’ | ‘bottom’ | ‘left’ | ‘right’
  • animation: ‘shift-away’ | ‘scale’ | ‘fade’
  • delay: number | [number, number]
  • interactive: boolean

Это уменьшает вероятность ошибок конфигурации и ускоряет разработку.

Наличие строгой типизации, автодополнения и интерфейсов делает работу с Tippy.js в TypeScript безопасной и предсказуемой, особенно в больших проектах с множеством тултипов и динамических элементов.

Оглавление