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;
本页目录