Suporte a TypeScript

O mdui é desenvolvido em TypeScript, portanto, oferece bom suporte ao TypeScript. Todas as bibliotecas oficiais do mdui vêm com arquivos de declaração de tipos e podem ser usadas diretamente.

Tipo de instância do componente

Às vezes, você pode precisar afirmar que uma variável JavaScript é uma instância de componente do mdui. Assim, você pode importar diretamente o tipo de componente correspondente do mdui.

Por exemplo, importar o tipo do componente Tooltip do arquivo do componente:

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

Ou importar o tipo do componente Tooltip diretamente do mdui:

import type { Tooltip } from 'mdui';

Em seguida, você pode afirmar que uma variável JavaScript é do tipo Tooltip:

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

Neste ponto, seu IDE automaticamente fornecerá dicas sobre as propriedades e métodos da variável tooltip.

Se você adicionar um ouvinte de evento na variável tooltip, também será automaticamente sugerido o nome do evento, o tipo do evento e o apontamento de this na função de retorno:

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

Tipo de evento

Cada componente exporta uma interface que mapeia os nomes de eventos do componente e seus respectivos tipos de objeto de evento. O nome da interface é ${nomeComponente}EventMap.

Por exemplo, o componente Tooltip exporta uma interface chamada TooltipEventMap:

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

Você pode importar esta interface do arquivo do componente:

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

Ou importá-la diretamente do mdui:

import type { TooltipEventMap } from 'mdui';

Observe que esta interface contém apenas eventos específicos do componente. No entanto, os componentes do mdui herdam de HTMLElement, portanto, também suportam eventos de HTMLElement. Você pode usar um tipo de interseção para obter todos os tipos de eventos do componente:

type TooltipAndHTMLElementEventMap = TooltipEventMap & HTMLElementEventMap;