Supporto TypeScript

mdui è sviluppato con TypeScript, offrendo un robusto supporto TypeScript. Tutte le librerie ufficiali mdui includono file di dichiarazione dei tipi per un uso immediato.

Tipi di Istanza del Componente

Occasionalmente, potresti aver bisogno di asserire una variabile JavaScript come istanza di un componente mdui. Puoi importare il tipo di componente corrispondente direttamente da mdui.

Ad esempio, per importare il tipo di componente Tooltip dal file del componente:

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

Oppure, importa il tipo di componente Tooltip direttamente da mdui:

import type { Tooltip } from 'mdui';

Quindi, puoi asserire una variabile JavaScript come tipo Tooltip:

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

Il tuo IDE suggerirà automaticamente le proprietà e i metodi della variabile tooltip.

Quando aggiungi un listener di eventi alla variabile tooltip, l'IDE suggerirà anche i nomi degli eventi, i tipi di evento e il contesto this nella funzione di callback:

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

Tipi di Evento

Ogni componente esporta un'interfaccia che mappa i nomi degli eventi del componente ai corrispondenti tipi di oggetto evento. L'interfaccia è denominata ${componentName}EventMap.

Ad esempio, il componente Tooltip esporta un'interfaccia chiamata TooltipEventMap:

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

Puoi importare l'interfaccia TooltipEventMap dal file del componente:

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

O direttamente da mdui:

import type { TooltipEventMap } from 'mdui';

Questa interfaccia include solo gli eventi specifici del componente. Poiché i componenti mdui ereditano da HTMLElement, supportano anche gli eventi HTMLElement. Usa i tipi di intersezione per ottenere tutti i tipi di evento per un componente:

type TooltipAndHTMLElementEventMap = TooltipEventMap & HTMLElementEventMap;