TypeScript 지원

mdui는 TypeScript로 개발되었으므로 TypeScript를 잘 지원합니다. 모든 mdui 공식 라이브러리는 타입 선언 파일을 자체 포함하고 있으므로 바로 사용합니다.

컴포넌트의 인스턴스 타입

때로는 JavaScript 변수를 mdui 컴포넌트 인스턴스로 단언(assert)해야 할 수 있습니다. 이 경우 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;