当前位置：首页 > news >正文

Vue3 + Typescript：类型使用记录 / 类型注解 / 积累

news 2025/8/9 9:56:00

一、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>