chore: types

src/components/Form/src/components/ApiSelect copy.vue

-<template>
-  <Select v-bind="attrs" :options="getOptions" v-model:value="state" @focus="handleFetch">
-    <template #[item]="data" v-for="item in Object.keys($slots)">
-      <slot :name="item" v-bind="data"></slot>
-    </template>
-    <template #suffixIcon v-if="loading">
-      <LoadingOutlined spin />
-    </template>
-    <template #notFoundContent v-if="loading">
-      <span>
-        <LoadingOutlined spin class="mr-1" />
-        {{ t('component.form.apiSelectNotFound') }}
-      </span>
-    </template>
-  </Select>
-</template>
-<script lang="ts">
-  import { defineComponent, PropType, ref, watchEffect, computed, unref } from 'vue';
-  import { Select } from 'ant-design-vue';
-  import { isFunction } from '/@/utils/is';
-  import { useRuleFormItem } from '/@/hooks/component/useFormItem';
-  import { useAttrs } from '/@/hooks/core/useAttrs';
-  import { get } from 'lodash-es';
-
-  import { LoadingOutlined } from '@ant-design/icons-vue';
-  import { useI18n } from '/@/hooks/web/useI18n';
-  import { propTypes } from '/@/utils/propTypes';
-
-  type OptionsItem = { label: string; value: string; disabled?: boolean };
-
-  export default defineComponent({
-    name: 'ApiSelect',
-    components: {
-      Select,
-      LoadingOutlined,
-    },
-    inheritAttrs: false,
-    props: {
-      value: propTypes.string,
-      numberToString: propTypes.bool,
-      api: {
-        type: Function as PropType<(arg?: Recordable) => Promise<OptionsItem[]>>,
-        default: null,
-      },
-      // api params
-      params: {
-        type: Object as PropType<Recordable>,
-        default: () => {},
-      },
-      // support xxx.xxx.xx
-      resultField: propTypes.string.def(''),
-      labelField: propTypes.string.def('label'),
-      valueField: propTypes.string.def('value'),
-      immediate: propTypes.bool.def(true),
-    },
-    emits: ['options-change', 'change'],
-    setup(props, { emit }) {
-      const options = ref<OptionsItem[]>([]);
-      const loading = ref(false);
-      const isFirstLoad = ref(true);
-      const attrs = useAttrs();
-      const { t } = useI18n();
-
-      // Embedded in the form, just use the hook binding to perform form verification
-      const [state] = useRuleFormItem(props);
-
-      const getOptions = computed(() => {
-        const { labelField, valueField, numberToString } = props;
-
-        return unref(options).reduce((prev, next: Recordable) => {
-          if (next) {
-            const value = next[valueField];
-            prev.push({
-              label: next[labelField],
-              value: numberToString ? `${value}` : value,
-            });
-          }
-          return prev;
-        }, [] as OptionsItem[]);
-      });
-
-      watchEffect(() => {
-        if (isFirstLoad.value) {
-          props.immediate && fetch();
-        } else {
-          fetch();
-        }
-      });
-
-      async function fetch() {
-        const api = props.api;
-        if (!api || !isFunction(api)) return;
-
-        try {
-          loading.value = true;
-          const res = await api(props.params);
-          if (Array.isArray(res)) {
-            options.value = res;
-            emitChange();
-            return;
-          }
-          if (props.resultField) {
-            options.value = get(res, props.resultField) || [];
-          }
-          emitChange();
-        } catch (error) {
-          console.warn(error);
-        } finally {
-          loading.value = false;
-        }
-      }
-
-      async function handleFetch() {
-        if (!props.immediate) {
-          await fetch();
-        }
-        isFirstLoad.value = false;
-      }
-
-      function emitChange() {
-        emit('options-change', unref(options));
-      }
-
-      return { state, attrs, getOptions, loading, t, handleFetch };
-    },
-  });
-</script>

src/components/Scrollbar/src/bar.ts

