TypeScript Support
mdui is developed with TypeScript, offering robust TypeScript support. All official mdui libraries include type declaration files for immediate use.
Component Instance Types
Occasionally, you may need to assert a JavaScript variable as an mdui component instance. You can import the corresponding component type directly from mdui.
For example, to import the Tooltip component type from the component file:
import type { Tooltip } from 'mdui/components/tooltip.js';
Alternatively, import the Tooltip component type directly from mdui:
import type { Tooltip } from 'mdui';
Then, you can assert a JavaScript variable as the Tooltip type:
const tooltip = document.querySelector('mdui-tooltip') as Tooltip;
Your IDE will automatically suggest the properties and methods of the tooltip
variable.
When adding an event listener to the tooltip
variable, the IDE will also suggest event names, event types, and the this
context in the callback function:
tooltip.addEventListener('open', function(event) {
});
Event Types
Each component exports an interface mapping the component's event names to their corresponding event object types. The interface is named ${componentName}EventMap
.
For example, the Tooltip component exports an interface named TooltipEventMap
:
export interface TooltipEventMap {
open: CustomEvent<void>;
opened: CustomEvent<void>;
close: CustomEvent<void>;
closed: CustomEvent<void>;
}
You can import the TooltipEventMap
interface from the component file:
import type { TooltipEventMap } from 'mdui/components/tooltip.js';
Or directly from mdui:
import type { TooltipEventMap } from 'mdui';
This interface only includes component-specific events. Since mdui components inherit from HTMLElement
, they also support HTMLElement
events. Use intersection types to get all event types for a component:
type TooltipAndHTMLElementEventMap = TooltipEventMap & HTMLElementEventMap;