TypeScript 中 Vue 3 的?defineEmits?函數的類型定義，用于聲明組件可以觸發的事件。以下是分步解釋：

1.?泛型定義

ts

<"closeDialog" | "getApplySampleAndItemX">

• 作用：定義允許的事件名稱集合，即組件只能觸發?closeDialog?或?getApplySampleAndItemX?兩個事件。

• 說明：這是一個泛型參數，限定事件名必須為這兩個字符串字面量類型之一。

---

2.?函數參數

ts

(emitOptions: ("closeDialog" | "getApplySampleAndItemX")[])

• 作用：接受一個事件名數組作為參數（如?['closeDialog']）。

• 說明：emitOptions?是事件名的數組，用于運行時聲明組件支持的事件。

---

3.?返回值函數

ts

(event: "closeDialog" | "getApplySampleAndItemX", ...args: any[]) => void

• 作用：返回一個?emit?函數，用于觸發事件。

  • event：要觸發的事件名，必須是泛型定義中的事件。

  • ...args：事件的參數（類型寬松，允許任意參數）。

• 說明：調用?emit('closeDialog')?或?emit('getApplySampleAndItemX', arg1, arg2)?時，參數類型不會被嚴格約束（因?args?是?any[]）。

---

4.?重載（+2 overloads）

• 作用：提供多種類型定義，以適應不同使用場景。

  • 場景一：運行時聲明（傳入事件名數組，參數寬松）。

    ts

    defineEmits(['closeDialog'])

  • 場景二：類型聲明（通過接口定義事件參數類型，類型嚴格）。

    ts

    defineEmits<{(e: 'closeDialog'): void;(e: 'getApplySampleAndItemX', sample: string, item: number): void;
    }>()

  • 場景三：可能其他配置方式（如混合使用或額外選項）。

---

總結

• 用途：在 Vue 組件中定義可觸發的事件。

• 兩種用法：

  1. 運行時聲明：傳入字符串數組，參數類型寬松。

  2. 類型聲明：通過接口定義事件及參數類型，實現嚴格類型檢查。

• 代碼中的類型：對應運行時聲明，允許任意參數（any[]），而重載覆蓋了類型聲明等場景，提供更靈活的類型支持。

示例

typescript

// 運行時聲明（參數寬松）
const emit = defineEmits(['closeDialog', 'getApplySampleAndItemX']);
emit('closeDialog'); // 正確
emit('getApplySampleAndItemX', 123, 'abc'); // 參數類型不檢查// 類型聲明（參數嚴格）
const emitStrict = defineEmits<{(e: 'closeDialog'): void;(e: 'getApplySampleAndItemX', sample: string, item: number): void;
}>();
emitStrict('getApplySampleAndItemX', 'sample', 123); // 參數類型匹配
emitStrict('getApplySampleAndItemX', 123, 'sample'); // 錯誤：參數類型不匹配

通過重載，defineEmits?能同時支持靈活和嚴格的類型檢查，適應不同開發需求。