Импорт типов

Библиотека Tippy.js в первую очередь известна как инструмент для создания всплывающих подсказок (tooltips) и попов (popovers) в JavaScript, но при работе с TypeScript правильный импорт типов обеспечивает удобство автодополнения и строгую типизацию. Типизация помогает предотвращать ошибки на этапе разработки и улучшает читаемость кода.

Основные типы Tippy.js

При использовании TypeScript ключевыми типами являются:

Props — описывает все свойства, которые можно передавать при создании экземпляра Tippy.
Instance — тип, который представляет конкретный экземпляр всплывающей подсказки.
Plugins — типы плагинов, которые можно подключать к Tippy для расширения функционала.
Placement — строковые литералы, задающие положение подсказки относительно целевого элемента ("top" | "bottom" | "left" | "right" и их комбинации с -start или -end).

Пример базового импорта типов:

import tippy, { Instance, Props, Placement } from 'tippy.js';

Instance используется для хранения ссылки на конкретную подсказку и управления её состоянием.
Props позволяет корректно типизировать объект конфигурации при создании подсказки.
Placement обеспечивает строгую проверку допустимых значений позиции.

Типизация конфигурации подсказки

Объект конфигурации Tippy имеет множество опций, от простых (content, placement) до сложных (interactive, appendTo, delay). Тип Props позволяет TypeScript проверять эти свойства на этапе компиляции.

Пример типизированного объекта конфигурации:

const tooltipOptions: Props = {
  content: 'Пример подсказки',
  placement: 'top' as Placement,
  animation: 'shift-away',
  delay: [100, 200],
  interactive: true,
  trigger: 'mouseenter focus',
};

content — текст или элемент, который будет отображаться в подсказке.
placement — строгий тип, который предотвращает опечатки в позиционировании.
delay — можно указать одно число или массив [showDelay, hideDelay].
interactive — разрешает взаимодействие с содержимым подсказки, например, клик по кнопкам внутри.

Импорт типов для плагинов

Tippy.js поддерживает подключение плагинов (sticky, followCursor, animateFill и другие). Каждый плагин имеет свои типы конфигурации. Для корректной работы с TypeScript импорт типов плагинов выглядит следующим образом:

import tippy, { Instance, Props, Plugin } from 'tippy.js';
import { sticky } from 'tippy.js/plugins/sticky';

Тип Plugin позволяет создавать массив плагинов с проверкой типов:

const tooltipWithPlugins: Props = {
  content: 'Подсказка с плагином',
  placement: 'right',
  plugins: [sticky],
  sticky: true, // свойство, добавляемое плагином sticky
};

Тип `Instance` для управления подсказкой

После создания подсказки с помощью tippy() возвращается массив экземпляров Instance. Типизация экземпляра позволяет вызывать методы и получать доступ к состоянию:

const button = document.querySelector<HTMLButtonElement>('#myButton')!;
const instance: Instance = tippy(button, { content: 'Привет!' });

instance.show();
instance.hide();
instance.setContent('Новый текст');

show() и hide() управляют видимостью подсказки.
setContent(newContent: string | Element) динамически изменяет содержимое.
destroy() полностью удаляет подсказку и очищает DOM.

Модули и декларации типов

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

import tippy from 'tippy.js';
import 'tippy.js/dist/tippy.css'; // стили для корректного отображения

Если проект использует плагин, который не имеет встроенной типизации, можно определить собственный тип интерфейса, чтобы избежать ошибок компиляции:

interface MyPluginProps {
  myOption?: boolean;
}

const myPlugin: Plugin<MyPluginProps> = {
  name: 'myPlugin',
  defaultValue: { myOption: false },
  fn(instance) {
    // логика плагина
  },
};