fix(types): fix type errors and adjust type definitions (#3474)

oljc · web-flow · commit 68ceca34d372 · 2025-03-15T18:33:56.000+08:00
- Fixed various type errors
- Adjusted .d.ts type declaration files
- Updated tsconfig.json configuration
diff --git a/packages/web-vue/components/_components/virtual-list-v2/virtual-list.vue b/packages/web-vue/components/_components/virtual-list-v2/virtual-list.vue
@@ -51,8 +51,7 @@ import {
   nextTick,
   ref,
   toRefs,
-  watch,
-  reactive,
+  PropType,
 } from 'vue';
 import { useSize } from './hooks/use-size';
 import VirtualListItem from './virtual-list-item';
@@ -69,7 +68,7 @@ export default defineComponent({
       default: 200,
     },
     data: {
-      type: Array,
+      type: Array as PropType<Record<string, any>[]>,
       default: () => [],
     },
     threshold: {
diff --git a/packages/web-vue/components/anchor/context.ts b/packages/web-vue/components/anchor/context.ts
@@ -3,8 +3,8 @@ import { InjectionKey } from 'vue';
 export interface AnchorContext {
   currentLink: string;
   addLink: (hash: string, node: HTMLElement) => void;
-  removeLink: () => void;
-  handleClick: (e: Event, hash?: string) => void;
+  removeLink: (hash: string) => void;
+  handleClick: (e: MouseEvent, hash?: string) => void;
 }
 
 export const anchorInjectionKey: InjectionKey<AnchorContext> =
diff --git a/packages/web-vue/components/breadcrumb/context.ts b/packages/web-vue/components/breadcrumb/context.ts
@@ -3,7 +3,7 @@ import { InjectionKey, Slots } from 'vue';
 export interface BreadcrumbContext {
   total: number;
   maxCount: number;
-  separator: string | number;
+  separator?: string | number;
   needHide: boolean;
   slots: Slots;
 }
diff --git a/packages/web-vue/components/button/button.vue b/packages/web-vue/components/button/button.vue
@@ -9,7 +9,7 @@
       @click="handleClick"
     >
       <span v-if="loading || $slots.icon" :class="`${prefixCls}-icon`">
-        <icon-loading v-if="loading" spin="true" />
+        <icon-loading v-if="loading" spin />
         <slot v-else name="icon" />
       </span>
       <slot />
@@ -119,7 +119,7 @@ export default defineComponent({
      * @en Set the native `type` attribute of `button`, optional values refer to [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type "_blank")
      */
     htmlType: {
-      type: String,
+      type: String as PropType<HTMLButtonElement['type']>,
       default: 'button',
     },
     /**
diff --git a/packages/web-vue/components/calendar/header.tsx b/packages/web-vue/components/calendar/header.tsx
@@ -10,10 +10,6 @@ import { isArray } from '../_utils/is';
 import { getPrefixCls } from '../_utils/global-config';
 import { useI18n } from '../locale';
 
-function getPopupContainer(node: HTMLElement): Element {
-  return node.parentElement;
-}
-
 export default defineComponent({
   name: 'Header',
   props: {
@@ -56,7 +52,7 @@ export default defineComponent({
       required: true,
     },
     onModeChange: {
-      type: Function,
+      type: Function as PropType<(value: any, ev: Event) => void>,
       required: true,
     },
     headerValueFormat: {
@@ -110,19 +106,19 @@ export default defineComponent({
               <Select
                 size="small"
                 class={`${prefixCls}-header-value-year`}
-                value={pageShowDateYear}
+                defaultValue={pageShowDateYear.value}
                 options={optionsYear.value}
                 onChange={props.onYearChange}
-                getPopupContainer={getPopupContainer}
+                popupContainer={`${prefixCls}-header`}
               />
               {props.mode === 'month' && (
                 <Select
                   size="small"
                   class={`${prefixCls}-header-value-month`}
-                  value={pageShowDateMonth}
+                  defaultValue={pageShowDateMonth.value}
                   options={optionsMonth}
                   onChange={props.onMonthChange}
-                  getPopupContainer={getPopupContainer}
+                  popupContainer={`${prefixCls}-header`}
                 />
               )}
             </>
@@ -131,7 +127,7 @@ export default defineComponent({
               <div
                 class={`${prefixCls}-header-icon`}
                 role="button"
-                tabIndex={0}
+                tabindex={0}
                 onClick={() => props.changePageShowDate('prev', props.mode)}
               >
                 <IconLeft />
@@ -146,7 +142,7 @@ export default defineComponent({
               </div>
               <div
                 role="button"
-                tabIndex={0}
+                tabindex={0}
                 class={`${prefixCls}-header-icon`}
                 onClick={() => props.changePageShowDate('next', props.mode)}
               >
diff --git a/packages/web-vue/components/calendar/month.tsx b/packages/web-vue/components/calendar/month.tsx
@@ -59,7 +59,7 @@ export function getAllDaysByTime(
   }
   const rows = Array(6)
     .fill(null)
-    .map(() => []);
+    .map(() => [] as any[]);
   for (let i = 0; i < 6; i++) {
     rows[i] = flatRows.slice(i * 7, 7 * (i + 1));
     if (isWeek) {
@@ -177,7 +177,7 @@ export default defineComponent({
           const selectedWeek =
             props.value &&
             col.weekRows.find(
-              (r) => r.year === rowYear && r.month === rowMonth
+              (r: any) => r.year === rowYear && r.month === rowMonth
             ) &&
             rowWeek === col.weekOfYear;
           return (
@@ -238,7 +238,7 @@ export default defineComponent({
                 },
               ]}
             >
-              {renderDays(row)}
+              {renderDays(row as any[])}
             </div>
           ))}
         </div>
diff --git a/packages/web-vue/components/calendar/year.tsx b/packages/web-vue/components/calendar/year.tsx
@@ -100,7 +100,7 @@ export default defineComponent({
       <div class={`${prefixCls}-year`}>
         {mg.map((row, rowIndex) => (
           <div class={`${prefixCls}-year-row`} key={rowIndex}>
-            {row.map((col) => {
+            {row.map((col: any) => {
               const time = dayjs(
                 `${showYear.value}-${padStart(col.value + 1, 2, '0')}-01`
               );
diff --git a/packages/web-vue/components/mention/mention.tsx b/packages/web-vue/components/mention/mention.tsx
@@ -271,7 +271,10 @@ export default defineComponent({
       const nextValue = `${head}${match}${tail}`;
 
       _value.value = nextValue;
-      emit('select', value);
+      emit(
+        'select',
+        value as string | number | Record<string, any> | undefined
+      );
       emit('update:modelValue', nextValue);
       emit('change', nextValue);
       resetMeasureInfo();
@@ -384,27 +387,28 @@ export default defineComponent({
                 onKeydown={handleKeyDown}
               />
             </ResizeObserver>
-            {measureInfo.value.measuring && validOptionInfos.value.length > 0 && (
-              <div
-                ref={mirrorRef}
-                style={mirrorStyle.value}
-                class={`${prefixCls}-measure`}
-              >
-                {computedValue.value?.slice(0, measureInfo.value.location)}
-                <Trigger
-                  v-slots={{ content: renderDropdown }}
-                  trigger="focus"
-                  position="bl"
-                  popupOffset={4}
-                  preventFocus={true}
-                  popupVisible={computedPopupVisible.value}
-                  clickToClose={false}
-                  onPopupVisibleChange={handlePopupVisibleChange}
+            {measureInfo.value.measuring &&
+              validOptionInfos.value.length > 0 && (
+                <div
+                  ref={mirrorRef}
+                  style={mirrorStyle.value}
+                  class={`${prefixCls}-measure`}
                 >
-                  <span>@</span>
-                </Trigger>
-              </div>
-            )}
+                  {computedValue.value?.slice(0, measureInfo.value.location)}
+                  <Trigger
+                    v-slots={{ content: renderDropdown }}
+                    trigger="focus"
+                    position="bl"
+                    popupOffset={4}
+                    preventFocus={true}
+                    popupVisible={computedPopupVisible.value}
+                    clickToClose={false}
+                    onPopupVisibleChange={handlePopupVisibleChange}
+                  >
+                    <span>@</span>
+                  </Trigger>
+                </div>
+              )}
           </div>
         );
       }
diff --git a/packages/web-vue/global.d.ts b/packages/web-vue/global.d.ts
@@ -1,8 +1,28 @@
+import type { NativeElements, ReservedProps, VNode } from '@vue/runtime-dom';
+
 declare module '*.vue' {
-  import { DefineComponent } from 'vue';
+  import type { DefineComponent } from 'vue';
   // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
   const component: DefineComponent<{}, {}, any>;
   export default component;
 }
 
+declare global {
+  namespace JSX {
+    export type Element = VNode;
+    export interface ElementClass {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
+      $props: {};
+    }
+    export interface ElementAttributesProperty {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
+      $props: {};
+    }
+    export interface IntrinsicElements extends NativeElements {
+      [name: string]: any;
+    }
+    export type IntrinsicAttributes = ReservedProps;
+  }
+}
+
 declare module '*.less';
diff --git a/packages/web-vue/package.json b/packages/web-vue/package.json
@@ -49,7 +49,7 @@
     "lint-staged": "npx lint-staged"
   },
   "peerDependencies": {
-    "vue": "^3.1.0"
+    "vue": ">=3.1.0"
   },
   "lint-staged": {
     "*.{js,ts,jsx,tsx,vue}": [
diff --git a/packages/web-vue/tsconfig.json b/packages/web-vue/tsconfig.json
@@ -9,6 +9,23 @@
     "allowJs": true,
     "isolatedModules": true,
     "esModuleInterop": true,
-    "jsx": "preserve"
-  }
+    "jsx": "preserve",
+    "jsxImportSource": "vue",
+    "lib": ["ESNext", "DOM", "DOM.Iterable"],
+    "skipLibCheck": true,
+    "resolveJsonModule": true,
+  },
+  "include": [
+    "components/**/*",
+    "icon/**/*",
+    "*.d.ts"
+  ],
+  "exclude": [
+    "node_modules",
+    "dist",
+    "lib",
+    "es",
+    "json",
+    "**/__tests__/**/*"
+  ]
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml

Original file line number	Diff line number	Diff line change
`@@ -3,7 +3,7 @@ import { InjectionKey, Slots } from 'vue';`
`3`	`3`	`export interface BreadcrumbContext {`
`4`	`4`	`total: number;`
`5`	`5`	`maxCount: number;`
`6`		`- separator: string \| number;`
	`6`	`+ separator?: string \| number;`
`7`	`7`	`needHide: boolean;`
`8`	`8`	`slots: Slots;`
`9`	`9`	`}`