Feat v4 fix type errors (#6285)

* fix compile type errors

* fix menuprops type import

* fix lint errors

* fix lint errors

* fix format error

* fix node version

* fix run dist error

* fix run lint

* fix as any

* fix string type

components/_util/colors.ts

@@ -14,7 +14,7 @@ export const PresetStatusColorTypes = [
 
 export type PresetColorType = PresetColorKey | InverseColor;
 
-export type PresetStatusColorType = typeof PresetStatusColorTypes[number];
+export type PresetStatusColorType = (typeof PresetStatusColorTypes)[number];
 
 /**
  * determine if the color keyword belongs to the `Ant Design` {@link PresetColors}.

components/_util/statusUtils.tsx

@@ -3,7 +3,7 @@ import classNames from './classNames';
 
 const InputStatuses = ['warning', 'error', ''] as const;
 
-export type InputStatus = typeof InputStatuses[number];
+export type InputStatus = (typeof InputStatuses)[number];
 
 export function getStatusClassNames(
   prefixCls: string,

components/_util/transition.tsx

@@ -9,7 +9,7 @@ import { nextTick, Transition, TransitionGroup } from 'vue';
 import { tuple } from './type';
 
 const SelectPlacements = tuple('bottomLeft', 'bottomRight', 'topLeft', 'topRight');
-export type SelectCommonPlacement = typeof SelectPlacements[number];
+export type SelectCommonPlacement = (typeof SelectPlacements)[number];
 
 const getTransitionDirection = (placement: SelectCommonPlacement | undefined) => {
   if (placement !== undefined && (placement === 'topLeft' || placement === 'topRight')) {

components/alert/index.tsx

@@ -35,7 +35,7 @@ const iconMapOutlined = {
 
 const AlertTypes = tuple('success', 'info', 'warning', 'error');
 
-export type AlertType = typeof AlertTypes[number];
+export type AlertType = (typeof AlertTypes)[number];
 
 export const alertProps = () => ({
   /**

components/config-provider/index.tsx

@@ -44,11 +44,9 @@ function getGlobalIconPrefixCls() {
   return globalConfigForApi.iconPrefixCls || defaultIconPrefixCls;
 }
 const globalConfigBySet = reactive<ConfigProviderProps>({}); // 权重最大
-export const globalConfigForApi = reactive<
-  ConfigProviderProps & {
-    getRootPrefixCls?: (rootPrefixCls?: string, customizePrefixCls?: string) => string;
-  }
->({});
+export const globalConfigForApi: ConfigProviderProps & {
+  getRootPrefixCls?: (rootPrefixCls?: string, customizePrefixCls?: string) => string;
+} = reactive({});
 
 export const configConsumerProps = [
   'getTargetContainer',

components/date-picker/__tests__/other.test.js

@@ -3,7 +3,7 @@ import { asyncExpect, sleep } from '../../../tests/utils';
 import dayjs from 'dayjs';
 import DatePicker from '../';
 import LocaleProvider from '../../locale-provider';
-import locale from '../../locale-provider/zh_CN';
+import locale from '../../locale/zh_CN';
 jest.mock('../../_util/Portal');
 const { MonthPicker, WeekPicker } = DatePicker;
 

components/drawer/index.tsx

@@ -24,10 +24,10 @@ import type { KeyboardEventHandler, MouseEventHandler } from '../_util/EventInte
 type ILevelMove = number | [number, number];
 
 const PlacementTypes = tuple('top', 'right', 'bottom', 'left');
-export type placementType = typeof PlacementTypes[number];
+export type placementType = (typeof PlacementTypes)[number];
 
 const SizeTypes = tuple('default', 'large');
-export type sizeType = typeof SizeTypes[number];
+export type sizeType = (typeof SizeTypes)[number];
 
 export interface PushState {
   distance: string | number;

components/form/Form.tsx

@@ -24,6 +24,7 @@ import type {
   Callbacks,
   ValidateMessages,
   Rule,
+  FormLabelAlign,
 } from './interface';
 import useConfigInject from '../config-provider/hooks/useConfigInject';
 import { useProvideForm } from './context';
@@ -42,7 +43,10 @@ export const formProps = () => ({
   labelCol: { type: Object as PropType<ColProps & HTMLAttributes> },
   wrapperCol: { type: Object as PropType<ColProps & HTMLAttributes> },
   colon: { type: Boolean, default: undefined },
-  labelAlign: PropTypes.oneOf(tuple('left', 'right')),
+  labelAlign: {
+    ...PropTypes.oneOf(tuple('left', 'right')),
+    type: String as PropType<FormLabelAlign>,
+  },
   labelWrap: { type: Boolean, default: undefined },
   prefixCls: String,
   requiredMark: { type: [String, Boolean] as PropType<RequiredMark | ''>, default: undefined },

components/form/FormItem.tsx

@@ -32,7 +32,14 @@ import { toArray } from './utils/typeUtil';
 import { warning } from '../vc-util/warning';
 import find from 'lodash-es/find';
 import { tuple } from '../_util/type';
-import type { InternalNamePath, Rule, RuleError, RuleObject, ValidateOptions } from './interface';
+import type {
+  InternalNamePath,
+  Rule,
+  RuleError,
+  RuleObject,
+  ValidateOptions,
+  FormLabelAlign,
+} from './interface';
 import useConfigInject from '../config-provider/hooks/useConfigInject';
 import { useInjectForm } from './context';
 import FormItemLabel from './FormItemLabel';
@@ -44,7 +51,7 @@ import useDebounce from './utils/useDebounce';
 import classNames from '../_util/classNames';
 
 const ValidateStatuses = tuple('success', 'warning', 'error', 'validating', '');
-export type ValidateStatus = typeof ValidateStatuses[number];
+export type ValidateStatus = (typeof ValidateStatuses)[number];
 
 export interface FieldExpose {
   fieldValue: Ref<any>;
@@ -105,7 +112,10 @@ export const formItemProps = () => ({
   wrapperCol: { type: Object as PropType<ColProps & HTMLAttributes> },
   hasFeedback: { type: Boolean, default: false },
   colon: { type: Boolean, default: undefined },
-  labelAlign: PropTypes.oneOf(tuple('left', 'right')),
+  labelAlign: {
+    ...PropTypes.oneOf(tuple('left', 'right')),
+    type: String as PropType<FormLabelAlign>,
+  },
   prop: { type: [String, Number, Array] as PropType<string | number | Array<string | number>> },
   name: { type: [String, Number, Array] as PropType<string | number | Array<string | number>> },
   rules: [Array, Object] as PropType<Rule[] | Rule>,

components/grid/demo/use-breakpoint.vue

@@ -19,7 +19,7 @@ Use `useBreakpoint` Hook provide personalized layout.
 <template>
   Current break point:
   <template v-for="(value, key) in screens">
-    <a-tag v-if="!!value" color="blue" :key="key">
+    <a-tag v-if="!!value" :key="key" color="blue">
       {{ key }}
     </a-tag>
   </template>

components/locale-provider/__tests__/index.test.js

@@ -14,57 +14,57 @@ import {
   Transfer,
 } from '../..';
 import LocaleProvider from '..';
-import arEG from '../ar_EG';
-import bgBG from '../bg_BG';
-import caES from '../ca_ES';
-import csCZ from '../cs_CZ';
-import daDK from '../da_DK';
-import deDE from '../de_DE';
-import elGR from '../el_GR';
-import enGB from '../en_GB';
-import enUS from '../en_US';
-import esES from '../es_ES';
-import etEE from '../et_EE';
-import faIR from '../fa_IR';
-import fiFI from '../fi_FI';
-import frBE from '../fr_BE';
-import frFR from '../fr_FR';
-import heIL from '../he_IL';
-import hiIN from '../hi_IN';
-import hrHR from '../hr_HR';
-import huHU from '../hu_HU';
-import hyAM from '../hy_AM';
-import isIS from '../is_IS';
-import itIT from '../it_IT';
-import jaJP from '../ja_JP';
-import knIN from '../kn_IN';
-import koKR from '../ko_KR';
-import kuIQ from '../ku_IQ';
-import mkMK from '../mk_MK';
-import mnMN from '../mn_MN';
-import msMY from '../ms_MY';
-import nbNO from '../nb_NO';
-import neNP from '../ne-NP';
-import nlBE from '../nl_BE';
-import nlNL from '../nl_NL';
-import plPL from '../pl_PL';
-import ptBR from '../pt_BR';
-import ptPT from '../pt_PT';
-import roRO from '../ro_RO';
-import ruRU from '../ru_RU';
-import skSK from '../sk_SK';
-import slSI from '../sl_SI';
-import srRS from '../sr_RS';
-import svSE from '../sv_SE';
-import taIN from '../ta_IN';
-import thTH from '../th_TH';
-import trTR from '../tr_TR';
-import ukUA from '../uk_UA';
-import viVN from '../vi_VN';
-import idID from '../id_ID';
-import lvLV from '../lv_LV';
-import zhCN from '../zh_CN';
-import zhTW from '../zh_TW';
+import arEG from '../../locale/ar_EG';
+import bgBG from '../../locale/bg_BG';
+import caES from '../../locale/ca_ES';
+import csCZ from '../../locale/cs_CZ';
+import daDK from '../../locale/da_DK';
+import deDE from '../../locale/de_DE';
+import elGR from '../../locale/el_GR';
+import enGB from '../../locale/en_GB';
+import enUS from '../../locale/en_US';
+import esES from '../../locale/es_ES';
+import etEE from '../../locale/et_EE';
+import faIR from '../../locale/fa_IR';
+import fiFI from '../../locale/fi_FI';
+import frBE from '../../locale/fr_BE';
+import frFR from '../../locale/fr_FR';
+import heIL from '../../locale/he_IL';
+import hiIN from '../../locale/hi_IN';
+import hrHR from '../../locale/hr_HR';
+import huHU from '../../locale/hu_HU';
+import hyAM from '../../locale/hy_AM';
+import isIS from '../../locale/is_IS';
+import itIT from '../../locale/it_IT';
+import jaJP from '../../locale/ja_JP';
+import knIN from '../../locale/kn_IN';
+import koKR from '../../locale/ko_KR';
+import kuIQ from '../../locale/ku_IQ';
+import mkMK from '../../locale/mk_MK';
+import mnMN from '../../locale/mn_MN';
+import msMY from '../../locale/ms_MY';
+import nbNO from '../../locale/nb_NO';
+import neNP from '../../locale/ne_NP';
+import nlBE from '../../locale/nl_BE';
+import nlNL from '../../locale/nl_NL';
+import plPL from '../../locale/pl_PL';
+import ptBR from '../../locale/pt_BR';
+import ptPT from '../../locale/pt_PT';
+import roRO from '../../locale/ro_RO';
+import ruRU from '../../locale/ru_RU';
+import skSK from '../../locale/sk_SK';
+import slSI from '../../locale/sl_SI';
+import srRS from '../../locale/sr_RS';
+import svSE from '../../locale/sv_SE';
+import taIN from '../../locale/ta_IN';
+import thTH from '../../locale/th_TH';
+import trTR from '../../locale/tr_TR';
+import ukUA from '../../locale/uk_UA';
+import viVN from '../../locale/vi_VN';
+import idID from '../../locale/id_ID';
+import lvLV from '../../locale/lv_LV';
+import zhCN from '../../locale/zh_CN';
+import zhTW from '../../locale/zh_TW';
 
 const locales = [
   arEG,

components/mentions/index.tsx

@@ -279,7 +279,7 @@ const Mentions = defineComponent({
 /* istanbul ignore next */
 export const MentionsOption = defineComponent({
   compatConfig: { MODE: 3 },
-  ...Option,
+  ...(Option as any),
   name: 'AMentionsOption',
   props: optionProps,
 });

components/menu/src/OverrideContext.ts

@@ -1,6 +1,6 @@
 import type { ComputedRef, InjectionKey } from 'vue';
 import { provide, computed, inject } from 'vue';
-import type { MenuProps } from './menu';
+import type { MenuProps } from './Menu';
 
 // Used for Dropdown only
 export interface OverrideContextProps {

components/radio/Group.tsx

@@ -11,7 +11,7 @@ import { useProvideRadioGroupContext } from './context';
 
 const RadioGroupSizeTypes = tuple('large', 'default', 'small');
 
-export type RadioGroupSize = typeof RadioGroupSizeTypes[number];
+export type RadioGroupSize = (typeof RadioGroupSizeTypes)[number];
 
 export type RadioGroupOption = RadioGroupOptionType;
 

components/skeleton/Skeleton.tsx

@@ -96,9 +96,9 @@ const Skeleton = defineComponent({
       const { loading, avatar, title, paragraph, active, round } = props;
       const pre = prefixCls.value;
       if (loading || props.loading === undefined) {
-        const hasAvatar = !!avatar || avatar === '';
-        const hasTitle = !!title || title === '';
-        const hasParagraph = !!paragraph || paragraph === '';
+        const hasAvatar = !!avatar || (avatar as string) === '';
+        const hasTitle = !!title || (title as string) === '';
+        const hasParagraph = !!paragraph || (paragraph as string) === '';
 
         // Avatar
         let avatarNode;

components/table/index.tsx

@@ -16,8 +16,8 @@ export type { ColumnProps } from './Column';
 export type { ColumnsType, ColumnType, ColumnGroupType } from './interface';
 export type { TableProps, TablePaginationConfig };
 
-const TableSummaryRow = defineComponent({ ...SummaryRow, name: 'ATableSummaryRow' });
-const TableSummaryCell = defineComponent({ ...SummaryCell, name: 'ATableSummaryCell' });
+const TableSummaryRow = defineComponent({ ...(SummaryRow as any), name: 'ATableSummaryRow' });
+const TableSummaryCell = defineComponent({ ...(SummaryCell as any), name: 'ATableSummaryCell' });
 
 const TableSummary = Object.assign(Summary, {
   Cell: TableSummaryCell,

components/theme/util/genComponentStyleHook.ts

@@ -6,7 +6,7 @@ import { genCommonStyle, genLinkStyle } from '../../_style';
 import type { UseComponentStyleResult } from '../internal';
 import { mergeToken, statisticToken, useToken } from '../internal';
 import type { ComponentTokenMap, GlobalToken } from '../interface';
-import useConfigInject from 'ant-design-vue/es/config-provider/hooks/useConfigInject';
+import useConfigInject from '../../config-provider/hooks/useConfigInject';
 import type { Ref } from 'vue';
 import { computed } from 'vue';
 

components/tree/index.tsx

@@ -26,7 +26,11 @@ export type {
 
 /* istanbul ignore next */
 
-const TreeNode = defineComponent({ ...VcTreeNode, name: 'ATreeNode', props: treeNodeProps });
+const TreeNode = defineComponent({
+  ...(VcTreeNode as any),
+  name: 'ATreeNode',
+  props: treeNodeProps,
+});
 
 export { DirectoryTree, TreeNode };
 

components/vc-picker/panels/DatetimePanel/index.tsx

@@ -17,7 +17,7 @@ export type DatetimePanelProps<DateType> = {
 } & Omit<DatePanelProps<DateType>, 'disabledHours' | 'disabledMinutes' | 'disabledSeconds'>;
 
 const ACTIVE_PANEL = tuple('date', 'time');
-type ActivePanelType = typeof ACTIVE_PANEL[number];
+type ActivePanelType = (typeof ACTIVE_PANEL)[number];
 
 function DatetimePanel<DateType>(_props: DatetimePanelProps<DateType>) {
   const props = useMergeProps(_props);

components/vc-select/BaseSelect.tsx

@@ -700,7 +700,7 @@ export default defineComponent({
         typeof getRawInputElement === 'function' && getRawInputElement();
       const domProps = {
         ...restProps,
-      } as Omit<keyof typeof restProps, typeof DEFAULT_OMIT_PROPS[number]>;
+      } as Omit<keyof typeof restProps, (typeof DEFAULT_OMIT_PROPS)[number]>;
 
       // Used for raw custom input trigger
       let onTriggerVisibleChange: null | ((newOpen: boolean) => void);

components/vc-select/utils/valueUtil.ts

@@ -86,7 +86,7 @@ export function flattenOptions<OptionType extends BaseOptionType = DefaultOption
 /**
  * Inject `props` into `option` for legacy usage
  */
-export function injectPropsWithOption<T>(option: T): T {
+export function injectPropsWithOption<T extends object>(option: T): T {
   const newOption = { ...option };
   if (!('props' in newOption)) {
     Object.defineProperty(newOption, 'props', {

webpack.build.conf.js

@@ -52,7 +52,7 @@ function externalDayjs(config) {
   });
   config.externals.push(function ({ _context, request }, callback) {
     if (/^dayjs\/plugin\//.test(request)) {
-      const name = request.replaceAll('/', '_');
+      const name = request.replace(/\//g, '_');
       return callback(null, {
         root: name,
         commonjs2: name,