手机做网站对比路由器做网站,抖音代运营多少钱,买卖域名的网站,网站系统cms一、ReturnTypetypeof createApp
ReturnTypetypeof createApp 是一种类型安全的写法#xff0c;是 TypeScript 中的一个高级类型#xff0c;它用于获取函数 createApp 的返回类型。
实例#xff1a;
import registerFocus from ./focus // 获取焦点
impo…一、ReturnTypetypeof createApp
ReturnTypetypeof createApp 是一种类型安全的写法是 TypeScript 中的一个高级类型它用于获取函数 createApp 的返回类型。
实例
import registerFocus from ./focus // 获取焦点
import registerDebounce from ./debounce // 防抖
import registerModifyText from ./modifyText // 修改文本
import { createApp } from vue; // ReturnTypetypeof createApp 是一种类型安全的写法是 TypeScript 中的一个高级类型它用于获取函数 createApp 的返回类型。export default function registerDirectives(app: ReturnTypetypeof 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: ReturnTypetypeof 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: ReturnTypetypeof 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: ArrayRouteRecordRaw [{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: ArrayRouteConfig [{path: /,name: Home,component: Home,hidden: true,meta: { permission: true, icon: },},
];
五、MouseEvent
MouseEvent 是 TypeScript 内置的 DOM 类型之一表示鼠标交互产生的事件。在 Vue 3 中当你处理 click、mousemove 等鼠标相关事件时可以使用这个类型来标注事件参数
实例
templatebutton clickhandleClick点击我/button
/templatescript setup langts
const handleClick (event: MouseEvent) {console.log(event.clientX, event.clientY); // 鼠标点击位置console.log(event.target); // 触发事件的元素
};
/script
六、欢迎交流指正
