TypeScript Desteği

mdui, TypeScript ile geliştirilmiştir ve bu nedenle TypeScript'e iyi düzeyde destek sağlar. Tüm resmi mdui kütüphaneleri kendi tip bildirim dosyalarıyla birlikte gelir ve doğrudan kullanılabilir.

Bileşenlerin Örnek Türü

Bazen, bir JavaScript değişkenini bir mdui bileşen örneği olarak kullanmanız gerekebilir. Bu durumda, ilgili bileşen türünü doğrudan mdui'den import edebilirsiniz.

Örneğin, Tooltip bileşeninin türünü bileşen dosyasından import edin:

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

Veya Tooltip bileşeninin türünü doğrudan mdui'den import edin:

import type { Tooltip } from 'mdui';

Ardından, bir JavaScript değişkenini Tooltip türü olarak kullanabilirsiniz:

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

Bu noktada IDE'niz, tooltip değişkeninin özelliklerini ve yöntemlerini otomatik olarak önerecektir.

Eğer tooltip değişkenine bir olay dinleyicisi eklerseniz, olay adları, olay türleri ve geri çağırma fonksiyonundaki this işaretçisi de otomatik olarak önerilecektir:

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

Olay Türleri

Her bileşen, olay adlarını ve bunlara karşılık gelen olay nesnesi türlerini eşleyen bir arayüz dışa aktarır. Arayüz adı ${bileşenAdı}EventMap şeklindedir.

Örneğin, Tooltip bileşeni TooltipEventMap adında bir arayüz dışa aktarır:

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

Bu arayüzü bileşen dosyasından import edebilirsiniz:

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

Veya bu arayüzü doğrudan mdui'den import edebilirsiniz:

import type { TooltipEventMap } from 'mdui';

Bu arayüzün yalnızca bileşene özel olayları içerdiğini, ancak mdui bileşenlerinin HTMLElement'ten miras aldığını ve bu nedenle HTMLElement olaylarını da desteklediğini unutmayın. Bir bileşenin tüm olay türlerini almak için kesişim türünü kullanabilirsiniz:

type TooltipAndHTMLElementEventMap = TooltipEventMap & HTMLElementEventMap;