Поддержка TypeScript

mdui написан на TypeScript, поэтому обеспечивает хорошую поддержку TypeScript. Все официальные библиотеки mdui поставляются с файлами типов, которые можно использовать напрямую.

Типы экземпляров компонентов

Иногда вам может понадобиться привести переменную JavaScript к типу экземпляра компонента mdui. Для этого вы можете импортировать соответствующий тип компонента непосредственно из mdui.

Например, импорт типа Tooltip из файла компонента:

import type { Tooltip } from 'mdui/components/tooltip.js';

Или импорт типа Tooltip напрямую из mdui:

import type { Tooltip } from 'mdui';

Затем вы можете привести переменную JavaScript к типу Tooltip:

const tooltip = document.querySelector('mdui-tooltip') as Tooltip;

Теперь ваша IDE будет автоматически подсказывать свойства и методы переменной tooltip.

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

tooltip.addEventListener('open', function (event) {});

Типы событий

Каждый компонент экспортирует интерфейс, который отображает имена событий компонента и соответствующие им типы объектов событий. Имя интерфейса — ${имяКомпонента}EventMap.

Например, компонент Tooltip экспортирует интерфейс TooltipEventMap:

export interface TooltipEventMap {
  open: CustomEvent<void>;
  opened: CustomEvent<void>;
  close: CustomEvent<void>;
  closed: CustomEvent<void>;
}

Вы можете импортировать этот интерфейс из файла компонента:

import type { TooltipEventMap } from 'mdui/components/tooltip.js';

Или напрямую из mdui:

import type { TooltipEventMap } from 'mdui';

Обратите внимание, что этот интерфейс содержит только специфичные для компонента события, но компоненты mdui наследуются от HTMLElement, поэтому они также поддерживают события HTMLElement. Вы можете использовать пересечение типов (intersection type), чтобы получить все типы событий компонента:

type TooltipAndHTMLElementEventMap = TooltipEventMap & HTMLElementEventMap;