@@ -28,7 +28,7 @@ export default defineComponent({
     const bar = computed(() => {
       return BAR_MAP[props.vertical ? 'vertical' : 'horizontal'];
     });
-    const barStore = ref<Indexable>({});
+    const barStore = ref<Recordable>({});
     const cursorDown = ref<any>(null);
     const clickThumbHandler = (e: any) => {
       // prevent click event of right button

src/components/Table/src/components/editable/index.ts

@@ -41,7 +41,7 @@ export function renderEditCell(column: BasicColumn) {
   };
 }
 
-export type EditRecordRow<T = Hash<any>> = Partial<
+export type EditRecordRow<T = Recordable> = Partial<
   {
     onEdit: (editable: boolean, submit?: boolean) => Promise<boolean>;
     editable: boolean;

src/components/Table/src/types/table.ts

@@ -402,7 +402,7 @@ export interface BasicColumn extends ColumnProps {
   flag?: 'INDEX' | 'DEFAULT' | 'CHECKBOX' | 'RADIO' | 'ACTION';
   customTitle?: VueNode;
 
-  slots?: Indexable;
+  slots?: Recordable;
 
   // Whether to hide the column by default, it can be displayed in the column configuration
   defaultHidden?: boolean;

src/directives/ripple/index.ts

@@ -181,7 +181,7 @@ function rippler({
   };
 }
 
-function setProps(modifiers: Hash<any>, props: Recordable) {
+function setProps(modifiers: Recordable, props: Recordable) {
   modifiers.forEach((item: Recordable) => {
     if (isNaN(Number(item))) props.event = item;
     else props.transition = item;

src/hooks/component/useFormItem.ts

@@ -3,7 +3,7 @@ import { reactive, readonly, computed, getCurrentInstance, watchEffect } from 'v
 
 import { isEqual } from 'lodash-es';
 
-export function useRuleFormItem<T extends Indexable>(
+export function useRuleFormItem<T extends Recordable>(
   props: T,
   key: keyof T = 'value',
   changeEvent = 'change'

src/layouts/page/transition.ts

@@ -2,7 +2,7 @@ import type { FunctionalComponent } from 'vue';
 import type { RouteLocation } from 'vue-router';
 
 export interface DefaultContext {
-  Component: FunctionalComponent & { type: Indexable };
+  Component: FunctionalComponent & { type: Recordable };
   route: RouteLocation;
 }
 

src/router/guard/permissionGuard.ts

@@ -38,7 +38,7 @@ export function createPermissionGuard(router: Router) {
         return;
       }
       // redirect login page
-      const redirectData: { path: string; replace: boolean; query?: Indexable<string> } = {
+      const redirectData: { path: string; replace: boolean; query?: Recordable<string> } = {
         path: LOGIN_PATH,
         replace: true,
       };

src/utils/http/axios/types.ts

@@ -28,7 +28,7 @@ export interface Result<T = any> {
 // multipart/form-data: upload file
 export interface UploadFileParams {
   // Other parameters
-  data?: Indexable;
+  data?: Recordable;
   // File parameter interface field name
   name?: string;
   // file name

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> = {
+import type {
+  App,
+  ComponentRenderProxy,
+  VNode,
+  ComponentPublicInstance,
+  FunctionalComponent,
+} from 'vue';
+declare global {
+  declare interface Window {
+    // Global vue app instance
+    __APP__: App<Element>;
+  }
+
+  export type Writable<T> = {
+    -readonly [P in keyof T]: T[P];
+  };
+
+  declare type Nullable<T> = T | null;
+  declare type NonNullable<T> = T extends null | undefined ? never : T;
+  declare type Recordable<T = any> = Record<string, T>;
+  declare type ReadonlyRecordable<T = any> = {
     readonly [key: string]: T;
-};
-
-declare type Hash<T> = Indexable<T>;
-
-declare type DeepPartial<T> = {
+  };
+  declare type Indexable<T = any> = {
+    [key: string]: 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 TimeoutHandle = ReturnType<typeof setTimeout>;
+  declare type IntervalHandle = ReturnType<typeof setInterval>;
 
-declare type ElRef<T extends HTMLElement = HTMLDivElement> = Nullable<T>;
-
-type IsSame<A, B> = A | B extends A & B ? true : false;
-
-declare interface ChangeEvent extends Event {
+  declare interface ChangeEvent extends Event {
     target: HTMLInputElement;
-}
+  }
 
-declare interface WheelEvent {
+  declare interface WheelEvent {
     path?: EventTarget[];
-}
-
-interface ImportMetaEnv extends ViteEnv {
+  }
+  interface ImportMetaEnv extends ViteEnv {
     __: unknown;
-}
+  }
 
-declare interface ViteEnv {
+  declare interface ViteEnv {
     VITE_PORT: number;
     VITE_USE_MOCK: boolean;
     VITE_USE_PWA: boolean;
@@ -88,4 +55,31 @@ declare interface ViteEnv {
     VITE_LEGACY: boolean;
     VITE_USE_IMAGEMIN: boolean;
     VITE_GENERATE_UI: string;
+  }
+
+  declare function parseInt(s: string | number, radix?: number): number;
+
+  declare function parseFloat(string: string | number): number;
+
+  namespace JSX {
+    // tslint:disable no-empty-interface
+    type Element = VNode;
+    // tslint:disable no-empty-interface
+    type ElementClass = ComponentRenderProxy;
+    interface ElementAttributesProperty {
+      $props: any;
+    }
+    interface IntrinsicElements {
+      [elem: string]: any;
+    }
+    interface IntrinsicAttributes {
+      [elem: string]: any;
+    }
+  }
+}
+
+declare module 'vue' {
+  export type JSXComponent<Props = any> =
+    | { new (): ComponentPublicInstance<Props> }
+    | FunctionalComponent<Props>;
 }

types/index.d.ts

+declare interface Fn<T = any, R = T> {
+  (...arg: T[]): R;
+}
+
+declare interface PromiseFn<T = any, R = T> {
+  (...arg: T[]): Promise<R>;
+}
+
+declare type RefType<T> = T | null;
+
+declare type LabelValueOptions = {
+  label: string;
+  value: any;
+}[];
+
+declare type EmitType = (event: string, ...args: any[]) => void;
+
+declare type TargetContext = '_self' | '_blank';
+
+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>;

types/module.d.ts

+declare module '*.vue' {
+  import { defineComponent } from 'vue';
+  const Component: ReturnType<typeof defineComponent>;
+  export default Component;
+}
+
 declare module 'ant-design-vue/es/locale/*' {
   import { Locale } from 'ant-design-vue/types/locale-provider';
   const locale: Locale & ReadonlyRecordable;

types/tsx.d.ts

-import type { ComponentRenderProxy, VNode } from 'vue';
-
-declare global {
-  namespace JSX {
-    // tslint:disable no-empty-interface
-    type Element = VNode;
-    // tslint:disable no-empty-interface
-    type ElementClass = ComponentRenderProxy;
-    interface ElementAttributesProperty {
-      $props: any;
-    }
-    interface IntrinsicElements {
-      [elem: string]: any;
-    }
-    interface IntrinsicAttributes {
-      [elem: string]: any;
-    }
-  }
-}

types/vue-app-env.d.ts

-declare module '*.vue' {
-  import { defineComponent } from 'vue';
-  const Component: ReturnType<typeof defineComponent>;
-  export default Component;
-}

types/window.d.ts

-import type { App } from 'vue';
-
-declare global {
-  declare interface Window {
-    // Global vue app instance
-    __APP__: App<Element>;
-  }
-}