TypeScript 支援

mdui 是用 TypeScript 開發的，因此對 TypeScript 提供了良好的支援。所有的 mdui 官方庫都自帶型別宣告檔案，可以直接使用。

元件的實例型別

有時，你可能需要將一個 JavaScript 變數斷言為 mdui 的元件實例，這時你可以直接從 mdui 引入對應的元件型別。

例如，從元件檔案中引入 Tooltip 元件的型別：

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

或者直接從 mdui 引入 Tooltip 元件的型別：

import type { Tooltip } from 'mdui';

然後，你就可以將一個 JavaScript 變數斷言成 Tooltip 型別：

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

此時，IDE 會自動提示 tooltip 變數的屬性和方法。

如果在 tooltip 變數上新增事件監聽，也會自動提示事件名稱、事件型別，以及回呼函式中 this 的指向：

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

事件型別

每個元件都會匯出一個介面，對應元件的事件名稱和事件物件型別，介面名為 ${元件名}EventMap。

例如，Tooltip 元件會匯出一個名為 TooltipEventMap 的介面：

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

你可以從元件檔案中引入該介面：

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

或者直接從 mdui 引入該介面：

import type { TooltipEventMap } from 'mdui';

請注意，該介面只包含元件特有的事件，但 mdui 元件都繼承自 HTMLElement，所以也支援 HTMLElement 的事件，你可以使用交集型別來取得元件的所有事件型別：

type TooltipAndHTMLElementEventMap = TooltipEventMap & HTMLElementEventMap;