一、ReturnType<typeof createApp>

ReturnType<typeof createApp> 是一種類型安全的寫法，是 TypeScript 中的一個高級類型，它用于獲取函數 createApp 的返回類型。

實例：

import registerFocus from './focus' // 獲取焦點
import registerDebounce from './debounce' // 防抖
import registerModifyText from './modifyText' // 修改文本
import { createApp } from 'vue'; // ReturnType<typeof createApp> 是一種類型安全的寫法，是 TypeScript 中的一個高級類型，它用于獲取函數 createApp 的返回類型。export default function registerDirectives(app: ReturnType<typeof createApp>) {registerFocus(app)registerDebounce(app)registerModifyText(app)
}

二、HTMLElement

HTMLElement?是 TypeScript 和 JavaScript 中用來表示 HTML 文檔中任何元素的基本類型。它是 DOM（文檔對象模型）API 的一部分，提供了對 HTML 元素的標準屬性和方法的訪問。

如果你知道元素的具體類型（例如?<div>），可以使用更具體的類型，如?HTMLDivElement，這樣可以獲得更精確的類型提示和檢查。

實例：

// 獲取焦點
import { createApp } from 'vue';
export default function (app: ReturnType<typeof createApp>) {app.directive('focus', {mounted(el: HTMLElement) {console.log('focus mounted')el.focus()}})
}

三、DirectiveBinding

在 Vue.js 中，DirectiveBinding?是一個用于描述指令綁定值的類型。它提供了對指令綁定值的類型檢查和自動完成支持，特別是在 TypeScript 中。

DirectiveBinding?是一個接口，定義了指令綁定值的結構。它通常包含指令的參數、值、修飾符等信息。

當你在 Vue 中編寫自定義指令時，DirectiveBinding?類型可以用來聲明指令鉤子函數的參數類型，以便 TypeScript 可以提供類型檢查和智能提示。

實例：

// 防抖
import { createApp, DirectiveBinding  } from 'vue';
export default function (app: ReturnType<typeof createApp>) {app.directive('debounce', {mounted(el: HTMLElement, binding: DirectiveBinding) {let timer: numberel.addEventListener('click', () => {if (timer) {clearTimeout(timer)}timer = setTimeout(() => {binding.value()}, 1000) as unknown as number})}})
}

四、RouteRecordRaw

在 Vue Router 中，routes 的約束類型是 RouteRecordRaw。

實例：

import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';
import Home from '../views/Home.vue';
const routes: Array<RouteRecordRaw> = [{path: '/',name: 'Home',component: Home,},{path: '/about',name: 'About',component: () => import(/* webpackChunkName: "about" */ '../views/About.vue'),},
];
const router = createRouter({history: createWebHistory(process.env.BASE_URL),routes,
});
export default router;

自定義類型擴展：在實際項目開發中，可擴展 RouteRecordRaw 類型。

實例：

type RouteConfig = RouteRecordRaw & { hidden?: boolean };
const routes: Array<RouteConfig> = [{path: '/',name: 'Home',component: Home,hidden: true,meta: { permission: true, icon: '' },},
];

五、MouseEvent

MouseEvent 是 TypeScript 內置的 DOM 類型之一，表示鼠標交互產生的事件。在 Vue 3 中，當你處理 @click、@mousemove 等鼠標相關事件時，可以使用這個類型來標注事件參數

實例：

<template><button @click="handleClick">點擊我</button>
</template><script setup lang="ts">
const handleClick = (event: MouseEvent) => {console.log(event.clientX, event.clientY); // 鼠標點擊位置console.log(event.target); // 觸發事件的元素
};
</script>

六、歡迎交流指正