refactor(type): replace interface with type for export component (#39060)

components/breadcrumb/BreadcrumbItem.tsx

@@ -19,10 +19,10 @@ export interface BreadcrumbItemProps {
   /** @deprecated Please use `menu` instead */
   overlay?: DropdownProps['overlay'];
 }
-interface BreadcrumbItemInterface extends React.FC<BreadcrumbItemProps> {
+type CompoundedComponent = React.FC<BreadcrumbItemProps> & {
   __ANT_BREADCRUMB_ITEM: boolean;
-}
-const BreadcrumbItem: BreadcrumbItemInterface = (props) => {
+};
+const BreadcrumbItem: CompoundedComponent = (props) => {
   const {
     prefixCls: customizePrefixCls,
     separator = '/',

components/breadcrumb/BreadcrumbSeparator.tsx

@@ -1,12 +1,12 @@
 import * as React from 'react';
 import { ConfigContext } from '../config-provider';
 
-interface BreadcrumbSeparatorInterface extends React.FC<{ children?: React.ReactNode }> {
+type CompoundedComponent = React.FC<{ children?: React.ReactNode }> & {
   /** @internal */
   __ANT_BREADCRUMB_SEPARATOR: boolean;
-}
+};
 
-const BreadcrumbSeparator: BreadcrumbSeparatorInterface = ({ children }) => {
+const BreadcrumbSeparator: CompoundedComponent = ({ children }) => {
   const { getPrefixCls } = React.useContext(ConfigContext);
   const prefixCls = getPrefixCls('breadcrumb');
 

components/collapse/Collapse.tsx

@@ -50,11 +50,11 @@ interface PanelProps {
   collapsible?: CollapsibleType;
 }
 
-interface CollapseInterface extends React.FC<CollapseProps> {
+type CompoundedComponent = React.FC<CollapseProps> & {
   Panel: typeof CollapsePanel;
-}
+};
 
-const Collapse: CollapseInterface = (props) => {
+const Collapse: CompoundedComponent = (props) => {
   const { getPrefixCls, direction } = React.useContext(ConfigContext);
   const {
     prefixCls: customizePrefixCls,

components/dropdown/dropdown-button.tsx

@@ -28,12 +28,12 @@ export interface DropdownButtonProps extends ButtonGroupProps, DropdownProps {
   buttonsRender?: (buttons: React.ReactNode[]) => React.ReactNode[];
 }
 
-interface DropdownButtonInterface extends React.FC<DropdownButtonProps> {
+type CompoundedComponent = React.FC<DropdownButtonProps> & {
   /** @internal */
   __ANT_BUTTON: boolean;
-}
+};
 
-const DropdownButton: DropdownButtonInterface = (props) => {
+const DropdownButton: CompoundedComponent = (props) => {
   const {
     getPopupContainer: getContextPopupContainer,
     getPrefixCls,

components/dropdown/dropdown.tsx

@@ -82,12 +82,12 @@ export interface DropdownProps {
   onVisibleChange?: (open: boolean) => void;
 }
 
-interface DropdownInterface extends React.FC<DropdownProps> {
+type CompoundedComponent = React.FC<DropdownProps> & {
   Button: typeof DropdownButton;
   _InternalPanelDoNotUseOrYouWillBeFired: typeof WrapPurePanel;
-}
+};
 
-const Dropdown: DropdownInterface = (props) => {
+const Dropdown: CompoundedComponent = (props) => {
   const {
     getPopupContainer: getContextPopupContainer,
     getPrefixCls,

components/empty/index.tsx

@@ -25,12 +25,12 @@ export interface EmptyProps {
   children?: React.ReactNode;
 }
 
-interface EmptyType extends React.FC<EmptyProps> {
+type CompoundedComponent = React.FC<EmptyProps> & {
   PRESENTED_IMAGE_DEFAULT: React.ReactNode;
   PRESENTED_IMAGE_SIMPLE: React.ReactNode;
-}
+};
 
-const Empty: EmptyType = ({
+const Empty: CompoundedComponent = ({
   className,
   prefixCls: customizePrefixCls,
   image = defaultEmptyImg,

components/form/FormItem/index.tsx

@@ -393,11 +393,11 @@ function InternalFormItem<Values = any>(props: FormItemProps<Values>): React.Rea
 
 type InternalFormItemType = typeof InternalFormItem;
 
-interface FormItemInterface extends InternalFormItemType {
+type CompoundedComponent = InternalFormItemType & {
   useStatus: typeof useFormItemStatus;
-}
+};
 
-const FormItem = InternalFormItem as FormItemInterface;
+const FormItem = InternalFormItem as CompoundedComponent;
 FormItem.useStatus = useFormItemStatus;
 
 export default FormItem;

components/form/index.tsx

@@ -13,7 +13,7 @@ import useFormInstance from './hooks/useFormInstance';
 
 type InternalFormType = typeof InternalForm;
 
-interface FormInterface extends InternalFormType {
+type CompoundedComponent = InternalFormType & {
   useForm: typeof useForm;
   useFormInstance: typeof useFormInstance;
   useWatch: typeof useWatch;
@@ -24,9 +24,9 @@ interface FormInterface extends InternalFormType {
 
   /** @deprecated Only for warning usage. Do not use. */
   create: () => void;
-}
+};
 
-const Form = InternalForm as FormInterface;
+const Form = InternalForm as CompoundedComponent;
 
 Form.Item = Item;
 Form.List = List;

components/pagination/Select.tsx

@@ -2,12 +2,12 @@ import * as React from 'react';
 import type { SelectProps } from '../select';
 import Select from '../select';
 
-interface MiniOrMiddleSelectInterface extends React.FC<SelectProps> {
+type CompoundedComponent = React.FC<SelectProps> & {
   Option: typeof Select.Option;
-}
+};
 
-const MiniSelect: MiniOrMiddleSelectInterface = (props) => <Select {...props} size="small" />;
-const MiddleSelect: MiniOrMiddleSelectInterface = (props) => <Select {...props} size="middle" />;
+const MiniSelect: CompoundedComponent = (props) => <Select {...props} size="small" />;
+const MiddleSelect: CompoundedComponent = (props) => <Select {...props} size="middle" />;
 
 MiniSelect.Option = Select.Option;
 MiddleSelect.Option = Select.Option;

components/skeleton/Skeleton.tsx

@@ -16,7 +16,7 @@ import Title from './Title';
 import useStyle from './style';
 
 /* This only for skeleton internal. */
-interface SkeletonAvatarProps extends Omit<AvatarProps, 'active'> {}
+type SkeletonAvatarProps = Omit<AvatarProps, 'active'>;
 
 export interface SkeletonProps {
   active?: boolean;

components/statistic/Countdown.tsx

@@ -8,7 +8,7 @@ import { formatCountdown } from './utils';
 
 const REFRESH_INTERVAL = 1000 / 30;
 
-interface CountdownProps extends StatisticProps {
+export interface CountdownProps extends StatisticProps {
   value?: countdownValueType;
   format?: string;
   onFinish?: () => void;

components/statistic/Statistic.tsx

@@ -10,9 +10,9 @@ import type { FormatConfig, valueType } from './utils';
 
 import useStyle from './style';
 
-interface StatisticComponent {
+type CompoundedComponent = {
   Countdown: typeof Countdown;
-}
+};
 
 export interface StatisticProps extends FormatConfig {
   prefixCls?: string;
@@ -81,6 +81,6 @@ const Statistic: React.FC<StatisticProps & ConfigConsumerProps> = (props) => {
 
 const WrapperStatistic = withConfigConsumer<StatisticProps>({
   prefixCls: 'statistic',
-})<StatisticComponent>(Statistic);
+})<CompoundedComponent>(Statistic);
 
 export default WrapperStatistic;