Wsparcie TypeScript

mdui jest napisane w TypeScript, więc oferuje pełne wsparcie typów. Wszystkie oficjalne biblioteki mdui zawierają pliki deklaracji typów i mogą być używane bezpośrednio.

Typy instancji komponentów

Czasami może być konieczne rzutowanie zmiennej JavaScript na instancję komponentu mdui. Możesz wtedy zaimportować odpowiedni typ komponentu bezpośrednio z mdui.

Na przykład, aby zaimportować typ komponentu Tooltip z pliku komponentu:

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

Lub bezpośrednio z mdui:

import type { Tooltip } from 'mdui';

Następnie możesz rzutować zmienną JavaScript na typ Tooltip:

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

Wtedy Twoje IDE będzie wyświetlać autouzupełnienie dla właściwości i metody zmiennej tooltip.

Jeśli dodasz nasłuchiwanie zdarzeń na zmiennej tooltip, IDE będzie również podpowiadać nazwy zdarzeń, typy zdarzeń i wskazywanie this w funkcji zwrotnej:

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

Typy zdarzeń

Każdy komponent eksportuje interfejs odwzorowujący nazwy zdarzeń i odpowiadające im obiekty zdarzeń. Interfejs nazywa się ${ComponentName}EventMap.

Na przykład komponent Tooltip eksportuje interfejs TooltipEventMap:

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

Możesz zaimportować ten interfejs z pliku komponentu:

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

Lub bezpośrednio z mdui:

import type { TooltipEventMap } from 'mdui';

Należy pamiętać, że interfejs ten zawiera tylko zdarzenia specyficzne dla komponentu. Komponenty mdui dziedziczą po HTMLElement, więc obsługują także zdarzenia HTMLElement. Aby uzyskać wszystkie typy zdarzeń komponentu, możesz użyć typu przecięcia (intersection):

type TooltipAndHTMLElementEventMap = TooltipEventMap & HTMLElementEventMap;