Soporte para TypeScript

mdui está desarrollado con TypeScript, por lo que ofrece un buen soporte para TypeScript. Todas las bibliotecas oficiales de mdui incluyen sus propios archivos de declaración de tipos y se pueden usar directamente.

Tipo de instancia de los componentes

A veces, es posible que necesites declarar una variable JavaScript como una instancia de un componente de mdui. Para ello, puedes importar directamente el tipo de componente correspondiente desde mdui.

Por ejemplo, para importar el tipo del componente Tooltip desde el archivo del componente:

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

O importar el tipo del componente Tooltip directamente desde mdui:

import type { Tooltip } from 'mdui';

Luego, puedes declarar una variable JavaScript como tipo Tooltip:

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

En ese momento, tu IDE sugerirá automáticamente las propiedades y métodos de la variable tooltip.

Si agregas un listener de eventos en la variable tooltip, también se sugerirán automáticamente el nombre del evento, el tipo de evento y la referencia de this dentro de la función callback:

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

Tipos de eventos

Cada componente exporta una interfaz que mapea los nombres de los eventos del componente y sus tipos de objeto de evento correspondientes. El nombre de la interfaz es ${nombreDelComponente}EventMap.

Por ejemplo, el componente Tooltip exporta una interfaz llamada TooltipEventMap:

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

Puedes importar esta interfaz desde el archivo del componente:

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

O importarla directamente desde mdui:

import type { TooltipEventMap } from 'mdui';

Ten en cuenta que esta interfaz solo contiene los eventos específicos del componente, pero los componentes de mdui heredan de HTMLElement, por lo que también admiten los eventos de HTMLElement. Puedes usar tipos de intersección para obtener todos los tipos de eventos del componente:

type TooltipAndHTMLElementEventMap = TooltipEventMap & HTMLElementEventMap;