Prise en charge TypeScript

mdui est développé avec TypeScript et offre donc un excellent support TypeScript. Toutes les bibliothèques officielles mdui sont livrées avec leurs déclarations de types et peuvent être utilisées directement.

Type d'instance d'un composant

Parfois, vous pouvez avoir besoin de transtyper une variable JavaScript en une instance de composant mdui. Vous pouvez importer le type correspondant depuis mdui.

Par exemple, pour importer le type Infobulle depuis le fichier du composant :

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

Ou depuis mdui directement :

import type { Tooltip } from 'mdui';

Ensuite, vous pouvez transtyper une variable JavaScript en type Infobulle :

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

Votre IDE vous suggérera automatiquement les propriétés et méthodes de tooltip.

Si vous ajoutez un écouteur d'événement sur tooltip, les noms d'événements, leurs types, et la valeur de this dans la fonction de rappel seront également suggérés :

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

Types d'événements

Chaque composant exporte une interface qui fait correspondre ses noms d'événements aux types d'objets d'événement correspondants. Le nom de l'interface est ${NomComposant}EventMap.

Par exemple, le composant Infobulle exporte une interface TooltipEventMap :

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

Vous pouvez importer cette interface depuis le fichier du composant :

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

Ou directement depuis mdui :

import type { TooltipEventMap } from 'mdui';

Notez que cette interface ne contient que les événements spécifiques au composant. Les composants mdui héritent de HTMLElement, donc ils supportent aussi les événements HTMLElement. Vous pouvez utiliser un type d'intersection pour obtenir tous les types d'événements d'un composant :

type TooltipAndHTMLElementEventMap = TooltipEventMap & HTMLElementEventMap;