TypeScript サポート

mdui は TypeScript で開発されているため、TypeScript に対して優れたサポートを提供しています。すべての mdui 公式ライブラリには型定義ファイルが付属しており、そのまま使用できます。

コンポーネントのインスタンス型

場合によっては、JavaScript 変数を mdui のコンポーネントインスタンスとして型アサーションする必要があります。その場合は、mdui から対応するコンポーネントの型を直接インポートできます。

例えば、コンポーネントファイルからツールチップコンポーネントの型をインポートするには：

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

または、mdui から直接ツールチップコンポーネントの型をインポートするには：

import type { Tooltip } from 'mdui';

そして、JavaScript 変数をツールチップ型に型アサーションできます：

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

これにより、IDE は tooltip 変数のプロパティとメソッドを自動的に提案します。

tooltip 変数にイベントリスナーを追加すると、イベント名、イベントタイプ、およびコールバック関数内の this の参照先も自動的に提案されます：

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

イベント型

各コンポーネントは、コンポーネントのイベント名とそれに対応するイベントオブジェクトの型をマッピングするインターフェースをエクスポートします。インターフェース名は ${コンポーネント名}EventMap です。

例えば、ツールチップコンポーネントは 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 のイベントもサポートしています。交差型（intersection type）を使用して、コンポーネントのすべてのイベント型を取得できます：

type TooltipAndHTMLElementEventMap = TooltipEventMap & HTMLElementEventMap;