TypeScript-Unterstützung

mdui ist mit TypeScript entwickelt und bietet daher eine gute Unterstützung für TypeScript. Alle offiziellen mdui-Bibliotheken enthalten Typdeklarationsdateien und können direkt verwendet werden.

Instanztyp der Komponente

Manchmal müssen Sie möglicherweise eine JavaScript-Variable als Instanz einer mdui-Komponente typisieren. In diesem Fall können Sie den entsprechenden Komponententyp direkt aus mdui importieren.

Importieren Sie beispielsweise den Typ der Tooltip-Komponente aus der Komponentendatei:

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

Oder importieren Sie den Typ der Tooltip-Komponente direkt aus mdui:

import type { Tooltip } from 'mdui';

Dann können Sie eine JavaScript-Variable als Typ Tooltip typisieren:

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

Ihre IDE zeigt Ihnen nun automatisch die Eigenschaften und Methoden der tooltip-Variable an.

Wenn Sie der tooltip-Variable einen Ereignis-Listener hinzufügen, werden Ihnen auch automatisch die Ereignisnamen, Ereignistypen und der this-Kontext innerhalb der Callback-Funktion angezeigt:

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

Ereignistypen

Jede Komponente exportiert ein Interface, das die Ereignisnamen der Komponente und die entsprechenden Ereignisobjekttypen abbildet. Das Interface heißt ${Komponentenname}EventMap.

Die Tooltip-Komponente exportiert beispielsweise ein Interface namens TooltipEventMap:

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

Sie können dieses Interface aus der Komponentendatei importieren:

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

Oder importieren Sie dieses Interface direkt aus mdui:

import type { TooltipEventMap } from 'mdui';

Bitte beachten Sie, dass dieses Interface nur die komponentenspezifischen Ereignisse enthält. Da mdui-Komponenten jedoch von HTMLElement erben, unterstützen sie auch die Ereignisse von HTMLElement. Sie können einen Schnittmengentyp verwenden, um alle Ereignistypen der Komponente zu erhalten:

type TooltipAndHTMLElementEventMap = TooltipEventMap & HTMLElementEventMap;