type: type optimization (#38510)

components/_util/__tests__/util.test.tsx

@@ -152,7 +152,7 @@ describe('Test utils function', () => {
 
   describe('TransButton', () => {
     it('can be focus/blur', () => {
-      const ref = React.createRef<any>();
+      const ref = React.createRef<HTMLDivElement>();
       render(<TransButton ref={ref}>TransButton</TransButton>);
       expect(typeof ref.current?.focus).toBe('function');
       expect(typeof ref.current?.blur).toBe('function');

components/_util/__tests__/wave.test.tsx

@@ -174,7 +174,7 @@ describe('Wave component', () => {
   });
 
   it('bindAnimationEvent should return when node is null', () => {
-    const ref = React.createRef<any>();
+    const ref = React.createRef<Wave>();
     render(
       <Wave ref={ref}>
         <button type="button" disabled>
@@ -186,7 +186,7 @@ describe('Wave component', () => {
   });
 
   it('bindAnimationEvent.onClick should return when children is hidden', () => {
-    const ref = React.createRef<any>();
+    const ref = React.createRef<Wave>();
     render(
       <Wave ref={ref}>
         <button type="button" style={{ display: 'none' }}>
@@ -198,7 +198,7 @@ describe('Wave component', () => {
   });
 
   it('bindAnimationEvent.onClick should return when children is input', () => {
-    const ref = React.createRef<any>();
+    const ref = React.createRef<Wave>();
     render(
       <Wave ref={ref}>
         <input />

components/_util/wave.tsx

@@ -160,7 +160,7 @@ class Wave extends React.Component<WaveProps> {
       : `${getPrefixCls('')}-click-animating-without-extra-node`;
   }
 
-  bindAnimationEvent = (node: HTMLElement) => {
+  bindAnimationEvent = (node?: HTMLElement) => {
     if (
       !node ||
       !node.getAttribute ||

components/config-provider/__tests__/form.test.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { act } from 'react-dom/test-utils';
 import ConfigProvider from '..';
 import { render } from '../../../tests/utils';
+import type { FormInstance } from '../../form';
 import Form from '../../form';
 import zhCN from '../../locale/zh_CN';
 
@@ -16,7 +17,7 @@ describe('ConfigProvider.Form', () => {
 
   describe('form validateMessages', () => {
     const renderComponent = ({ validateMessages }: { validateMessages?: any }) => {
-      const formRef = React.createRef<any>();
+      const formRef = React.createRef<FormInstance>();
       const { container } = render(
         <ConfigProvider locale={zhCN} form={{ validateMessages }}>
           <Form ref={formRef} initialValues={{ age: 18 }}>

components/input/__tests__/focus.test.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 import Input from '..';
 import { fireEvent, render } from '../../../tests/utils';
 import type { InputRef } from '../Input';
+import type { TextAreaRef } from '../TextArea';
 
 const { TextArea } = Input;
 
@@ -49,7 +50,7 @@ describe('Input.Focus', () => {
   });
 
   it('all', () => {
-    const ref = React.createRef<any>();
+    const ref = React.createRef<TextAreaRef>();
     render(<TextArea ref={ref} defaultValue="light" />);
     ref.current!.focus({ cursor: 'all' });
 

components/layout/__tests__/index.test.tsx

@@ -317,12 +317,12 @@ describe('Sider', () => {
     ).toBeTruthy();
   });
 
-  ['Layout', 'Header', 'Footer', 'Sider'].forEach(tag => {
+  (['Layout', 'Header', 'Footer', 'Sider'] as const).forEach(tag => {
     const ComponentMap = { Layout, Header, Footer, Sider };
     it(`should get ${tag} element from ref`, () => {
-      const ref = React.createRef<any>();
+      const ref = React.createRef<HTMLDivElement>();
       const onSelect = jest.fn();
-      const Component = ComponentMap[tag as keyof typeof ComponentMap];
+      const Component = ComponentMap[tag];
       render(
         <Component onSelect={onSelect} ref={ref}>
           {tag}

components/transfer/__tests__/list.test.tsx

@@ -1,6 +1,8 @@
 import React from 'react';
+import type { KeyWiseTransferItem } from '..';
 import { render } from '../../../tests/utils';
 import type { TransferListProps } from '../list';
+import type TransferList from '../list';
 import List from '../list';
 
 const listCommonProps: TransferListProps<any> = {
@@ -34,18 +36,22 @@ describe('Transfer.List', () => {
   });
 
   it('when component has been unmounted, componentWillUnmount should be called', () => {
-    const instance = React.createRef<any>();
+    const instance = React.createRef<TransferList<KeyWiseTransferItem>>();
     const { unmount } = render(<List ref={instance} {...listCommonProps} />);
-    const willUnmount = jest.spyOn(instance.current, 'componentWillUnmount');
+    const willUnmount = jest.spyOn(instance.current!, 'componentWillUnmount');
     unmount();
     expect(willUnmount).toHaveBeenCalled();
   });
 
   it('when value is not exists, handleFilter should return', () => {
     const handleFilter = jest.fn();
-    const instance = React.createRef<any>();
+    const instance = React.createRef<TransferList<KeyWiseTransferItem>>();
     render(<List ref={instance} {...listCommonProps} handleFilter={handleFilter} />);
-    expect(instance.current?.handleFilter({ target: 'test' })).toBe(undefined);
+    expect(
+      instance.current?.handleFilter({
+        target: 'test',
+      } as unknown as React.ChangeEvent<HTMLInputElement>),
+    ).toBe(undefined);
     expect(handleFilter).toHaveBeenCalled();
   });
   it('should render correctly when dataSource is not exists', () => {

components/typography/__tests__/editable.test.tsx

@@ -44,7 +44,7 @@ describe('Typography.Editable', () => {
 
   it('should use editConfig.text over children in editing mode ', async () => {
     const suffix = '--The information is very important';
-    const ref = React.createRef<any>();
+    const ref = React.createRef<HTMLElement>();
     const { container: wrapper, unmount } = render(
       <Base
         ellipsis={{ rows: 1, suffix }}
@@ -65,7 +65,7 @@ describe('Typography.Editable', () => {
 
   it('should use children as the fallback of editConfig.text in editing mode', async () => {
     const suffix = '--The information is very important';
-    const ref = React.createRef<any>();
+    const ref = React.createRef<HTMLElement>();
     const { container: wrapper, unmount } = render(
       <Base ellipsis={{ rows: 1, suffix }} component="p" ref={ref} editable>
         {fullStr}

components/typography/__tests__/ellipsis.test.tsx

@@ -65,7 +65,7 @@ describe('Typography.Ellipsis', () => {
     'Bamboo is Little Light Bamboo is Little Light Bamboo is Little Light Bamboo is Little Light Bamboo is Little Light';
 
   it('should trigger update', async () => {
-    const ref = React.createRef<any>();
+    const ref = React.createRef<HTMLElement>();
     const onEllipsis = jest.fn();
     const { container, rerender, unmount } = render(
       <Base ellipsis={{ onEllipsis }} component="p" editable ref={ref}>
@@ -73,7 +73,7 @@ describe('Typography.Ellipsis', () => {
       </Base>,
     );
 
-    triggerResize(ref.current);
+    triggerResize(ref.current!);
     await waitFakeTimer();
 
     expect(container.firstChild?.textContent).toEqual('Bamboo is Little ...');
@@ -128,7 +128,7 @@ describe('Typography.Ellipsis', () => {
         design language for background applications, is refined by Ant UED Team.
         Ant Design, a design language for background applications, is refined by
         Ant UED Team.`;
-    const ref = React.createRef<any>();
+    const ref = React.createRef<HTMLElement>();
     const onEllipsis = jest.fn();
     const { container: wrapper, unmount } = render(
       <Base ellipsis={{ onEllipsis }} component="p" editable ref={ref}>
@@ -136,7 +136,7 @@ describe('Typography.Ellipsis', () => {
       </Base>,
     );
 
-    triggerResize(ref.current);
+    triggerResize(ref.current!);
     await waitFakeTimer();
 
     expect(wrapper.firstChild?.textContent).toEqual('Ant Design, a des...');
@@ -149,14 +149,14 @@ describe('Typography.Ellipsis', () => {
 
   it('should middle ellipsis', async () => {
     const suffix = '--suffix';
-    const ref = React.createRef<any>();
+    const ref = React.createRef<HTMLElement>();
     const { container: wrapper, unmount } = render(
       <Base ellipsis={{ rows: 1, suffix }} component="p" ref={ref}>
         {fullStr}
       </Base>,
     );
 
-    triggerResize(ref.current);
+    triggerResize(ref.current!);
     await waitFakeTimer();
 
     expect(wrapper.querySelector('p')?.textContent).toEqual('Bamboo is...--suffix');
@@ -165,7 +165,7 @@ describe('Typography.Ellipsis', () => {
 
   it('should front or middle ellipsis', async () => {
     const suffix = '--The information is very important';
-    const ref = React.createRef<any>();
+    const ref = React.createRef<HTMLElement>();
     const {
       container: wrapper,
       rerender,
@@ -176,7 +176,7 @@ describe('Typography.Ellipsis', () => {
       </Base>,
     );
 
-    triggerResize(ref.current);
+    triggerResize(ref.current!);
     await waitFakeTimer();
 
     expect(wrapper.querySelector('p')?.textContent).toEqual(
@@ -206,7 +206,7 @@ describe('Typography.Ellipsis', () => {
     const bamboo = 'Bamboo';
     const is = ' is ';
 
-    const ref = React.createRef<any>();
+    const ref = React.createRef<HTMLElement>();
     const { container: wrapper } = render(
       <Base ellipsis component="p" editable ref={ref}>
         {bamboo}
@@ -216,7 +216,7 @@ describe('Typography.Ellipsis', () => {
       </Base>,
     );
 
-    triggerResize(ref.current);
+    triggerResize(ref.current!);
     await waitFakeTimer();
 
     expect(wrapper.textContent).toEqual('Bamboo is Little...');
@@ -322,13 +322,13 @@ describe('Typography.Ellipsis', () => {
     });
 
     async function getWrapper(tooltip?: EllipsisConfig['tooltip']) {
-      const ref = React.createRef<any>();
+      const ref = React.createRef<HTMLElement>();
       const wrapper = render(
         <Base ellipsis={{ tooltip }} component="p" ref={ref}>
           {fullStr}
         </Base>,
       );
-      triggerResize(ref.current);
+      triggerResize(ref.current!);
       await waitFakeTimer();
       return wrapper;
     }
@@ -419,13 +419,13 @@ describe('Typography.Ellipsis', () => {
       },
     });
 
-    const ref = React.createRef<any>();
+    const ref = React.createRef<HTMLElement>();
     const { container, baseElement } = render(
       <Base component={undefined} ellipsis={{ tooltip: 'This is tooltip', rows: 2 }} ref={ref}>
         Ant Design, a design language for background applications, is refined by Ant UED Team.
       </Base>,
     );
-    triggerResize(ref.current);
+    triggerResize(ref.current!);
     await waitFakeTimer();
 
     fireEvent.mouseEnter(container.firstChild!);

components/upload/__tests__/uploadlist.test.tsx

@@ -956,7 +956,7 @@ describe('Upload List', () => {
           originFileObj: renderInstance(),
         };
         delete file.thumbUrl;
-        const ref = React.createRef();
+        const ref = React.createRef<any>();
         const { container: wrapper, unmount } = render(
           <Upload
             ref={ref}

site/theme/template/Content/ComponentOverview.jsx

@@ -50,7 +50,7 @@ const ComponentOverview = ({
   const [search, setSearch] = useState('');
 
   // keydown.enter goto first component
-  const sectionRef = React.createRef();
+  const sectionRef = React.useRef(null);
   const onKeyDown = event => {
     if (event.keyCode === 13 && search.trim().length) {
       sectionRef.current?.querySelector('.components-overview-card')?.click();