Podpora TypeScriptu

mdui je vyvíjeno v TypeScriptu, takže poskytuje dobrou podporu pro TypeScript. Všechny oficiální balíčky mdui obsahují deklarace typů a lze je používat přímo.

Typ instance komponenty

Někdy možná budete potřebovat přetypovat proměnnou z JavaScriptu na instanci komponenty mdui. V takovém případě můžete importovat odpovídající typ komponenty přímo z mdui.

Například import typu komponenty Tooltip ze souboru komponenty:

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

Nebo import typu komponenty Tooltip přímo z mdui:

import type { Tooltip } from 'mdui';

Poté můžete přetypovat proměnnou JavaScript na typ Tooltip:

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

Vaše IDE nyní bude automaticky nabízet vlastnosti a metody proměnné tooltip.

Pokud na proměnné tooltip přidáte posluchač události, bude také automaticky nabízen název události, typ události a to, na co odkazuje this v callback funkci:

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

Typ události

Každá komponenta exportuje rozhraní, které mapuje názvy událostí komponenty a odpovídající typy objektů událostí. Název rozhraní je ${ComponentName}EventMap.

Například komponenta Tooltip exportuje rozhraní s názvem TooltipEventMap:

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

Toto rozhraní můžete importovat ze souboru komponenty:

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

Nebo toto rozhraní importovat přímo z mdui:

import type { TooltipEventMap } from 'mdui';

Upozorňujeme, že toto rozhraní obsahuje pouze události specifické pro danou komponentu. Komponenty mdui však dědí z HTMLElement, takže podporují také události HTMLElement. Pomocí průnikového typu můžete získat všechny typy událostí komponenty:

type TooltipAndHTMLElementEventMap = TooltipEventMap & HTMLElementEventMap;