第六十六章-VbenAdmin所有类型定义文件

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文件夹

# vben 

评论

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×