TypeScript-támogatás

Az mdui-t TypeScript-ben fejlesztették, ezért jó támogatást nyújt a TypeScript számára. Az összes hivatalos mdui könyvtár tartalmazza a típusdeklarációs fájlokat, így közvetlenül használhatók.

Komponensek példány típusa

Néha előfordulhat, hogy egy JavaScript változót mdui komponens példányként kell megadnia. Ilyenkor közvetlenül az mdui-ból importálhatja a megfelelő komponens típust.

Például a Tooltip komponens típusának importálása a komponens fájljából:

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

Vagy közvetlenül az mdui-ból:

import type { Tooltip } from 'mdui';

Ezután egy JavaScript változót Tooltip típusúként adhat meg:

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

Ekkor az IDE automatikusan javasolja a tooltip változó tulajdonságait és metódusait.

Ha eseményfigyelőt ad hozzá a tooltip változóhoz, az IDE automatikusan javasolja az eseményneveket, eseménytípusokat és a visszahívási függvényben a this irányát:

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

Esemény típusok

Minden komponens exportál egy interfészt, amely leképezi a komponens eseményneveit és a hozzájuk tartozó eseményobjektum típusokat. Az interfész neve ${komponensNév}EventMap.

Például a Tooltip komponens exportál egy TooltipEventMap nevű interfészt:

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

Ezt az interfészt importálhatja a komponens fájljából:

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

Vagy közvetlenül az mdui-ból:

import type { TooltipEventMap } from 'mdui';

Vegye figyelembe, hogy ez az interfész csak a komponensspecifikus eseményeket tartalmazza, de az mdui komponensek öröklődnek a HTMLElement-ből, így támogatják a HTMLElement eseményeit is. A metszettípus segítségével lekérheti a komponens összes eseménytípusát:

type TooltipAndHTMLElementEventMap = TooltipEventMap & HTMLElementEventMap;