1.说明
本章主要给目录下types文件夹的代码加上注释，可以直接拷贝源码。注释看看就行。
2.config.d.ts
types\config.d.ts
import { MenuTypeEnum, MenuModeEnum, TriggerEnum, MixSidebarTriggerEnum } from '/@/enums/menuEnum';
import {
ContentEnum,
PermissionModeEnum,
ThemeEnum,
RouterTransitionEnum,
SettingButtonPositionEnum,
} from '/@/enums/appEnum';
import { CacheTypeEnum } from '/@/enums/cacheEnum';
import { ThemeMode } from '../build/config/themeConfig';
export type LocaleType = 'zh_CN' | 'en' | 'ru' | 'ja' | 'ko';
export interface MenuSetting {
// 菜单背景颜色
bgColor: string;
// 菜单是否跟随内容滚动
fixed: boolean;
// 是否折叠菜单
collapsed: boolean;
// 侧边菜单拖拽
// (左侧菜单混合模式、固定展开菜单、菜单背景为白色的情况下，
// 打开子菜单，有一个class="vben-layout-mix-sider-drag-bar"的元素，
// 该元素就是一个背景色div)，该变量修改它的display
canDrag: boolean;
// 是否展示左侧菜单
show: boolean;
// 是否隐藏左侧菜单
hidden: boolean;
// 是否分割菜单（顶部菜单混合模式，开启分割菜单，父级菜单将在顶部，子菜单在侧边）
split: boolean;
// 菜单宽度
menuWidth: number;
// 手机情况下为INLINE、设置和使用的地方都很模糊、设置的时候菜单的4中模式，
// 附带的设置了，使用的时候，很多时候要配合其他属性一起使用Layout/Menu中有一个属性接收它
mode: MenuModeEnum;
// 菜单的4种类型
type: MenuTypeEnum;
// 菜单的主题，由菜单的背景色决定
theme: ThemeEnum;
// 菜单在顶部的时候的对齐方式
topMenuAlign: 'start' | 'center' | 'end';
// 折叠菜单的按钮位置
trigger: TriggerEnum;
// 侧边菜单手风琴模式，即是否一次只展开一个
accordion: boolean;
// 切换页面关闭菜单，暂时不太清楚这是干什么的
closeMixSidebarOnChange: boolean;
// 折叠菜单显示名称
collapsedShowTitle: boolean;
// 混合菜单触发方式
mixSideTrigger: MixSidebarTriggerEnum;
// 固定展开菜单
mixSideFixed: boolean;
}
export interface MultiTabsSetting {
// 是否展示标签页
show: boolean;
// 标签页快捷按钮
showQuick: boolean;
// 是否可拖拽
canDrag: boolean;
// 标签页刷新按钮
showRedo: boolean;
// 标签页折叠按钮，就是那个全窗口按钮
showFold: boolean;
}
export interface HeaderSetting {
// 头部背景颜色
bgColor: string;
// 是否头部固定不滚动
fixed: boolean;
// 是否展示头部
show: boolean;
// 头部主题，由头部背景颜色决定，是接近白色就是light，接近黑色就是dark
theme: ThemeEnum;
// Turn on full screen
// 是否展示头部进入全屏按钮
showFullScreen: boolean;
// Whether to show the lock screen
// 是否显示锁屏，没使用，应该是锁屏按钮的
useLockPage: boolean;
// Show document button
// 是否展示文档按钮
showDoc: boolean;
// Show message center button
// 是否展示消息中心按钮
showNotice: boolean;
// 是否展示搜索
showSearch: boolean;
}
export interface LocaleSetting {
// 是否展示语言切换
showPicker: boolean;
// Current language
// 当前语言
locale: LocaleType;
// default language
// 语言找不到时，默认的语言
fallback: LocaleType;
// available Locales
// 可用的语言
availableLocales: LocaleType[];
}
export interface TransitionSetting {
// Whether to open the page switching animation
// 切换动画
enable: boolean;
// Route basic switching animation
// 动画类型
basicTransition: RouterTransitionEnum;
// Whether to open page switching loading
// 切换loading
openPageLoading: boolean;
// Whether to open the top progress bar
// 顶部进度条
openNProgress: boolean;
}
export interface ProjectConfig {
// Storage location of permission related information
// 权限相关信息的存储位置
permissionCacheType: CacheTypeEnum;
// Whether to show the configuration button
// 是否展示布局设置按钮
showSettingButton: boolean;
// Configure where the button is displayed
// 布局设置按钮的位置
settingButtonPosition: SettingButtonPositionEnum;
// Permission mode
// 权限模式
permissionMode: PermissionModeEnum;
// Website gray mode, open for possible mourning dates
// 网站灰色模式，为可能的哀悼日期开放。
grayMode: boolean;
// Whether to turn on the color weak mode
// 是否开启弱色模式
colorWeak: boolean;
// Theme color
// 主题颜色
themeColor: string;
// 主题
themeMode: ThemeMode;
// The main interface is displayed in full screen, the menu is not displayed, and the top
// 主界面全屏显示，不显示菜单，顶部的 "主题模式 "也不显示。
fullContent: boolean;
// content width
// 内容宽度：流式（满屏），定宽（960px居中）
contentMode: ContentEnum;
// Whether to display the logo
// 是否显示Logo
showLogo: boolean;
// Whether to show the global footer
// 是否显示全局页脚
showFooter: boolean;
// menuType: MenuTypeEnum;
// 头部设置
headerSetting: HeaderSetting;
// menuSetting
// 菜单设置
menuSetting: MenuSetting;
// Multi-tab settings
// 标签设置
multiTabsSetting: MultiTabsSetting;
// Animation configuration
// 动画设置
transitionSetting: TransitionSetting;
// pageLayout whether to enable keep-alive
// 当有标签时，是否缓存页面，默认缓存
openKeepAlive: boolean;
// Lock screen time
// 锁屏时间
lockTime: number;
// Show breadcrumbs
// 面包屑
showBreadCrumb: boolean;
// Show breadcrumb icon
// 面包屑图标
showBreadCrumbIcon: boolean;
// Use error-handler-plugin
// 是否展示头部的错误日志按钮
useErrorHandle: boolean;
// Whether to open back to top
// 是否有返回顶部按钮
useOpenBackTop: boolean;
// Is it possible to embed iframe pages
// 是否可以在站内展示外链接
canEmbedIFramePage: boolean;
// Whether to delete unclosed messages and notify when switching the interface
// 当切换路由时，关闭所有Modal和通知
closeMessageOnSwitch: boolean;
// Whether to cancel the http request that has been sent but not responded when switching the interface.
// 在切换接口时，是否取消已发送但未响应的http请求。
removeAllHttpPending: boolean;
}
export interface GlobConfig {
// Site title
// 网站标题
title: string;
// Service interface url
apiUrl: string;
// Upload url
uploadUrl?: string;
// Service interface url prefix
urlPrefix?: string;
// Project abbreviation
shortName: string;
}
export interface GlobEnvConfig {
// Site title
VITE_GLOB_APP_TITLE: string;
// Service interface url
VITE_GLOB_API_URL: string;
// Service interface url prefix
VITE_GLOB_API_URL_PREFIX?: string;
// Project abbreviation
VITE_GLOB_APP_SHORT_NAME: string;
// Upload url
VITE_GLOB_UPLOAD_URL?: string;
}
3.event.d.ts
types\event.d.ts
// 扩展Event为ChangeEvent。全局可使用
declare interface ChangeEvent extends Event {
target: HTMLInputElement;
}
// 车轮事件???目前代码中没有用到
declare interface WheelEvent {
path?: EventTarget[];
}
4.global.d.ts
这个其实没有什么解释的必要了，就是一些类型的处理。
types\global.d.ts
declare interface Fn<T = any, R = T> {
(...arg: T[]): R;
}
declare interface PromiseFn<T = any, R = T> {
(...arg: T[]): Promise<R>;
}
declare interface IObj<T = any> {
[key: string]: T;
[key: number]: T;
}
declare function parseInt(s: string | number, radix?: number): number;
declare function parseFloat(string: string | number): number;
declare type Nullable<T> = T | null;
declare type NonNullable<T> = T extends null | undefined ? never : T;
declare type RefType<T> = T | null;
declare type CustomizedHTMLElement<T> = HTMLElement & T;
declare type Indexable<T extends any = any> = {
[key: string]: T;
};
declare type Recordable<T extends any = any> = Record<string, T>;
declare type ReadonlyRecordable<T extends any = any> = {
readonly [key: string]: T;
};
declare type Hash<T> = Indexable<T>;
declare type DeepPartial<T> = {
[P in keyof T]?: DeepPartial<T[P]>;
};
declare type LabelValueOptions = {
label: string;
value: any;
}[];
declare type EmitType = (event: string, ...args: any[]) => void;
declare type TargetContext = '_self' | '_blank';
declare type TimeoutHandle = ReturnType<typeof setTimeout>;
declare type IntervalHandle = ReturnType<typeof setInterval>;
declare interface ComponentElRef<T extends HTMLElement = HTMLDivElement> {
$el: T;
}
declare type ComponentRef<T extends HTMLElement = HTMLDivElement> = ComponentElRef<T> | null;
declare type ElRef<T extends HTMLElement = HTMLDivElement> = Nullable<T>;
type IsSame<A, B> = A | B extends A & B ? true : false;
5.module.d.ts
types\module.d.ts
// 从这个包中出来的东西类型：Locale & ReadonlyRecordable
declare module 'ant-design-vue/es/locale/*' {
import { Locale } from 'ant-design-vue/types/locale-provider';
const locale: Locale & ReadonlyRecordable;
export default locale as Locale & ReadonlyRecordable;
}
// 从这个包中出来的东西类型：LocaleSpecification & ReadonlyRecordable
declare module 'moment/dist/locale/*' {
import { LocaleSpecification } from 'moment';
const locale: LocaleSpecification & ReadonlyRecordable;
export default locale;
}
6.tsx.d.ts
types\tsx.d.ts
import type { ComponentRenderProxy, VNode } from 'vue';
// JSX的扩展
// https://www.tslang.cn/docs/handbook/jsx.html
declare global {
namespace JSX {
// JSX结果类型
// 默认地JSX表达式结果的类型为any。
// 你可以自定义这个类型，通过指定JSX.Element接口。
// 然而，不能够从接口里检索元素，属性或JSX的子元素的类型信息。 它是一个黑盒。
// 也就是说JSX返回的是一个VNode
// tslint:disable no-empty-interface
type Element = VNode;
// 因为它必须赋值给JSX.ElementClass或抛出一个错误。 默认的JSX.ElementClass为{}，但是它可以被扩展用来限制JSX的类型以符合相应的接口。
// 通过类和方法获取JSX组件时，类和方法必须的渲染Kye
// tslint:disable no-empty-interface
type ElementClass = ComponentRenderProxy;
// ↓ 通过类定义JSX组件时，属性使用'$props'字符串指定属性对象
interface ElementAttributesProperty {
$props: any;
}
// 配置固有元素
// 这样就循序JS中任意的标签出现了
interface IntrinsicElements {
[elem: string]: any;
}
// 配置属性类型
// 这样，JSX中，就可以写任意的属性了
interface IntrinsicAttributes {
[elem: string]: any;
}
}
}
7.utils.ts
types\utils.ts
import type { ComputedRef, Ref } from 'vue';
// 返回的类型是T类型的扩展
// key还是T类型中的Key
// 值是T类型下key对应的值，或者该值的响应式代理、计算属性响应式代理
export type DynamicProps<T> = {
[P in keyof T]: Ref<T[P]> | T[P] | ComputedRef<T[P]>;
};
8.vue-app-env.d.ts
这个也没必要讲了吧，创建vue-ts项目自带就有这个配置文件。
types\vue-app-env.d.ts
// 让TS认识.vue的import
declare module '*.vue' {
import { defineComponent } from 'vue';
const Component: ReturnType<typeof defineComponent>;
export default Component;
}
9.window.d.ts
虽然不明白VbenAdmin为什么要在开发环境将Vue实例放到window下。但是一样写吧，学学新知识。
types\window.d.ts
import type { App } from 'vue';
// 将window对象的TS检查扩展一个`__APP__`
declare global {
declare interface Window {
// Global vue app instance
__APP__: App<Element>;
}
}
上一章
第六十五章-VbenAdmin的枚举类型
下一章
第六十七章-VbenAdmin的test文件夹