chore: Add type util (#46923)

* docs: init

* chore: all types

* docs: faq

* chore: fix lint

components/_util/__tests__/type.test.tsx

@@ -0,0 +1,89 @@
+import * as React from 'react';
+
+import type { GetProp, GetProps, GetRef } from '../type';
+
+describe('type', () => {
+  class CC extends React.Component<{ bamboo?: number }> {
+    getBamboo() {
+      return this.props.bamboo;
+    }
+
+    render() {
+      return this.props.bamboo;
+    }
+  }
+
+  interface TestRef {
+    nativeElement: HTMLDivElement;
+  }
+
+  const RefFC = React.forwardRef<TestRef, { bamboo?: number }>((props, ref) => {
+    const eleRef = React.useRef<HTMLDivElement>(null);
+
+    React.useImperativeHandle(ref, () => ({
+      nativeElement: eleRef.current!,
+    }));
+
+    return <div ref={eleRef}>{props.bamboo}</div>;
+  });
+
+  describe('GetProps', () => {
+    it('FC', () => {
+      const FC = (props: { bamboo: number }) => props.bamboo;
+      type Props = GetProps<typeof FC>;
+      const props: Props = { bamboo: 123 };
+
+      expect(props).toBeTruthy();
+    });
+
+    it('CC', () => {
+      type Props = GetProps<typeof CC>;
+      const props: Props = { bamboo: 123 };
+
+      expect(props).toBeTruthy();
+    });
+
+    it('RefFc', () => {
+      type Props = GetProps<typeof RefFC>;
+      const props: Props = { bamboo: 123 };
+
+      expect(props).toBeTruthy();
+    });
+  });
+
+  describe('GetRef', () => {
+    it('CC', () => {
+      type Ref = GetRef<CC>;
+      const ref = React.createRef<Ref>();
+
+      expect(<CC ref={ref} />).toBeTruthy();
+    });
+
+    it('RefFC', () => {
+      type Ref = GetRef<typeof RefFC>;
+      const ref = React.createRef<Ref>();
+
+      expect(<RefFC ref={ref} />).toBeTruthy();
+    });
+  });
+
+  describe('GetProp', () => {
+    it('optional', () => {
+      const Optional = (props: { list?: { bamboo: string }[] }) => props.list?.length;
+      type ListItemType = GetProp<typeof Optional, 'list'>[number];
+
+      const item: ListItemType = { bamboo: '123' };
+      expect(item).toBeTruthy();
+    });
+
+    it('interface directly', () => {
+      interface Props {
+        bamboo: number;
+      }
+
+      type BambooType = GetProp<Props, 'bamboo'>;
+      const bamboo: BambooType = 123;
+      expect(bamboo).toBeTruthy();
+    });
+  });
+});

components/_util/type.ts

@@ -1,6 +1,32 @@
+import type React from 'react';
+
 /** https://github.com/Microsoft/TypeScript/issues/29729 */
 export type LiteralUnion<T extends string> = T | (string & {});
 
 export type AnyObject = Record<PropertyKey, any>;
 
 export type CustomComponent<P = AnyObject> = React.ComponentType<P> | string;
+
+export type GetProps<T extends React.ComponentType<any> | object> = T extends React.ComponentType<
+  infer P
+>
+  ? P
+  : T extends object
+    ? T
+    : never;
+
+export type GetProp<
+  T extends React.ComponentType<any> | object,
+  PropName extends keyof GetProps<T>,
+> = NonNullable<GetProps<T>[PropName]>;
+
+type ReactRefComponent<Props extends { ref?: React.Ref<any> }> = (
+  props: Props,
+) => React.ReactElement | React.ReactNode | null;
+
+export type GetRef<T extends ReactRefComponent<any> | React.Component<any>> =
+  T extends React.Component<any>
+    ? T
+    : T extends ReactRefComponent<React.RefAttributes<infer RefType>>
+      ? RefType
+      : never;

components/auto-complete/demo/uncertain-category.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { AutoComplete, Input } from 'antd';
-import type { SelectProps } from 'antd/es/select';
+import type { SelectProps } from 'antd';
 
 const getRandomInt = (max: number, min = 0) => Math.floor(Math.random() * (max - min + 1)) + min;
 

components/button/demo/debug-icon.tsx

@@ -1,7 +1,16 @@
 import React from 'react';
 import { SearchOutlined } from '@ant-design/icons';
-import { Button, ConfigProvider, Divider, Flex, Radio, Tooltip } from 'antd';
-import type { SizeType } from 'antd/es/config-provider/SizeContext';
+import {
+  Button,
+  ConfigProvider,
+  Divider,
+  Flex,
+  Radio,
+  Tooltip,
+  type ConfigProviderProps,
+} from 'antd';
+
+type SizeType = ConfigProviderProps['componentSize'];
 
 const App: React.FC = () => {
   const [size, setSize] = React.useState<SizeType>('large');

components/button/demo/legacy-group.tsx

@@ -1,7 +1,9 @@
-import { DownloadOutlined } from '@ant-design/icons';
 import React from 'react';
+import { DownloadOutlined } from '@ant-design/icons';
 import { Button, Tooltip } from 'antd';
-import type { ButtonGroupProps } from 'antd/es/button';
+import type { GetProps } from 'antd';
+
+type ButtonGroupProps = GetProps<typeof Button.Group>;
 
 const CustomGroup: React.FC<ButtonGroupProps> = (props) => (
   <Button.Group {...props}>

components/button/demo/size.tsx

@@ -1,7 +1,9 @@
 import React, { useState } from 'react';
 import { DownloadOutlined } from '@ant-design/icons';
 import { Button, Divider, Flex, Radio } from 'antd';
-import type { SizeType } from 'antd/es/config-provider/SizeContext';
+import type { ConfigProviderProps } from 'antd';
+
+type SizeType = ConfigProviderProps['componentSize'];
 
 const App: React.FC = () => {
   const [size, setSize] = useState<SizeType>('large'); // default is 'middle'

components/carousel/demo/position.tsx

@@ -1,7 +1,8 @@
 import React, { useState } from 'react';
-import type { RadioChangeEvent } from 'antd';
+import type { CarouselProps, RadioChangeEvent } from 'antd';
 import { Carousel, Radio } from 'antd';
-import type { DotPosition } from 'antd/es/carousel';
+
+type DotPosition = CarouselProps['dotPosition'];
 
 const contentStyle: React.CSSProperties = {
   height: '160px',

components/cascader/demo/custom-render.tsx

@@ -1,6 +1,8 @@
 import React from 'react';
 import { Cascader } from 'antd';
-import type { DefaultOptionType } from 'antd/es/cascader';
+import type { CascaderProps, GetProp } from 'antd';
+
+type DefaultOptionType = GetProp<CascaderProps, 'options'>[number];
 
 interface Option {
   value: string;

components/cascader/demo/search.tsx

@@ -1,6 +1,8 @@
 import React from 'react';
 import { Cascader } from 'antd';
-import type { DefaultOptionType } from 'antd/es/cascader';
+import type { GetProp, CascaderProps } from 'antd';
+
+type DefaultOptionType = GetProp<CascaderProps, 'options'>[number];
 
 interface Option {
   value: string;

components/checkbox/demo/basic.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import { Checkbox } from 'antd';
-import type { CheckboxChangeEvent } from 'antd/es/checkbox';
+import type { CheckboxProps } from 'antd';
 
-const onChange = (e: CheckboxChangeEvent) => {
+const onChange: CheckboxProps['onChange'] = (e) => {
   console.log(`checked = ${e.target.checked}`);
 };
 

components/checkbox/demo/check-all.tsx

@@ -1,7 +1,8 @@
 import React, { useState } from 'react';
 import { Checkbox, Divider } from 'antd';
-import type { CheckboxChangeEvent } from 'antd/es/checkbox';
-import type { CheckboxValueType } from 'antd/es/checkbox/Group';
+import type { CheckboxProps, GetProp } from 'antd';
+
+type CheckboxValueType = GetProp<typeof Checkbox.Group, 'value'>[number];
 
 const CheckboxGroup = Checkbox.Group;
 
@@ -18,7 +19,7 @@ const App: React.FC = () => {
     setCheckedList(list);
   };
 
-  const onCheckAllChange = (e: CheckboxChangeEvent) => {
+  const onCheckAllChange: CheckboxProps['onChange'] = (e) => {
     setCheckedList(e.target.checked ? plainOptions : []);
   };
 

components/checkbox/demo/controller.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { Button, Checkbox } from 'antd';
-import type { CheckboxChangeEvent } from 'antd/es/checkbox';
+import type { CheckboxProps } from 'antd';
 
 const App: React.FC = () => {
   const [checked, setChecked] = useState(true);
@@ -14,7 +14,7 @@ const App: React.FC = () => {
     setDisabled(!disabled);
   };
 
-  const onChange = (e: CheckboxChangeEvent) => {
+  const onChange: CheckboxProps['onChange'] = (e) => {
     console.log('checked = ', e.target.checked);
     setChecked(e.target.checked);
   };

components/checkbox/demo/group.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import { Checkbox } from 'antd';
-import type { CheckboxValueType } from 'antd/es/checkbox/Group';
+import type { GetProp } from 'antd';
 
-const onChange = (checkedValues: CheckboxValueType[]) => {
+const onChange: GetProp<typeof Checkbox.Group, 'onChange'> = (checkedValues) => {
   console.log('checked = ', checkedValues);
 };
 

components/checkbox/demo/layout.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import { Checkbox, Col, Row } from 'antd';
-import type { CheckboxValueType } from 'antd/es/checkbox/Group';
+import type { GetProp } from 'antd';
 
-const onChange = (checkedValues: CheckboxValueType[]) => {
+const onChange: GetProp<typeof Checkbox.Group, 'onChange'> = (checkedValues) => {
   console.log('checked = ', checkedValues);
 };
 

components/color-picker/demo/change-completed.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { App, ColorPicker } from 'antd';
-import type { ColorPickerProps } from 'antd/es/color-picker';
+import type { ColorPickerProps } from 'antd';
 
 const Demo = () => {
   const { message } = App.useApp();

components/color-picker/demo/controlled.tsx

@@ -1,6 +1,8 @@
 import React, { useState } from 'react';
 import { ColorPicker, theme } from 'antd';
-import type { Color } from 'antd/es/color-picker';
+import type { GetProp, ColorPickerProps } from 'antd';
+
+type Color = GetProp<ColorPickerProps, 'value'>;
 
 const Demo: React.FC = () => {
   const { token } = theme.useToken();

components/color-picker/demo/format.tsx

@@ -1,6 +1,8 @@
 import React, { useMemo, useState } from 'react';
 import { ColorPicker, Space } from 'antd';
-import type { Color, ColorPickerProps } from 'antd/es/color-picker';
+import type { ColorPickerProps, GetProp } from 'antd';
+
+type Color = GetProp<ColorPickerProps, 'value'>;
 
 const HexCase = () => {
   const [colorHex, setColorHex] = useState<Color | string>('#1677ff');

components/color-picker/demo/pure-panel.tsx

@@ -1,6 +1,8 @@
 import React, { useState } from 'react';
 import { ColorPicker, theme } from 'antd';
-import type { Color } from 'antd/es/color-picker';
+import type { GetProp, ColorPickerProps } from 'antd';
+
+type Color = GetProp<ColorPickerProps, 'value'>;
 
 const PureRenderColorPicker = ColorPicker._InternalPanelDoNotUseOrYouWillBeFired;
 

components/color-picker/demo/trigger.tsx

@@ -1,6 +1,8 @@
 import React, { useMemo, useState } from 'react';
 import { Button, ColorPicker, theme } from 'antd';
-import type { Color } from 'antd/es/color-picker';
+import type { GetProp, ColorPickerProps } from 'antd';
+
+type Color = GetProp<ColorPickerProps, 'value'>;
 
 const Demo: React.FC = () => {
   const { token } = theme.useToken();

components/config-provider/demo/direction.tsx

@@ -1,3 +1,4 @@
+import React, { useState } from 'react';
 import {
   DownloadOutlined,
   LeftOutlined,
@@ -7,8 +8,7 @@ import {
   SearchOutlined as SearchIcon,
   SmileOutlined,
 } from '@ant-design/icons';
-import React, { useState } from 'react';
-import type { RadioChangeEvent } from 'antd';
+import type { ConfigProviderProps, RadioChangeEvent } from 'antd';
 import {
   Badge,
   Button,
@@ -30,7 +30,8 @@ import {
   Tree,
   TreeSelect,
 } from 'antd';
-import type { DirectionType } from 'antd/es/config-provider';
+
+type DirectionType = ConfigProviderProps['direction'];
 
 const InputGroup = Input.Group;
 const ButtonGroup = Button.Group;

components/config-provider/demo/locale.tsx

@@ -1,36 +1,38 @@
-import { EllipsisOutlined } from '@ant-design/icons';
-import dayjs from 'dayjs';
 import React, { useState } from 'react';
-import type { RadioChangeEvent, TourProps, UploadFile } from 'antd';
+import { EllipsisOutlined } from '@ant-design/icons';
+import type { ConfigProviderProps, RadioChangeEvent, TourProps, UploadFile } from 'antd';
 import {
-  Upload,
-  Tour,
-  Input,
-  Form,
-  QRCode,
   Button,
   Calendar,
   ConfigProvider,
   DatePicker,
+  Divider,
+  Form,
+  Image,
+  Input,
+  InputNumber,
   Modal,
   Pagination,
   Popconfirm,
+  QRCode,
   Radio,
   Select,
   Space,
   Table,
   theme,
   TimePicker,
+  Tour,
   Transfer,
-  Image,
-  InputNumber,
-  Divider,
+  Upload,
 } from 'antd';
-import type { Locale } from 'antd/es/locale';
 import enUS from 'antd/locale/en_US';
 import zhCN from 'antd/locale/zh_CN';
+import dayjs from 'dayjs';
+
 import 'dayjs/locale/zh-cn';
 
+type Locale = ConfigProviderProps['locale'];
+
 dayjs.locale('en');
 
 const { Option } = Select;

components/config-provider/demo/size.tsx

@@ -12,7 +12,9 @@ import {
   Table,
   Tabs,
 } from 'antd';
-import type { SizeType } from 'antd/es/config-provider/SizeContext';
+import type { ConfigProviderProps } from 'antd';
+
+type SizeType = ConfigProviderProps['componentSize'];
 
 const { TabPane } = Tabs;
 

components/config-provider/demo/theme.tsx

@@ -10,7 +10,9 @@ import {
   Space,
   Switch,
 } from 'antd';
-import type { Color } from 'antd/es/color-picker';
+import type { ColorPickerProps, GetProp } from 'antd';
+
+type Color = Exclude<GetProp<ColorPickerProps, 'value'>, string>;
 
 type ThemeData = {
   borderRadius: number;

components/config-provider/demo/useConfig.tsx

@@ -1,6 +1,8 @@
 import React, { useState } from 'react';
 import { Checkbox, ConfigProvider, Divider, Form, Input, Radio, Space } from 'antd';
-import type { SizeType } from 'antd/es/config-provider/SizeContext';
+import type { ConfigProviderProps } from 'antd';
+
+type SizeType = ConfigProviderProps['componentSize'];
 
 const ConfigDisplay = () => {
   const { componentDisabled, componentSize } = ConfigProvider.useConfig();

components/config-provider/demo/wave.tsx

@@ -1,8 +1,9 @@
-import { HappyProvider } from '@ant-design/happy-work-theme';
 import React from 'react';
+import { HappyProvider } from '@ant-design/happy-work-theme';
 import { Button, ConfigProvider, Space } from 'antd';
+import type { ConfigProviderProps, GetProp } from 'antd';
 
-type WaveConfig = NonNullable<Parameters<typeof ConfigProvider>[0]['wave']>;
+type WaveConfig = GetProp<ConfigProviderProps, 'wave'>;
 
 // Prepare effect holder
 const createHolder = (node: HTMLElement) => {

components/date-picker/demo/disabled-date.tsx

@@ -1,8 +1,10 @@
 import React from 'react';
+import { DatePicker, Space } from 'antd';
+import type { GetProps } from 'antd';
 import dayjs from 'dayjs';
 import customParseFormat from 'dayjs/plugin/customParseFormat';
-import { DatePicker, Space } from 'antd';
-import type { RangePickerProps } from 'antd/es/date-picker';
+
+type RangePickerProps = GetProps<typeof DatePicker.RangePicker>;
 
 dayjs.extend(customParseFormat);
 

components/date-picker/demo/mode.tsx

@@ -1,8 +1,9 @@
 import React, { useState } from 'react';
-import type { Dayjs } from 'dayjs';
-import type { DatePickerProps } from 'antd';
+import type { DatePickerProps, GetProps } from 'antd';
 import { DatePicker, Space } from 'antd';
-import type { RangePickerProps } from 'antd/es/date-picker';
+import type { Dayjs } from 'dayjs';
+
+type RangePickerProps = GetProps<typeof DatePicker.RangePicker>;
 
 const { RangePicker } = DatePicker;
 

components/date-picker/demo/size.tsx

@@ -1,7 +1,8 @@
 import React, { useState } from 'react';
-import type { RadioChangeEvent } from 'antd';
+import type { ConfigProviderProps, RadioChangeEvent } from 'antd';
 import { DatePicker, Radio, Space } from 'antd';
-import type { SizeType } from 'antd/es/config-provider/SizeContext';
+
+type SizeType = ConfigProviderProps['componentSize'];
 
 const { RangePicker } = DatePicker;
 

components/date-picker/demo/time.tsx

@@ -1,6 +1,8 @@
 import React from 'react';
 import { DatePicker, Space } from 'antd';
-import type { DatePickerProps, RangePickerProps } from 'antd/es/date-picker';
+import type { DatePickerProps, GetProps } from 'antd';
+
+type RangePickerProps = GetProps<typeof DatePicker.RangePicker>;
 
 const { RangePicker } = DatePicker;
 

components/drawer/demo/extra.tsx

@@ -1,7 +1,6 @@
 import React, { useState } from 'react';
 import { Button, Drawer, Radio, Space } from 'antd';
-import type { DrawerProps } from 'antd/es/drawer';
-import type { RadioChangeEvent } from 'antd/es/radio';
+import type { DrawerProps, RadioChangeEvent } from 'antd';
 
 const App: React.FC = () => {
   const [open, setOpen] = useState(false);

components/drawer/demo/size.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { Button, Drawer, Space } from 'antd';
-import type { DrawerProps } from 'antd/es/drawer';
+import type { DrawerProps } from 'antd';
 
 const App: React.FC = () => {
   const [open, setOpen] = useState(false);

components/flex/demo/align.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import { Button, Flex, Segmented } from 'antd';
-import type { FlexProps } from 'antd';
-import type { SegmentedProps } from 'antd/es/segmented';
+import type { FlexProps, SegmentedProps } from 'antd';
 
 const boxStyle: React.CSSProperties = {
   width: '100%',

components/flex/demo/gap.tsx

@@ -1,6 +1,8 @@
 import React from 'react';
 import { Button, Flex, Radio, Slider } from 'antd';
-import type { SizeType } from 'antd/es/config-provider/SizeContext';
+import type { ConfigProviderProps } from 'antd';
+
+type SizeType = ConfigProviderProps['componentSize'];
 
 const App: React.FC = () => {
   const [gapSize, setGapSize] = React.useState<SizeType | 'customize'>('small');

components/float-button/demo/badge-debug.tsx

@@ -1,6 +1,8 @@
 import React, { useState } from 'react';
 import { ConfigProvider, FloatButton, Slider } from 'antd';
-import type { AliasToken } from 'antd/es/theme/interface';
+import type { ConfigProviderProps, GetProp } from 'antd';
+
+type AliasToken = GetProp<ConfigProviderProps, 'theme'>['token'];
 
 const App: React.FC = () => {
   const [radius, setRadius] = useState<number>(0);

components/form/demo/form-context.tsx

@@ -1,7 +1,9 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { SmileOutlined, UserOutlined } from '@ant-design/icons';
 import { Avatar, Button, Form, Input, InputNumber, Modal, Space, Typography } from 'antd';
-import type { FormInstance } from 'antd/es/form';
+import type { GetRef } from 'antd';
+
+type FormInstance = GetRef<typeof Form>;
 
 const layout = {
   labelCol: { span: 8 },

components/icon/demo/custom.tsx

@@ -1,7 +1,9 @@
 import React from 'react';
 import Icon, { HomeOutlined } from '@ant-design/icons';
-import type { CustomIconComponentProps } from '@ant-design/icons/lib/components/Icon';
 import { Space } from 'antd';
+import type { GetProps } from 'antd';
+
+type CustomIconComponentProps = GetProps<typeof Icon>;
 
 const HeartSvg = () => (
   <svg width="1em" height="1em" fill="currentColor" viewBox="0 0 1024 1024">

components/index.ts

@@ -1,4 +1,5 @@
 export type { Breakpoint } from './_util/responsiveObserver';
+export type { GetProps, GetRef, GetProp } from './_util/type';
 export { default as Affix } from './affix';
 export type { AffixProps } from './affix';
 export { default as Alert } from './alert';

components/mentions/demo/basic.tsx

@@ -1,6 +1,8 @@
 import React from 'react';
 import { Mentions } from 'antd';
-import type { MentionsOptionProps } from 'antd/es/mentions';
+import type { GetProp, MentionProps } from 'antd';
+
+type MentionsOptionProps = GetProp<MentionProps, 'options'>[number];
 
 const onChange = (value: string) => {
   console.log('Change:', value);

components/mentions/demo/status.tsx

@@ -1,6 +1,8 @@
 import React from 'react';
 import { Mentions, Space } from 'antd';
-import type { MentionsOptionProps } from 'antd/es/mentions';
+import type { GetProp, MentionProps } from 'antd';
+
+type MentionsOptionProps = GetProp<MentionProps, 'options'>[number];
 
 const onChange = (value: string) => {
   console.log('Change:', value);

components/menu/demo/menu-v4.tsx

@@ -1,3 +1,4 @@
+import React, { useState } from 'react';
 import {
   AppstoreOutlined,
   CalendarOutlined,
@@ -5,9 +6,8 @@ import {
   MailOutlined,
   SettingOutlined,
 } from '@ant-design/icons';
-import React, { useState } from 'react';
 import { ConfigProvider, Menu, Switch, Typography } from 'antd';
-import type { MenuProps } from 'antd/es/menu';
+import type { MenuProps } from 'antd';
 
 type MenuItem = Required<MenuProps>['items'][number];
 

components/menu/demo/switch-mode.tsx

@@ -7,9 +7,10 @@ import {
   SettingOutlined,
 } from '@ant-design/icons';
 import { Divider, Menu, Switch } from 'antd';
-import type { MenuProps, MenuTheme } from 'antd/es/menu';
+import type { GetProp, MenuProps } from 'antd';
 
-type MenuItem = Required<MenuProps>['items'][number];
+type MenuTheme = GetProp<MenuProps, 'theme'>;
+type MenuItem = GetProp<MenuProps, 'items'>[number];
 
 function getItem(
   label: React.ReactNode,

components/modal/demo/render-panel.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Button, Modal, Space, Typography } from 'antd';
-import type { ModalFuncProps } from 'antd/es/modal/interface';
+import type { ModalFuncProps } from 'antd';
 
 /** Test usage. Do not use in your production. */
 const { _InternalPanelDoNotUseOrYouWillBeFired: InternalPanel } = Modal;

components/notification/demo/hooks.tsx

@@ -1,12 +1,14 @@
+import React, { useMemo } from 'react';
 import {
   RadiusBottomleftOutlined,
   RadiusBottomrightOutlined,
   RadiusUpleftOutlined,
   RadiusUprightOutlined,
 } from '@ant-design/icons';
-import React, { useMemo } from 'react';
-import { Button, Divider, Space, notification } from 'antd';
-import type { NotificationPlacement } from 'antd/es/notification/interface';
+import { Button, Divider, notification, Space } from 'antd';
+import type { NotificationArgsProps } from 'antd';
+
+type NotificationPlacement = NotificationArgsProps['placement'];
 
 const Context = React.createContext({ name: 'Default' });
 

components/notification/demo/placement.tsx

@@ -8,7 +8,9 @@ import {
   RadiusUprightOutlined,
 } from '@ant-design/icons';
 import { Button, Divider, notification, Space } from 'antd';
-import type { NotificationPlacement } from 'antd/es/notification/interface';
+import type { NotificationArgsProps } from 'antd';
+
+type NotificationPlacement = NotificationArgsProps['placement'];
 
 const App: React.FC = () => {
   const [api, contextHolder] = notification.useNotification();

components/select/demo/custom-tag-render.tsx

@@ -1,10 +1,12 @@
 import React from 'react';
-import type { CustomTagProps } from 'rc-select/lib/BaseSelect';
 import { Select, Tag } from 'antd';
+import type { SelectProps } from 'antd';
+
+type TagRender = SelectProps['tagRender'];
 
 const options = [{ value: 'gold' }, { value: 'lime' }, { value: 'green' }, { value: 'cyan' }];
 
-const tagRender = (props: CustomTagProps) => {
+const tagRender: TagRender = (props) => {
   const { label, value, closable, onClose } = props;
   const onPreventMouseDown = (event: React.MouseEvent<HTMLSpanElement>) => {
     event.preventDefault();

components/select/demo/placement-debug.tsx

@@ -1,7 +1,8 @@
 import React, { useState } from 'react';
-import type { RadioChangeEvent } from 'antd';
+import type { RadioChangeEvent, SelectProps } from 'antd';
 import { Button, Radio, Select, Space, Switch } from 'antd';
-import type { SelectCommonPlacement } from 'antd/es/_util/motion';
+
+type SelectCommonPlacement = SelectProps['placement'];
 
 const randomOptions = (count?: number) => {
   const length = count ?? Math.floor(Math.random() * 5) + 1;

components/select/demo/placement.tsx

@@ -1,7 +1,8 @@
 import React, { useState } from 'react';
-import type { RadioChangeEvent } from 'antd';
+import type { RadioChangeEvent, SelectProps } from 'antd';
 import { Radio, Select } from 'antd';
-import type { SelectCommonPlacement } from 'antd/es/_util/motion';
+
+type SelectCommonPlacement = SelectProps['placement'];
 
 const App: React.FC = () => {
   const [placement, SetPlacement] = useState<SelectCommonPlacement>('topLeft');

components/select/demo/select-users.tsx

@@ -1,7 +1,7 @@
 import React, { useMemo, useRef, useState } from 'react';
-import debounce from 'lodash/debounce';
 import { Select, Spin } from 'antd';
-import type { SelectProps } from 'antd/es/select';
+import type { SelectProps } from 'antd';
+import debounce from 'lodash/debounce';
 
 export interface DebounceSelectProps<ValueType = any>
   extends Omit<SelectProps<ValueType | ValueType[]>, 'options' | 'children'> {

components/select/demo/size.tsx

@@ -1,7 +1,8 @@
 import React, { useState } from 'react';
 import { Radio, Select, Space } from 'antd';
-import type { SizeType } from 'antd/es/config-provider/SizeContext';
-import type { SelectProps, RadioChangeEvent } from 'antd';
+import type { ConfigProviderProps, RadioChangeEvent, SelectProps } from 'antd';
+
+type SizeType = ConfigProviderProps['componentSize'];
 
 const options: SelectProps['options'] = [];
 

components/slider/demo/mark.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import { Slider } from 'antd';
-import type { SliderMarks } from 'antd/es/slider';
+import type { SliderSingleProps } from 'antd';
 
-const marks: SliderMarks = {
+const marks: SliderSingleProps['marks'] = {
   0: '0°C',
   26: '26°C',
   37: '37°C',

components/slider/demo/vertical.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Slider } from 'antd';
-import type { SliderMarks } from 'antd/es/slider';
+import type { SliderSingleProps } from 'antd';
 
 const style: React.CSSProperties = {
   display: 'inline-block',
@@ -8,7 +8,7 @@ const style: React.CSSProperties = {
   marginLeft: 70,
 };
 
-const marks: SliderMarks = {
+const marks: SliderSingleProps['marks'] = {
   0: '0°C',
   26: '26°C',
   37: '37°C',

components/space/demo/size.tsx

@@ -1,6 +1,8 @@
 import React, { useState } from 'react';
 import { Button, Radio, Slider, Space } from 'antd';
-import type { SizeType } from 'antd/es/config-provider/SizeContext';
+import type { ConfigProviderProps } from 'antd';
+
+type SizeType = ConfigProviderProps['componentSize'];
 
 const App: React.FC = () => {
   const [size, setSize] = useState<SizeType | [SizeType, SizeType] | 'customize'>('small');

components/table/InternalTable.tsx

@@ -82,7 +82,7 @@ export interface InternalTableProps<RecordType> extends TableProps<RecordType> {
   _renderTimes: number;
 }
 
-export interface TableProps<RecordType>
+export interface TableProps<RecordType = any>
   extends Omit<
     RcTableProps<RecordType>,
     | 'transformColumns'

components/table/demo/ajax.tsx

@@ -1,8 +1,10 @@
 import React, { useEffect, useState } from 'react';
-import qs from 'qs';
 import { Table } from 'antd';
-import type { ColumnsType, TablePaginationConfig } from 'antd/es/table';
-import type { FilterValue, SorterResult } from 'antd/es/table/interface';
+import type { GetProp, TableProps } from 'antd';
+import qs from 'qs';
+
+type ColumnsType<T> = TableProps<T>['columns'];
+type TablePaginationConfig = Exclude<GetProp<TableProps, 'pagination'>, boolean>;
 
 interface DataType {
   name: {
@@ -20,7 +22,7 @@ interface TableParams {
   pagination?: TablePaginationConfig;
   sortField?: string;
   sortOrder?: string;
-  filters?: Record<string, FilterValue>;
+  filters?: Parameters<GetProp<TableProps, 'onChange'>>[1];
 }
 
 const columns: ColumnsType<DataType> = [
@@ -85,11 +87,7 @@ const App: React.FC = () => {
     fetchData();
   }, [JSON.stringify(tableParams)]);
 
-  const handleTableChange = (
-    pagination: TablePaginationConfig,
-    filters: Record<string, FilterValue>,
-    sorter: SorterResult<DataType>,
-  ) => {
+  const handleTableChange: TableProps['onChange'] = (pagination, filters, sorter) => {
     setTableParams({
       pagination,
       filters,

components/table/demo/basic.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Space, Table, Tag } from 'antd';
-import type { ColumnsType } from 'antd/es/table';
+import type { TableProps } from 'antd';
 
 interface DataType {
   key: string;
@@ -10,7 +10,7 @@ interface DataType {
   tags: string[];
 }
 
-const columns: ColumnsType<DataType> = [
+const columns: TableProps<DataType>['columns'] = [
   {
     title: 'Name',
     dataIndex: 'name',

components/table/demo/bordered.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Table } from 'antd';
-import type { ColumnsType } from 'antd/es/table';
+import type { TableProps } from 'antd';
 
 interface DataType {
   key: string;
@@ -9,7 +9,7 @@ interface DataType {
   address: string;
 }
 
-const columns: ColumnsType<DataType> = [
+const columns: TableProps<DataType>['columns'] = [
   {
     title: 'Name',
     dataIndex: 'name',

components/table/demo/colspan-rowspan.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Table } from 'antd';
-import type { ColumnsType } from 'antd/es/table';
+import type { TableProps } from 'antd';
 
 interface DataType {
   key: string;
@@ -21,7 +21,7 @@ const sharedOnCell = (_: DataType, index: number) => {
   return {};
 };
 
-const columns: ColumnsType<DataType> = [
+const columns: TableProps<DataType>['columns'] = [
   {
     title: 'RowHead',
     dataIndex: 'key',

components/table/demo/component-token.tsx

@@ -1,10 +1,14 @@
 import React, { useState } from 'react';
 import { DownOutlined } from '@ant-design/icons';
-import type { RadioChangeEvent } from 'antd';
-import { Form, Radio, Space, Switch, Table, ConfigProvider } from 'antd';
-import type { SizeType } from 'antd/es/config-provider/SizeContext';
-import type { ColumnsType, TableProps, TablePaginationConfig } from 'antd/es/table';
-import type { ExpandableConfig, TableRowSelection } from 'antd/es/table/interface';
+import type { ConfigProviderProps, GetProp, RadioChangeEvent, TableProps } from 'antd';
+import { ConfigProvider, Form, Radio, Space, Switch, Table } from 'antd';
+
+type SizeType = ConfigProviderProps['componentSize'];
+type ColumnsType<T extends object> = GetProp<TableProps<T>, 'columns'>;
+type TablePagination = Exclude<GetProp<TableProps, 'pagination'>, boolean>;
+type TablePaginationPosition = NonNullable<TablePagination['position']>[number];
+type ExpandableConfig<T extends object> = GetProp<TableProps<T>, 'expandable'>;
+type TableRowSelection<T extends object> = GetProp<TableProps<T>, 'rowSelection'>;
 
 interface DataType {
   key: number;
@@ -68,8 +72,6 @@ for (let i = 1; i <= 10; i++) {
   });
 }
 
-type TablePaginationPosition = NonNullable<TablePaginationConfig['position']>[number];
-
 const defaultExpandable = { expandedRowRender: (record: DataType) => <p>{record.description}</p> };
 const defaultTitle = () => 'Here is title';
 const defaultFooter = () => 'Here is footer';

components/table/demo/custom-filter-panel.tsx

@@ -1,10 +1,13 @@
-import { SearchOutlined } from '@ant-design/icons';
 import React, { useRef, useState } from 'react';
-import Highlighter from 'react-highlight-words';
-import type { InputRef } from 'antd';
+import { SearchOutlined } from '@ant-design/icons';
+import type { GetRef, TableColumnsType, TableColumnType } from 'antd';
 import { Button, Input, Space, Table } from 'antd';
-import type { ColumnType, ColumnsType } from 'antd/es/table';
-import type { FilterConfirmProps } from 'antd/es/table/interface';
+import Highlighter from 'react-highlight-words';
+
+type FilterDropdownType = Exclude<TableColumnType<DataType>['filterDropdown'], React.ReactNode>;
+type FilterConfirmProps = Parameters<FilterDropdownType>[0]['confirm'];
+
+type InputRef = GetRef<typeof Input>;
 
 interface DataType {
   key: string;
@@ -49,7 +52,7 @@ const App: React.FC = () => {
 
   const handleSearch = (
     selectedKeys: string[],
-    confirm: (param?: FilterConfirmProps) => void,
+    confirm: FilterConfirmProps,
     dataIndex: DataIndex,
   ) => {
     confirm();
@@ -62,7 +65,7 @@ const App: React.FC = () => {
     setSearchText('');
   };
 
-  const getColumnSearchProps = (dataIndex: DataIndex): ColumnType<DataType> => ({
+  const getColumnSearchProps = (dataIndex: DataIndex): TableColumnType<DataType> => ({
     filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters, close }) => (
       <div style={{ padding: 8 }} onKeyDown={(e) => e.stopPropagation()}>
         <Input
@@ -139,7 +142,7 @@ const App: React.FC = () => {
       ),
   });
 
-  const columns: ColumnsType<DataType> = [
+  const columns: TableColumnsType<DataType> = [
     {
       title: 'Name',
       dataIndex: 'name',

components/table/demo/dynamic-settings.tsx

@@ -1,10 +1,14 @@
 import React, { useState } from 'react';
 import { DownOutlined } from '@ant-design/icons';
-import type { RadioChangeEvent } from 'antd';
+import type { GetProp, RadioChangeEvent, TableProps } from 'antd';
 import { Form, Radio, Space, Switch, Table } from 'antd';
-import type { SizeType } from 'antd/es/config-provider/SizeContext';
-import type { ColumnsType, TableProps, TablePaginationConfig } from 'antd/es/table';
-import type { ExpandableConfig, TableRowSelection } from 'antd/es/table/interface';
+
+type SizeType = TableProps['size'];
+type ColumnsType<T extends object> = GetProp<TableProps<T>, 'columns'>;
+type TablePagination<T extends object> = NonNullable<Exclude<TableProps<T>['pagination'], boolean>>;
+type TablePaginationPosition = NonNullable<TablePagination<any>['position']>[number];
+type ExpandableConfig<T extends object> = TableProps<T>['expandable'];
+type TableRowSelection<T extends object> = TableProps<T>['rowSelection'];
 
 interface DataType {
   key: number;
@@ -14,8 +18,6 @@ interface DataType {
   description: string;
 }
 
-type TablePaginationPosition = NonNullable<TablePaginationConfig['position']>[number];
-
 const columns: ColumnsType<DataType> = [
   {
     title: 'Name',

components/table/demo/edit-cell.tsx

@@ -1,7 +1,9 @@
 import React, { useContext, useEffect, useRef, useState } from 'react';
-import type { InputRef } from 'antd';
+import type { GetRef } from 'antd';
 import { Button, Form, Input, Popconfirm, Table } from 'antd';
-import type { FormInstance } from 'antd/es/form';
+
+type InputRef = GetRef<typeof Input>;
+type FormInstance<T> = GetRef<typeof Form<T>>;
 
 const EditableContext = React.createContext<FormInstance<any> | null>(null);
 

components/table/demo/ellipsis-custom-tooltip.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Table, Tooltip } from 'antd';
-import type { ColumnsType } from 'antd/es/table';
+import type { TableColumnsType } from 'antd';
 
 interface DataType {
   key: React.Key;
@@ -9,7 +9,7 @@ interface DataType {
   address: string;
 }
 
-const columns: ColumnsType<DataType> = [
+const columns: TableColumnsType<DataType> = [
   {
     title: 'Name',
     dataIndex: 'name',

components/table/demo/ellipsis.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Table } from 'antd';
-import type { ColumnsType } from 'antd/es/table';
+import type { TableColumnsType } from 'antd';
 
 interface DataType {
   key: React.Key;
@@ -9,7 +9,7 @@ interface DataType {
   address: string;
 }
 
-const columns: ColumnsType<DataType> = [
+const columns: TableColumnsType<DataType> = [
   {
     title: 'Name',
     dataIndex: 'name',

components/table/demo/expand.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Table } from 'antd';
-import type { ColumnsType } from 'antd/es/table';
+import type { TableColumnsType } from 'antd';
 
 interface DataType {
   key: React.Key;
@@ -10,7 +10,7 @@ interface DataType {
   description: string;
 }
 
-const columns: ColumnsType<DataType> = [
+const columns: TableColumnsType<DataType> = [
   { title: 'Name', dataIndex: 'name', key: 'name' },
   { title: 'Age', dataIndex: 'age', key: 'age' },
   { title: 'Address', dataIndex: 'address', key: 'address' },

components/table/demo/filter-in-tree.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Table } from 'antd';
-import type { ColumnsType, TableProps } from 'antd/es/table';
+import type { TableColumnsType, TableProps } from 'antd';
 
 interface DataType {
   key: React.Key;
@@ -9,7 +9,7 @@ interface DataType {
   address: string;
 }
 
-const columns: ColumnsType<DataType> = [
+const columns: TableColumnsType<DataType> = [
   {
     title: 'Name',
     dataIndex: 'name',

components/table/demo/filter-search.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Table } from 'antd';
-import type { ColumnsType, TableProps } from 'antd/es/table';
+import type { TableColumnsType, TableProps } from 'antd';
 
 interface DataType {
   key: React.Key;
@@ -9,7 +9,7 @@ interface DataType {
   address: string;
 }
 
-const columns: ColumnsType<DataType> = [
+const columns: TableColumnsType<DataType> = [
   {
     title: 'Name',
     dataIndex: 'name',

components/table/demo/fixed-columns-header.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Table } from 'antd';
-import type { ColumnsType } from 'antd/es/table';
+import type { TableColumnsType } from 'antd';
 
 interface DataType {
   key: React.Key;
@@ -9,7 +9,7 @@ interface DataType {
   address: string;
 }
 
-const columns: ColumnsType<DataType> = [
+const columns: TableColumnsType<DataType> = [
   {
     title: 'Full Name',
     width: 100,

components/table/demo/fixed-columns.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Table } from 'antd';
-import type { ColumnsType } from 'antd/es/table';
+import type { TableColumnsType } from 'antd';
 
 interface DataType {
   key: React.Key;
@@ -9,7 +9,7 @@ interface DataType {
   address: string;
 }
 
-const columns: ColumnsType<DataType> = [
+const columns: TableColumnsType<DataType> = [
   {
     title: 'Full Name',
     width: 100,

components/table/demo/fixed-header.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Table } from 'antd';
-import type { ColumnsType } from 'antd/es/table';
+import type { TableColumnsType } from 'antd';
 
 interface DataType {
   key: React.Key;
@@ -9,7 +9,7 @@ interface DataType {
   address: string;
 }
 
-const columns: ColumnsType<DataType> = [
+const columns: TableColumnsType<DataType> = [
   {
     title: 'Name',
     dataIndex: 'name',

components/table/demo/grouping-columns.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Table } from 'antd';
-import type { ColumnsType } from 'antd/es/table';
+import type { TableColumnsType } from 'antd';
 
 interface DataType {
   key: React.Key;
@@ -14,7 +14,7 @@ interface DataType {
   gender: string;
 }
 
-const columns: ColumnsType<DataType> = [
+const columns: TableColumnsType<DataType> = [
   {
     title: 'Name',
     dataIndex: 'name',

components/table/demo/head.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Table } from 'antd';
-import type { ColumnsType, TableProps } from 'antd/es/table';
+import type { TableColumnsType, TableProps } from 'antd';
 
 interface DataType {
   key: React.Key;
@@ -9,7 +9,7 @@ interface DataType {
   address: string;
 }
 
-const columns: ColumnsType<DataType> = [
+const columns: TableColumnsType<DataType> = [
   {
     title: 'Name',
     dataIndex: 'name',

components/table/demo/multiple-sorter.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Table } from 'antd';
-import type { ColumnsType, TableProps } from 'antd/es/table';
+import type { TableColumnsType, TableProps } from 'antd';
 
 interface DataType {
   key: React.Key;
@@ -10,7 +10,7 @@ interface DataType {
   english: number;
 }
 
-const columns: ColumnsType<DataType> = [
+const columns: TableColumnsType<DataType> = [
   {
     title: 'Name',
     dataIndex: 'name',

components/table/demo/narrow.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Table } from 'antd';
-import type { ColumnsType } from 'antd/es/table';
+import type { TableColumnsType } from 'antd';
 
 interface DataType {
   key: React.Key;
@@ -9,7 +9,7 @@ interface DataType {
   address: string;
 }
 
-const columns: ColumnsType<DataType> = [
+const columns: TableColumnsType<DataType> = [
   {
     title: 'Name',
     dataIndex: 'name',

components/table/demo/order-column.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Table } from 'antd';
-import type { ColumnsType } from 'antd/es/table';
+import type { TableColumnsType } from 'antd';
 
 interface DataType {
   key: React.Key;
@@ -10,7 +10,7 @@ interface DataType {
   description: string;
 }
 
-const columns: ColumnsType<DataType> = [
+const columns: TableColumnsType<DataType> = [
   { title: 'Name', dataIndex: 'name', key: 'name' },
   Table.EXPAND_COLUMN,
   { title: 'Age', dataIndex: 'age', key: 'age' },

components/table/demo/pagination.tsx

@@ -1,6 +1,10 @@
 import React, { useState } from 'react';
 import { Radio, Space, Table, Tag } from 'antd';
-import type { ColumnsType, TablePaginationConfig } from 'antd/es/table';
+import type { TableProps } from 'antd';
+
+type ColumnsType<T extends object> = TableProps<T>['columns'];
+type TablePagination<T extends object> = NonNullable<Exclude<TableProps<T>['pagination'], boolean>>;
+type TablePaginationPosition = NonNullable<TablePagination<any>['position']>[number];
 
 interface DataType {
   key: string;
@@ -10,8 +14,6 @@ interface DataType {
   tags: string[];
 }
 
-type TablePaginationPosition = NonNullable<TablePaginationConfig['position']>[number];
-
 const topOptions = [
   { label: 'topLeft', value: 'topLeft' },
   { label: 'topCenter', value: 'topCenter' },

components/table/demo/reset-filter.tsx

@@ -1,7 +1,12 @@
 import React, { useState } from 'react';
-import type { TableProps } from 'antd';
+import type { TableColumnsType, TableProps } from 'antd';
 import { Button, Space, Table } from 'antd';
-import type { ColumnsType, FilterValue, SorterResult } from 'antd/es/table/interface';
+
+type OnChange = NonNullable<TableProps<DataType>['onChange']>;
+type Filters = Parameters<OnChange>[1];
+
+type GetSingle<T> = T extends (infer U)[] ? U : never;
+type Sorts = GetSingle<Parameters<OnChange>[2]>;
 
 interface DataType {
   key: string;
@@ -38,13 +43,13 @@ const data: DataType[] = [
 ];
 
 const App: React.FC = () => {
-  const [filteredInfo, setFilteredInfo] = useState<Record<string, FilterValue | null>>({});
-  const [sortedInfo, setSortedInfo] = useState<SorterResult<DataType>>({});
+  const [filteredInfo, setFilteredInfo] = useState<Filters>({});
+  const [sortedInfo, setSortedInfo] = useState<Sorts>({});
 
-  const handleChange: TableProps<DataType>['onChange'] = (pagination, filters, sorter) => {
+  const handleChange: OnChange = (pagination, filters, sorter) => {
     console.log('Various parameters', pagination, filters, sorter);
     setFilteredInfo(filters);
-    setSortedInfo(sorter as SorterResult<DataType>);
+    setSortedInfo(sorter as Sorts);
   };
 
   const clearFilters = () => {
@@ -63,7 +68,7 @@ const App: React.FC = () => {
     });
   };
 
-  const columns: ColumnsType<DataType> = [
+  const columns: TableColumnsType<DataType> = [
     {
       title: 'Name',
       dataIndex: 'name',

components/table/demo/resizable-column.tsx

@@ -1,8 +1,8 @@
 import React, { useState } from 'react';
+import { Table } from 'antd';
+import type { TableColumnsType } from 'antd';
 import type { ResizeCallbackData } from 'react-resizable';
 import { Resizable } from 'react-resizable';
-import { Table } from 'antd';
-import type { ColumnsType } from 'antd/es/table';
 
 interface DataType {
   key: React.Key;
@@ -45,7 +45,7 @@ const ResizableTitle = (
 };
 
 const App: React.FC = () => {
-  const [columns, setColumns] = useState<ColumnsType<DataType>>([
+  const [columns, setColumns] = useState<TableColumnsType<DataType>>([
     {
       title: 'Date',
       dataIndex: 'date',
@@ -98,7 +98,8 @@ const App: React.FC = () => {
   ];
 
   const handleResize: Function =
-    (index: number) => (_: React.SyntheticEvent<Element>, { size }: ResizeCallbackData) => {
+    (index: number) =>
+    (_: React.SyntheticEvent<Element>, { size }: ResizeCallbackData) => {
       const newColumns = [...columns];
       newColumns[index] = {
         ...newColumns[index],
@@ -107,9 +108,9 @@ const App: React.FC = () => {
       setColumns(newColumns);
     };
 
-  const mergeColumns: ColumnsType<DataType> = columns.map((col, index) => ({
+  const mergeColumns: TableColumnsType<DataType> = columns.map((col, index) => ({
     ...col,
-    onHeaderCell: (column: ColumnsType<DataType>[number]) => ({
+    onHeaderCell: (column: TableColumnsType<DataType>[number]) => ({
       width: column.width,
       onResize: handleResize(index) as React.ReactEventHandler<any>,
     }),

components/table/demo/responsive.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Table } from 'antd';
-import type { ColumnsType } from 'antd/es/table';
+import type { TableColumnsType } from 'antd';
 
 interface DataType {
   key: React.Key;
@@ -9,7 +9,7 @@ interface DataType {
   address: string;
 }
 
-const columns: ColumnsType<DataType> = [
+const columns: TableColumnsType<DataType> = [
   {
     title: 'Name (all screens)',
     dataIndex: 'name',

components/table/demo/row-selection-and-operation.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { Button, Table } from 'antd';
-import type { ColumnsType } from 'antd/es/table';
+import type { TableColumnsType } from 'antd';
 
 interface DataType {
   key: React.Key;
@@ -9,7 +9,7 @@ interface DataType {
   address: string;
 }
 
-const columns: ColumnsType<DataType> = [
+const columns: TableColumnsType<DataType> = [
   {
     title: 'Name',
     dataIndex: 'name',

components/table/demo/row-selection-custom-debug.tsx

@@ -1,14 +1,15 @@
 import React from 'react';
 import { Table } from 'antd';
-import type { ColumnsType } from 'antd/es/table';
-import type { TableRowSelection } from 'antd/es/table/interface';
+import type { TableColumnsType, TableProps } from 'antd';
+
+type TableRowSelection<T> = TableProps<T>['rowSelection'];
 
 interface DataType {
   key: React.Key;
   name: string;
 }
 
-const columns: ColumnsType<DataType> = [
+const columns: TableColumnsType<DataType> = [
   {
     title: 'Name',
     dataIndex: 'name',

components/table/demo/row-selection-custom.tsx

@@ -1,7 +1,8 @@
 import React, { useState } from 'react';
 import { Table } from 'antd';
-import type { ColumnsType } from 'antd/es/table';
-import type { TableRowSelection } from 'antd/es/table/interface';
+import type { TableColumnsType, TableProps } from 'antd';
+
+type TableRowSelection<T> = TableProps<T>['rowSelection'];
 
 interface DataType {
   key: React.Key;
@@ -10,7 +11,7 @@ interface DataType {
   address: string;
 }
 
-const columns: ColumnsType<DataType> = [
+const columns: TableColumnsType<DataType> = [
   {
     title: 'Name',
     dataIndex: 'name',

components/table/demo/row-selection-debug.tsx

@@ -1,7 +1,8 @@
 import React, { useState } from 'react';
-import { Table, InputNumber } from 'antd';
-import type { ColumnsType } from 'antd/es/table';
-import type { TableRowSelection } from 'antd/es/table/interface';
+import { InputNumber, Table } from 'antd';
+import type { TableColumnsType, TableProps } from 'antd';
+
+type TableRowSelection<T> = TableProps<T>['rowSelection'];
 
 const RenderTimes = () => {
   const timesRef = React.useRef(0);
@@ -19,7 +20,7 @@ interface DataType {
 
 const shouldCellUpdate = (record: any, prevRecord: any) => record !== prevRecord;
 
-const columns: ColumnsType<DataType> = [
+const columns: TableColumnsType<DataType> = [
   {
     title: 'Name',
     dataIndex: 'name',

components/table/demo/row-selection.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { Divider, Radio, Table } from 'antd';
-import type { ColumnsType } from 'antd/es/table';
+import type { TableColumnsType } from 'antd';
 
 interface DataType {
   key: React.Key;
@@ -9,7 +9,7 @@ interface DataType {
   address: string;
 }
 
-const columns: ColumnsType<DataType> = [
+const columns: TableColumnsType<DataType> = [
   {
     title: 'Name',
     dataIndex: 'name',

components/table/demo/selections-debug.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Table } from 'antd';
-import type { ColumnsType } from 'antd/es/table';
+import type { TableColumnsType } from 'antd';
 
 interface DataType {
   key: React.Key;
@@ -9,7 +9,7 @@ interface DataType {
   address: string;
 }
 
-const columns: ColumnsType<DataType> = [
+const columns: TableColumnsType<DataType> = [
   {
     title: 'Name',
     dataIndex: 'name',

components/table/demo/size.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import { Table, Divider } from 'antd';
-import type { ColumnsType } from 'antd/es/table';
+import { Divider, Table } from 'antd';
+import type { TableColumnsType } from 'antd';
 
 interface DataType {
   key: React.Key;
@@ -9,7 +9,7 @@ interface DataType {
   address: string;
 }
 
-const columns: ColumnsType<DataType> = [
+const columns: TableColumnsType<DataType> = [
   {
     title: 'Name',
     dataIndex: 'name',

components/table/demo/sticky.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { Switch, Table } from 'antd';
-import type { ColumnsType } from 'antd/es/table';
+import type { TableColumnsType } from 'antd';
 
 interface DataType {
   key: React.Key;
@@ -9,7 +9,7 @@ interface DataType {
   address: string;
 }
 
-const columns: ColumnsType<DataType> = [
+const columns: TableColumnsType<DataType> = [
   {
     title: 'Full Name',
     width: 100,

components/table/demo/summary.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Table, Typography } from 'antd';
-import type { ColumnsType } from 'antd/es/table';
+import type { TableColumnsType } from 'antd';
 
 const { Text } = Typography;
 
@@ -17,7 +17,7 @@ interface FixedDataType {
   description: string;
 }
 
-const columns: ColumnsType<DataType> = [
+const columns: TableColumnsType<DataType> = [
   {
     title: 'Name',
     dataIndex: 'name',
@@ -59,7 +59,7 @@ const data: DataType[] = [
   },
 ];
 
-const fixedColumns: ColumnsType<FixedDataType> = [
+const fixedColumns: TableColumnsType<FixedDataType> = [
   {
     title: 'Name',
     dataIndex: 'name',

components/table/demo/tree-data.tsx

@@ -1,7 +1,8 @@
 import React, { useState } from 'react';
 import { Space, Switch, Table } from 'antd';
-import type { ColumnsType } from 'antd/es/table';
-import type { TableRowSelection } from 'antd/es/table/interface';
+import type { TableColumnsType, TableProps } from 'antd';
+
+type TableRowSelection<T> = TableProps<T>['rowSelection'];
 
 interface DataType {
   key: React.ReactNode;
@@ -11,7 +12,7 @@ interface DataType {
   children?: DataType[];
 }
 
-const columns: ColumnsType<DataType> = [
+const columns: TableColumnsType<DataType> = [
   {
     title: 'Name',
     dataIndex: 'name',

components/table/demo/tree-table-ellipsis.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { Space, Switch, Table } from 'antd';
-import type { ColumnsType } from 'antd/es/table';
+import type { TableColumnsType } from 'antd';
 
 interface DataType {
   key: React.ReactNode;
@@ -78,7 +78,7 @@ const data: DataType[] = [
 const App: React.FC = () => {
   const [fixed, setFixed] = useState(true);
 
-  const columns: ColumnsType<DataType> = [
+  const columns: TableColumnsType<DataType> = [
     {
       title: 'Name',
       dataIndex: 'name',

components/tabs/demo/size.tsx

@@ -1,7 +1,8 @@
 import React, { useState } from 'react';
-import type { RadioChangeEvent } from 'antd';
+import type { ConfigProviderProps, RadioChangeEvent } from 'antd';
 import { Radio, Tabs } from 'antd';
-import type { SizeType } from 'antd/es/config-provider/SizeContext';
+
+type SizeType = ConfigProviderProps['componentSize'];
 
 const App: React.FC = () => {
   const [size, setSize] = useState<SizeType>('small');

components/transfer/demo/advanced.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import { Button, Transfer } from 'antd';
-import type { TransferDirection, TransferListProps } from 'antd/es/transfer';
+import type { TransferProps } from 'antd';
 
 interface RecordType {
   key: string;
@@ -40,13 +40,8 @@ const App: React.FC = () => {
     setTargetKeys(newTargetKeys);
   };
 
-  const renderFooter = (
-    _: TransferListProps<any>,
-    { direction }: {
-      direction: TransferDirection;
-    },
-  ) => {
-    if (direction === 'left') {
+  const renderFooter: TransferProps['footer'] = (_, info) => {
+    if (info?.direction === 'left') {
       return (
         <Button size="small" style={{ float: 'left', margin: 5 }} onClick={getMock}>
           Left button reload

components/transfer/demo/basic.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { Transfer } from 'antd';
-import type { TransferDirection } from 'antd/es/transfer';
+import type { TransferProps } from 'antd';
 
 interface RecordType {
   key: string;
@@ -20,7 +20,7 @@ const App: React.FC = () => {
   const [targetKeys, setTargetKeys] = useState(initialTargetKeys);
   const [selectedKeys, setSelectedKeys] = useState<string[]>([]);
 
-  const onChange = (nextTargetKeys: string[], direction: TransferDirection, moveKeys: string[]) => {
+  const onChange: TransferProps['onChange'] = (nextTargetKeys, direction, moveKeys) => {
     console.log('targetKeys:', nextTargetKeys);
     console.log('direction:', direction);
     console.log('moveKeys:', moveKeys);
@@ -33,7 +33,7 @@ const App: React.FC = () => {
     setSelectedKeys([...sourceSelectedKeys, ...targetSelectedKeys]);
   };
 
-  const onScroll = (direction: TransferDirection, e: React.SyntheticEvent<HTMLUListElement>) => {
+  const onScroll: TransferProps['onScroll'] = (direction, e) => {
     console.log('direction:', direction);
     console.log('target:', e.target);
   };

components/transfer/demo/component-token.tsx

@@ -1,9 +1,12 @@
 import React, { useState } from 'react';
 import { ConfigProvider, Space, Switch, Table, Tag, Transfer } from 'antd';
-import type { ColumnsType, TableRowSelection } from 'antd/es/table/interface';
-import type { TransferDirection, TransferItem, TransferProps } from 'antd/es/transfer';
+import type { GetProp, TableColumnsType, TableProps, TransferProps } from 'antd';
 import difference from 'lodash/difference';
 
+type TableRowSelection<T> = TableProps<T>['rowSelection'];
+
+type TransferItem = GetProp<TransferProps, 'dataSource'>[number];
+
 interface RecordType {
   key: string;
   title: string;
@@ -22,8 +25,8 @@ interface DataType {
 
 interface TableTransferProps extends TransferProps<TransferItem> {
   dataSource: DataType[];
-  leftColumns: ColumnsType<DataType>;
-  rightColumns: ColumnsType<DataType>;
+  leftColumns: TableColumnsType<DataType>;
+  rightColumns: TableColumnsType<DataType>;
 }
 
 // Customize Table Transfer
@@ -85,7 +88,7 @@ const mockData: RecordType[] = Array.from({ length: 20 }).map((_, i) => ({
   tag: mockTags[i % 3],
 }));
 
-const leftTableColumns: ColumnsType<DataType> = [
+const leftTableColumns: TableColumnsType<DataType> = [
   {
     dataIndex: 'title',
     title: 'Name',
@@ -101,7 +104,7 @@ const leftTableColumns: ColumnsType<DataType> = [
   },
 ];
 
-const rightTableColumns: ColumnsType<Pick<DataType, 'title'>> = [
+const rightTableColumns: TableColumnsType<Pick<DataType, 'title'>> = [
   {
     dataIndex: 'title',
     title: 'Name',
@@ -114,20 +117,23 @@ const App: React.FC = () => {
   const [targetKeys, setTargetKeys] = useState(initialTargetKeys);
   const [selectedKeys, setSelectedKeys] = useState<string[]>([]);
 
-  const onChange = (nextTargetKeys: string[], direction: TransferDirection, moveKeys: string[]) => {
+  const onChange: TransferProps['onChange'] = (nextTargetKeys, direction, moveKeys) => {
     console.log('targetKeys:', nextTargetKeys);
     console.log('direction:', direction);
     console.log('moveKeys:', moveKeys);
     setTargetKeys(nextTargetKeys);
   };
 
-  const onSelectChange = (sourceSelectedKeys: string[], targetSelectedKeys: string[]) => {
+  const onSelectChange: TransferProps['onSelectChange'] = (
+    sourceSelectedKeys,
+    targetSelectedKeys,
+  ) => {
     console.log('sourceSelectedKeys:', sourceSelectedKeys);
     console.log('targetSelectedKeys:', targetSelectedKeys);
     setSelectedKeys([...sourceSelectedKeys, ...targetSelectedKeys]);
   };
 
-  const onScroll = (direction: TransferDirection, e: React.SyntheticEvent<HTMLUListElement>) => {
+  const onScroll: TransferProps['onScroll'] = (direction, e) => {
     console.log('direction:', direction);
     console.log('target:', e.target);
   };

components/transfer/demo/custom-item.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import { Transfer } from 'antd';
-import type { TransferDirection } from 'antd/es/transfer';
+import type { TransferProps } from 'antd';
 
 interface RecordType {
   key: string;
@@ -36,11 +36,7 @@ const App: React.FC = () => {
     getMock();
   }, []);
 
-  const handleChange = (
-    newTargetKeys: string[],
-    direction: TransferDirection,
-    moveKeys: string[],
-  ) => {
+  const handleChange: TransferProps['onChange'] = (newTargetKeys, direction, moveKeys) => {
     console.log(newTargetKeys, direction, moveKeys);
     setTargetKeys(newTargetKeys);
   };

components/transfer/demo/custom-select-all-labels.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { Transfer } from 'antd';
-import type { SelectAllLabel } from 'antd/es/transfer';
+import type { TransferProps } from 'antd';
 
 interface RecordType {
   key: string;
@@ -16,7 +16,7 @@ const mockData: RecordType[] = Array.from({ length: 10 }).map((_, i) => ({
 
 const oriTargetKeys = mockData.filter((item) => Number(item.key) % 3 > 1).map((item) => item.key);
 
-const selectAllLabels: SelectAllLabel[] = [
+const selectAllLabels: TransferProps['selectAllLabels'] = [
   'Select All',
   ({ selectedCount, totalCount }) => `${selectedCount}/${totalCount}`,
 ];

components/transfer/demo/large-data.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import { Switch, Transfer } from 'antd';
-import type { TransferDirection } from 'antd/es/transfer';
+import type { TransferProps } from 'antd';
 
 interface RecordType {
   key: string;
@@ -34,7 +34,7 @@ const App: React.FC = () => {
     setMockData(newMockData);
   }, []);
 
-  const onChange = (newTargetKeys: string[], direction: TransferDirection, moveKeys: string[]) => {
+  const onChange: TransferProps['onChange'] = (newTargetKeys, direction, moveKeys) => {
     console.log(newTargetKeys, direction, moveKeys);
     setTargetKeys(newTargetKeys);
   };

components/transfer/demo/oneWay.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { Switch, Transfer } from 'antd';
-import type { TransferDirection } from 'antd/es/transfer';
+import type { TransferProps } from 'antd';
 
 interface RecordType {
   key: string;
@@ -23,11 +23,7 @@ const App: React.FC = () => {
   const [selectedKeys, setSelectedKeys] = useState<string[]>([]);
   const [disabled, setDisabled] = useState(false);
 
-  const handleChange = (
-    newTargetKeys: string[],
-    direction: TransferDirection,
-    moveKeys: string[],
-  ) => {
+  const handleChange: TransferProps['onChange'] = (newTargetKeys, direction, moveKeys) => {
     setTargetKeys(newTargetKeys);
 
     console.log('targetKeys: ', newTargetKeys);
@@ -42,10 +38,7 @@ const App: React.FC = () => {
     console.log('targetSelectedKeys: ', targetSelectedKeys);
   };
 
-  const handleScroll = (
-    direction: TransferDirection,
-    e: React.SyntheticEvent<HTMLUListElement, Event>,
-  ) => {
+  const handleScroll: TransferProps['onScroll'] = (direction, e) => {
     console.log('direction:', direction);
     console.log('target:', e.target);
   };

components/transfer/demo/search.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import { Transfer } from 'antd';
-import type { TransferDirection } from 'antd/es/transfer';
+import type { TransferProps } from 'antd';
 
 interface RecordType {
   key: string;
@@ -43,7 +43,7 @@ const App: React.FC = () => {
     setTargetKeys(newTargetKeys);
   };
 
-  const handleSearch = (dir: TransferDirection, value: string) => {
+  const handleSearch: TransferProps['onSearch'] = (dir, value) => {
     console.log('search:', dir, value);
   };
 

components/transfer/demo/table-transfer.tsx

@@ -1,9 +1,11 @@
 import React, { useState } from 'react';
 import { Space, Switch, Table, Tag, Transfer } from 'antd';
-import type { ColumnsType, TableRowSelection } from 'antd/es/table/interface';
-import type { TransferItem, TransferProps } from 'antd/es/transfer';
+import type { GetProp, TableColumnsType, TableProps, TransferProps } from 'antd';
 import difference from 'lodash/difference';
 
+type TransferItem = GetProp<TransferProps, 'dataSource'>[number];
+type TableRowSelection<T extends object> = TableProps<T>['rowSelection'];
+
 interface RecordType {
   key: string;
   title: string;
@@ -22,8 +24,8 @@ interface DataType {
 
 interface TableTransferProps extends TransferProps<TransferItem> {
   dataSource: DataType[];
-  leftColumns: ColumnsType<DataType>;
-  rightColumns: ColumnsType<DataType>;
+  leftColumns: TableColumnsType<DataType>;
+  rightColumns: TableColumnsType<DataType>;
 }
 
 // Customize Table Transfer
@@ -89,7 +91,7 @@ const originTargetKeys = mockData
   .filter((item) => Number(item.key) % 3 > 1)
   .map((item) => item.key);
 
-const leftTableColumns: ColumnsType<DataType> = [
+const leftTableColumns: TableColumnsType<DataType> = [
   {
     dataIndex: 'title',
     title: 'Name',
@@ -105,7 +107,7 @@ const leftTableColumns: ColumnsType<DataType> = [
   },
 ];
 
-const rightTableColumns: ColumnsType<Pick<DataType, 'title'>> = [
+const rightTableColumns: TableColumnsType<Pick<DataType, 'title'>> = [
   {
     dataIndex: 'title',
     title: 'Name',

components/transfer/demo/tree-transfer.tsx

@@ -1,19 +1,20 @@
 import React, { useState } from 'react';
 import { theme, Transfer, Tree } from 'antd';
-import type { TransferDirection, TransferItem } from 'antd/es/transfer';
-import type { DataNode } from 'antd/es/tree';
+import type { GetProp, TransferProps, TreeDataNode } from 'antd';
+
+type TransferItem = GetProp<TransferProps, 'dataSource'>[number];
 
 interface TreeTransferProps {
-  dataSource: DataNode[];
+  dataSource: TreeDataNode[];
   targetKeys: string[];
-  onChange: (targetKeys: string[], direction: TransferDirection, moveKeys: string[]) => void;
+  onChange: TransferProps['onChange'];
 }
 
 // Customize Table Transfer
 const isChecked = (selectedKeys: React.Key[], eventKey: React.Key) =>
   selectedKeys.includes(eventKey);
 
-const generateTree = (treeNodes: DataNode[] = [], checkedKeys: string[] = []): DataNode[] =>
+const generateTree = (treeNodes: TreeDataNode[] = [], checkedKeys: string[] = []): TreeDataNode[] =>
   treeNodes.map(({ children, ...props }) => ({
     ...props,
     disabled: checkedKeys.includes(props.key as string),
@@ -24,7 +25,7 @@ const TreeTransfer: React.FC<TreeTransferProps> = ({ dataSource, targetKeys, ...
   const { token } = theme.useToken();
 
   const transferDataSource: TransferItem[] = [];
-  function flatten(list: DataNode[] = []) {
+  function flatten(list: TreeDataNode[] = []) {
     list.forEach((item) => {
       transferDataSource.push(item as TransferItem);
       flatten(item.children);
@@ -68,7 +69,7 @@ const TreeTransfer: React.FC<TreeTransferProps> = ({ dataSource, targetKeys, ...
   );
 };
 
-const treeData: DataNode[] = [
+const treeData: TreeDataNode[] = [
   { key: '0-0', title: '0-0' },
   {
     key: '0-1',