diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
index 75eafde987..1fc87e596f 100644
--- a/.github/workflows/test.yml
+++ b/.github/workflows/test.yml
@@ -205,12 +205,18 @@ jobs:
         if: ${{ matrix.module == 'dom' }}
         run: npm test -- --maxWorkers=2 --shard=${{matrix.shard}} --coverage
 
-      - name: coverage
-        uses: codecov/codecov-action@v3
+      - name: persist coverages
         if: ${{ matrix.module == 'dom' && matrix.react == '17' }}
+        run: |
+          mkdir persist-coverage
+          mv coverage/coverage-final.json persist-coverage/react-${{matrix.react}}-test-${{matrix.module}}-${{strategy.job-index}}.json
+
+      - uses: actions/upload-artifact@v3
+        if: ${{ matrix.module == 'dom' && matrix.react == '17' }}
+        name: upload coverages
         with:
-          # use own token to upload coverage reports
-          token: ${{ secrets.CODECOV_TOKEN }}
+          name: coverage-artifacts
+          path: persist-coverage/
 
       # node test
       - name: node test
@@ -225,6 +231,28 @@ jobs:
           LIB_DIR: dist
     needs: [setup, dist]
 
+  ############################ Test Coverage ###########################
+  upload-test-coverage:
+    name: test-coverage
+    runs-on: ubuntu-latest
+    needs: [normal-test]
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/download-artifact@v3
+        with:
+          name: coverage-artifacts
+          path: persist-coverage
+      - name: Merge Code Coverage
+        run: |
+          npx nyc merge persist-coverage/ coverage/coverage-final.json
+          npx nyc report --reporter text -t coverage --report-dir coverage
+          rm -rf persist-coverage
+      - name: Upload coverage to codecov
+        uses: codecov/codecov-action@v3
+        with:
+          # use own token to upload coverage reports
+          token: ${{ secrets.CODECOV_TOKEN }}
+
   ########################### Compile & Test ###########################
   compile:
     runs-on: ubuntu-latest
diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
index e7e05bfc6a..f96db93e9f 100644
--- a/CHANGELOG.en-US.md
+++ b/CHANGELOG.en-US.md
@@ -15,6 +15,37 @@ timeline: true
 
 ---
 
+## 4.23.0
+
+`2022-09-04`
+
+- 🆕 Tooltip support nested Fragment child nodes to display bubbles. [#37045](https://github.com/ant-design/ant-design/pull/37045) [@HQ-Lin](https://github.com/HQ-Lin)
+- 🆕 Dropdown.Button support `danger` props. [#36810](https://github.com/ant-design/ant-design/pull/36810) [@nuintun](https://github.com/nuintun)
+- 🆕 Input.TextArea add `value` parameter to `showCount.formatter`. [#36793](https://github.com/ant-design/ant-design/pull/36793) [@JarvisArt](https://github.com/JarvisArt)
+- 🆕 Table support `expandable.columnTitle` now. [#36794](https://github.com/ant-design/ant-design/pull/36794) [@losgif](https://github.com/losgif)
+- Deprecate `visible` in all components and change to `open`.
+  - 🛠 Dropdown changes `visible` to `open`. [#37232](https://github.com/ant-design/ant-design/pull/37232) [@yykoypj](https://github.com/yykoypj)
+  - 🛠 Modal changes `visible` to `open`. [#37084](https://github.com/ant-design/ant-design/pull/37084) [@yykoypj](https://github.com/yykoypj)
+  - 🛠 Drawer changes `visible` to `open`. [#37047](https://github.com/ant-design/ant-design/pull/37047) [@yykoypj](https://github.com/yykoypj)
+  - 🛠 Table changes `filterDropdownVisible` to `filterDropdownOpen`. [#37026](https://github.com/ant-design/ant-design/pull/37026) [@yykoypj](https://github.com/yykoypj)
+  - 🛠 Slider add `tooltip` prop for all props related with Tooltip. [#37000](https://github.com/ant-design/ant-design/pull/37000) [@yykoypj](https://github.com/yykoypj)
+  - 🛠 Tooltip Popover and Popconfirm change `visible` to `open`. [#37241](https://github.com/ant-design/ant-design/pull/37241) [@yykoypj](https://github.com/yykoypj)
+  - 🛠 Remove `visible` prop of Tag. [#36934](https://github.com/ant-design/ant-design/pull/36934) [@yykoypj](https://github.com/yykoypj)
+- 🛠 Deprecate `dropdownClassName` prop of all components and change to `popupClassName`. [#36880](https://github.com/ant-design/ant-design/pull/36880) [@heiyu4585](https://github.com/heiyu4585)
+- 🛠 Tabs support `items` props and origin jsx usage will be depreacted. [#36889](https://github.com/ant-design/ant-design/pull/36889)
+- 🐞 Fix that some css variables are not consistent with less variables.
+  - [#37064](https://github.com/ant-design/ant-design/pull/37064) [@TrickyPi](https://github.com/TrickyPi)
+  - [#37304](https://github.com/ant-design/ant-design/pull/37304) [@peritot](https://github.com/peritot)
+- 🐞 Fix Menu disabled item focus style. [#37332](https://github.com/ant-design/ant-design/pull/37332)
+- 💄 `@border-radius-sm` should not follow `@border-radius-base` by default. [#37309](https://github.com/ant-design/ant-design/pull/37309)
+- 💄 add `@slider-handle-margin-left` to custom type. [#37001](https://github.com/ant-design/ant-design/pull/37001) [@alanhaledc](https://github.com/alanhaledc)
+- 💄 Replace Tabs with fade switch motion to import switch experience. [#36943](https://github.com/ant-design/ant-design/pull/36943)
+- ⌨️ Improve Form validation accessibility experience. [#36762](https://github.com/ant-design/ant-design/pull/36762) [@VladimirOtroshchenko](https://github.com/VladimirOtroshchenko)
+- 🌐 Add missing translations for filterCheckall in ru_RU. [#37311](https://github.com/ant-design/ant-design/pull/37311) [@HelLuv](https://github.com/HelLuv)
+- 🌐 Add missing translations in `cs_CZ`. [#37388](https://github.com/ant-design/ant-design/pull/37388) [@ZdenekKrcal](https://github.com/ZdenekKrcal)
+
+---
+
 ## 4.22.8
 
 `2022-08-26`
diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
index 6bbaa24748..cf6b448e21 100644
--- a/CHANGELOG.zh-CN.md
+++ b/CHANGELOG.zh-CN.md
@@ -15,6 +15,37 @@ timeline: true
 
 ---
 
+## 4.23.0
+
+`2022-09-04`
+
+- 🆕 Tooltip 支持 Fragment 子节点展示气泡。[#37045](https://github.com/ant-design/ant-design/pull/37045) [@HQ-Lin](https://github.com/HQ-Lin)
+- 🆕 Dropdown.Button 支持 `danger` 样式。[#36810](https://github.com/ant-design/ant-design/pull/36810) [@nuintun](https://github.com/nuintun)
+- 🆕 Input.TextArea 组件 `showCount.formatter` API 添加 `value` 参数。[#36793](https://github.com/ant-design/ant-design/pull/36793) [@JarvisArt](https://github.com/JarvisArt)
+- 🆕 Table 新增 `expandable.columnTitle` 属性以支持自定义展开列表头。[#36794](https://github.com/ant-design/ant-design/pull/36794) [@losgif](https://github.com/losgif)
+- 🛠 废弃所有弹窗组件的 `visible` 属性，统一为 `open`。
+  - 🛠 Dropdown 的 `visible` 改为 `open`。[#37232](https://github.com/ant-design/ant-design/pull/37232) [@yykoypj](https://github.com/yykoypj)
+  - 🛠 Modal 组件的 `visible` 改为 `open`。[#37084](https://github.com/ant-design/ant-design/pull/37084) [@yykoypj](https://github.com/yykoypj)
+  - 🛠 Drawer 的 `visible` 改为 `open`。[#37047](https://github.com/ant-design/ant-design/pull/37047) [@yykoypj](https://github.com/yykoypj)
+  - 🛠 Table 组件 `columns` 中的 `filterDropdownVisible` 改为 `filterDropdownOpen`。[#37026](https://github.com/ant-design/ant-design/pull/37026) [@yykoypj](https://github.com/yykoypj)
+  - 🛠 Tooltip, Popover 和 Popconfirm 中的 `visible` 改为 `open`。[#37241](https://github.com/ant-design/ant-design/pull/37241) [@yykoypj](https://github.com/yykoypj)
+  - 🛠 Slider 的 `tooltip` 相关属性合并到 `tooltip` 属性中。[#37000](https://github.com/ant-design/ant-design/pull/37000) [@yykoypj](https://github.com/yykoypj)
+  - 🛠 移除 Tag 组件的 `visible` 属性。[#36934](https://github.com/ant-design/ant-design/pull/36934) [@yykoypj](https://github.com/yykoypj)
+- 🛠 废弃所有组件的 `dropdownClassName`，统一为 `popupClassName`。[#36880](https://github.com/ant-design/ant-design/pull/36880) [@heiyu4585](https://github.com/heiyu4585)
+- 🛠 Tabs 支持 `items` 属性，并且废弃原 jsx 语法糖用法。[#36889](https://github.com/ant-design/ant-design/pull/36889)
+- 🐞 修复 css 变量与 less 变量不一致的问题。
+  - [#37064](https://github.com/ant-design/ant-design/pull/37064) [@TrickyPi](https://github.com/TrickyPi)
+  - [#37304](https://github.com/ant-design/ant-design/pull/37304) [@peritot](https://github.com/peritot)
+- 🐞 修复 Menu 禁用项依然有 focus 样式的问题。[#37332](https://github.com/ant-design/ant-design/pull/37332)
+- 💄 `@border-radius-sm` 变量默认值不与 `@border-radius-base` 关联，以修复 Checkbox 等组件圆角样式异常。[#37309](https://github.com/ant-design/ant-design/pull/37309)
+- 💄 支持使用 `@slider-handle-margin-left` 定制样式。[#37001](https://github.com/ant-design/ant-design/pull/37001) [@alanhaledc](https://github.com/alanhaledc)
+- 💄 替换 Tabs 切换样式为渐隐过渡，以提升在切换时的体验。[#36943](https://github.com/ant-design/ant-design/pull/36943)
+- ⌨️ 改进 Form 校验无障碍体验。[#36762](https://github.com/ant-design/ant-design/pull/36762) [@VladimirOtroshchenko](https://github.com/VladimirOtroshchenko)
+- 🌐 补全 `ru_RU` 中 `filterCheckall` 的翻译。[#37311](https://github.com/ant-design/ant-design/pull/37311) [@HelLuv](https://github.com/HelLuv)
+- 🌐 补全 `cs_CZ` 的翻译。[#37388](https://github.com/ant-design/ant-design/pull/37388) [@ZdenekKrcal](https://github.com/ZdenekKrcal)
+
+---
+
 ## 4.22.8
 
 `2022-08-26`
diff --git a/components/__tests__/__snapshots__/index.test.js.snap b/components/__tests__/__snapshots__/index.test.ts.snap
similarity index 100%
rename from components/__tests__/__snapshots__/index.test.js.snap
rename to components/__tests__/__snapshots__/index.test.ts.snap
diff --git a/components/__tests__/index.test.js b/components/__tests__/index.test.ts
similarity index 100%
rename from components/__tests__/index.test.js
rename to components/__tests__/index.test.ts
diff --git a/components/affix/__tests__/Affix.test.tsx b/components/affix/__tests__/Affix.test.tsx
index 5d3b0473d2..bd37d46298 100644
--- a/components/affix/__tests__/Affix.test.tsx
+++ b/components/affix/__tests__/Affix.test.tsx
@@ -1,11 +1,9 @@
-import type { ReactWrapper } from 'enzyme';
-import { mount } from 'enzyme';
 import React from 'react';
-import type { AffixProps, AffixState, InternalAffixClass } from '..';
+import type { InternalAffixClass } from '..';
 import Affix from '..';
 import accessibilityTest from '../../../tests/shared/accessibilityTest';
 import rtlTest from '../../../tests/shared/rtlTest';
-import { render, sleep } from '../../../tests/utils';
+import { render, sleep, triggerResize } from '../../../tests/utils';
 import Button from '../../button';
 import { getObserverEntities } from '../utils';
 
@@ -16,11 +14,10 @@ class AffixMounter extends React.Component<{
   offsetTop?: number;
   onTestUpdatePosition?(): void;
   onChange?: () => void;
+  getInstance?: (inst: InternalAffixClass) => void;
 }> {
   private container: HTMLDivElement;
 
-  public affix: React.Component<AffixProps, AffixState>;
-
   componentDidMount() {
     this.container.addEventListener = jest
       .fn()
@@ -32,6 +29,7 @@ class AffixMounter extends React.Component<{
   getTarget = () => this.container;
 
   render() {
+    const { getInstance, ...restProps } = this.props;
     return (
       <div
         ref={node => {
@@ -43,9 +41,9 @@ class AffixMounter extends React.Component<{
           className="fixed"
           target={this.getTarget}
           ref={ele => {
-            this.affix = ele!;
+            getInstance?.(ele!);
           }}
-          {...this.props}
+          {...restProps}
         >
           <Button type="primary">Fixed at the top of container</Button>
         </Affix>
@@ -59,7 +57,6 @@ describe('Affix Render', () => {
   accessibilityTest(Affix);
 
   const domMock = jest.spyOn(HTMLElement.prototype, 'getBoundingClientRect');
-  let affixMounterWrapper: ReactWrapper<unknown, unknown, AffixMounter>;
 
   const classRect: Record<string, DOMRect> = {
     container: {
@@ -194,34 +191,43 @@ describe('Affix Render', () => {
   });
 
   describe('updatePosition when size changed', () => {
-    it.each([
-      { name: 'inner', index: 0 },
-      { name: 'outer', index: 1 },
-    ])('inner or outer', async ({ index }) => {
+    it('add class automatically', async () => {
       document.body.innerHTML = '<div id="mounter" />';
 
-      const updateCalled = jest.fn();
-      affixMounterWrapper = mount(
-        <AffixMounter offsetBottom={0} onTestUpdatePosition={updateCalled} />,
+      let affixInstance: InternalAffixClass | null = null;
+      render(
+        <AffixMounter
+          getInstance={inst => {
+            affixInstance = inst;
+          }}
+          offsetBottom={0}
+        />,
         {
-          attachTo: document.getElementById('mounter'),
+          container: document.getElementById('mounter')!,
         },
       );
 
       await sleep(20);
-
       await movePlaceholder(300);
-      expect(
-        (affixMounterWrapper.find(AffixMounter).instance() as any).affix.state.affixStyle,
-      ).toBeTruthy();
-      await sleep(20);
-      affixMounterWrapper.update();
+      expect(affixInstance!.state.affixStyle).toBeTruthy();
+    });
+
+    // Trigger inner and outer element for the two <ResizeObserver>s.
+    it.each([
+      { selector: '.ant-btn' }, // inner
+      { selector: '.fixed' }, // outer
+    ])('trigger listener when size change', async ({ selector }) => {
+      const updateCalled = jest.fn();
+      const { container } = render(
+        <AffixMounter offsetBottom={0} onTestUpdatePosition={updateCalled} />,
+        {
+          container: document.getElementById('mounter')!,
+        },
+      );
 
-      // Mock trigger resize
       updateCalled.mockReset();
-      (affixMounterWrapper as any).triggerResize(index);
+      triggerResize(container.querySelector(selector)!);
       await sleep(20);
-
       expect(updateCalled).toHaveBeenCalled();
     });
   });
diff --git a/components/auto-complete/__tests__/__snapshots__/demo.test.js.snap b/components/auto-complete/__tests__/__snapshots__/demo.test.ts.snap
similarity index 100%
rename from components/auto-complete/__tests__/__snapshots__/demo.test.js.snap
rename to components/auto-complete/__tests__/__snapshots__/demo.test.ts.snap
diff --git a/components/auto-complete/__tests__/demo.test.js b/components/auto-complete/__tests__/demo.test.ts
similarity index 100%
rename from components/auto-complete/__tests__/demo.test.js
rename to components/auto-complete/__tests__/demo.test.ts
diff --git a/components/auto-complete/__tests__/focus.test.js b/components/auto-complete/__tests__/focus.test.tsx
similarity index 74%
rename from components/auto-complete/__tests__/focus.test.js
rename to components/auto-complete/__tests__/focus.test.tsx
index 4303b0f94d..032d0e90e9 100644
--- a/components/auto-complete/__tests__/focus.test.js
+++ b/components/auto-complete/__tests__/focus.test.tsx
@@ -8,7 +8,7 @@ describe('AutoComplete children could be focus', () => {
     jest.useFakeTimers();
   });
 
-  let container;
+  let container: HTMLDivElement;
   beforeEach(() => {
     container = document.createElement('div');
     document.body.appendChild(container);
@@ -24,10 +24,8 @@ describe('AutoComplete children could be focus', () => {
 
   it('focus() and onFocus', () => {
     const handleFocus = jest.fn();
-    const { container: wrapper } = render(<AutoComplete onFocus={handleFocus} />, {
-      attachTo: container,
-    });
-    wrapper.querySelector('input').focus();
+    const { container: wrapper } = render(<AutoComplete onFocus={handleFocus} />, { container });
+    wrapper.querySelector('input')?.focus();
     act(() => {
       jest.runAllTimers();
     });
@@ -36,14 +34,12 @@ describe('AutoComplete children could be focus', () => {
 
   it('blur() and onBlur', () => {
     const handleBlur = jest.fn();
-    const { container: wrapper } = render(<AutoComplete onBlur={handleBlur} />, {
-      attachTo: container,
-    });
-    wrapper.querySelector('input').focus();
+    const { container: wrapper } = render(<AutoComplete onBlur={handleBlur} />, { container });
+    wrapper.querySelector('input')?.focus();
     act(() => {
       jest.runAllTimers();
     });
-    wrapper.querySelector('input').blur();
+    wrapper.querySelector('input')?.blur();
     act(() => {
       jest.runAllTimers();
     });
@@ -61,17 +57,13 @@ describe('AutoComplete children could be focus', () => {
   });
 
   it('child.ref instance should support be focused and blured', () => {
-    let inputRef;
+    const inputRef = React.createRef<HTMLInputElement>();
     render(
       <AutoComplete dataSource={[]}>
-        <input
-          ref={node => {
-            inputRef = node;
-          }}
-        />
+        <input ref={inputRef} />
       </AutoComplete>,
     );
-    expect(typeof inputRef.focus).toBe('function');
-    expect(typeof inputRef.blur).toBe('function');
+    expect(typeof inputRef.current?.focus).toBe('function');
+    expect(typeof inputRef.current?.blur).toBe('function');
   });
 });
diff --git a/components/back-top/__tests__/__snapshots__/demo.test.js.snap b/components/back-top/__tests__/__snapshots__/demo.test.ts.snap
similarity index 100%
rename from components/back-top/__tests__/__snapshots__/demo.test.js.snap
rename to components/back-top/__tests__/__snapshots__/demo.test.ts.snap
diff --git a/components/back-top/__tests__/__snapshots__/index.test.js.snap b/components/back-top/__tests__/__snapshots__/index.test.tsx.snap
similarity index 100%
rename from components/back-top/__tests__/__snapshots__/index.test.js.snap
rename to components/back-top/__tests__/__snapshots__/index.test.tsx.snap
diff --git a/components/back-top/__tests__/demo.test.js b/components/back-top/__tests__/demo.test.ts
similarity index 100%
rename from components/back-top/__tests__/demo.test.js
rename to components/back-top/__tests__/demo.test.ts
diff --git a/components/back-top/__tests__/index.test.js b/components/back-top/__tests__/index.test.tsx
similarity index 79%
rename from components/back-top/__tests__/index.test.js
rename to components/back-top/__tests__/index.test.tsx
index 2a0422c279..0ff9cea619 100644
--- a/components/back-top/__tests__/index.test.js
+++ b/components/back-top/__tests__/index.test.tsx
@@ -10,14 +10,14 @@ describe('BackTop', () => {
 
   it('should scroll to top after click it', async () => {
     const { container } = render(<BackTop visibilityHeight={-1} />);
-    const scrollToSpy = jest.spyOn(window, 'scrollTo').mockImplementation((x, y) => {
+    const scrollToSpy = jest.spyOn(window, 'scrollTo').mockImplementation((_, y) => {
       window.scrollY = y;
       window.pageYOffset = y;
       document.documentElement.scrollTop = y;
     });
     window.scrollTo(0, 400);
     expect(document.documentElement.scrollTop).toBe(400);
-    fireEvent.click(container.querySelector('.ant-back-top'));
+    fireEvent.click(container.querySelector('.ant-back-top')!);
     await sleep(500);
     expect(document.documentElement.scrollTop).toBe(0);
     scrollToSpy.mockRestore();
@@ -26,23 +26,21 @@ describe('BackTop', () => {
   it('support onClick', async () => {
     const onClick = jest.fn();
     const { container } = render(<BackTop onClick={onClick} visibilityHeight={-1} />);
-    const scrollToSpy = jest.spyOn(window, 'scrollTo').mockImplementation((x, y) => {
+    const scrollToSpy = jest.spyOn(window, 'scrollTo').mockImplementation((_, y) => {
       window.scrollY = y;
       window.pageYOffset = y;
     });
     document.dispatchEvent(new Event('scroll'));
     window.scrollTo(0, 400);
-    fireEvent.click(container.querySelector('.ant-back-top'));
+    fireEvent.click(container.querySelector('.ant-back-top')!);
     expect(onClick).toHaveBeenCalled();
     scrollToSpy.mockRestore();
   });
 
   it('invalid target', async () => {
     const onClick = jest.fn();
-    const { container } = render(
-      <BackTop onClick={onClick} visible target={() => ({ documentElement: {} })} />,
-    );
-    fireEvent.click(container.querySelector('.ant-back-top'));
+    const { container } = render(<BackTop onClick={onClick} visible target={undefined} />);
+    fireEvent.click(container.querySelector('.ant-back-top')!);
     expect(onClick).toHaveBeenCalled();
   });
 });
diff --git a/components/breadcrumb/__tests__/Breadcrumb.test.js b/components/breadcrumb/__tests__/Breadcrumb.test.tsx
similarity index 95%
rename from components/breadcrumb/__tests__/Breadcrumb.test.js
rename to components/breadcrumb/__tests__/Breadcrumb.test.tsx
index 5c25047b73..ea4ac0c5ed 100644
--- a/components/breadcrumb/__tests__/Breadcrumb.test.js
+++ b/components/breadcrumb/__tests__/Breadcrumb.test.tsx
@@ -3,6 +3,7 @@ import accessibilityTest from '../../../tests/shared/accessibilityTest';
 import mountTest from '../../../tests/shared/mountTest';
 import rtlTest from '../../../tests/shared/rtlTest';
 import { render } from '../../../tests/utils';
+import type { Route } from '../Breadcrumb';
 import Breadcrumb from '../index';
 
 describe('Breadcrumb', () => {
@@ -22,7 +23,7 @@ describe('Breadcrumb', () => {
 
   // https://github.com/airbnb/enzyme/issues/875
   it('warns on non-Breadcrumb.Item and non-Breadcrumb.Separator children', () => {
-    const MyCom = () => <div>foo</div>;
+    const MyCom: React.FC = () => <div>foo</div>;
     render(
       <Breadcrumb>
         <MyCom />
@@ -74,7 +75,7 @@ describe('Breadcrumb', () => {
   });
 
   it('should render a menu', () => {
-    const routes = [
+    const routes: Route[] = [
       {
         path: 'index',
         breadcrumbName: 'home',
@@ -103,6 +104,7 @@ describe('Breadcrumb', () => {
       },
       {
         path: 'third',
+        breadcrumbName: '',
       },
     ];
     const { asFragment } = render(<Breadcrumb routes={routes} />);
@@ -142,7 +144,7 @@ describe('Breadcrumb', () => {
 
   // https://github.com/ant-design/ant-design/issues/25975
   it('should support Breadcrumb.Item default separator', () => {
-    const MockComponent = () => (
+    const MockComponent: React.FC = () => (
       <span>
         <Breadcrumb.Item>Mock Node</Breadcrumb.Item>
       </span>
diff --git a/components/breadcrumb/__tests__/__snapshots__/Breadcrumb.test.js.snap b/components/breadcrumb/__tests__/__snapshots__/Breadcrumb.test.tsx.snap
similarity index 100%
rename from components/breadcrumb/__tests__/__snapshots__/Breadcrumb.test.js.snap
rename to components/breadcrumb/__tests__/__snapshots__/Breadcrumb.test.tsx.snap
diff --git a/components/breadcrumb/__tests__/__snapshots__/demo.test.js.snap b/components/breadcrumb/__tests__/__snapshots__/demo.test.ts.snap
similarity index 100%
rename from components/breadcrumb/__tests__/__snapshots__/demo.test.js.snap
rename to components/breadcrumb/__tests__/__snapshots__/demo.test.ts.snap
diff --git a/components/breadcrumb/__tests__/__snapshots__/router.test.js.snap b/components/breadcrumb/__tests__/__snapshots__/router.test.tsx.snap
similarity index 100%
rename from components/breadcrumb/__tests__/__snapshots__/router.test.js.snap
rename to components/breadcrumb/__tests__/__snapshots__/router.test.tsx.snap
diff --git a/components/breadcrumb/__tests__/demo.test.js b/components/breadcrumb/__tests__/demo.test.ts
similarity index 100%
rename from components/breadcrumb/__tests__/demo.test.js
rename to components/breadcrumb/__tests__/demo.test.ts
diff --git a/components/breadcrumb/__tests__/router.test.js b/components/breadcrumb/__tests__/router.test.tsx
similarity index 86%
rename from components/breadcrumb/__tests__/router.test.js
rename to components/breadcrumb/__tests__/router.test.tsx
index 3f3ddadac3..5e4ec0ad85 100644
--- a/components/breadcrumb/__tests__/router.test.js
+++ b/components/breadcrumb/__tests__/router.test.tsx
@@ -1,9 +1,10 @@
-import React from 'react';
+import React, { useMemo } from 'react';
+import type { RouterProps } from 'react-router-dom';
 import { Link, MemoryRouter, Route, Routes, useLocation, useNavigate } from 'react-router-dom';
 import { fireEvent, render } from '../../../tests/utils';
 import Breadcrumb from '../index';
 
-const Apps = () => (
+const Apps: React.FC = () => (
   <ul className="app-list">
     <li>
       <Link to="/apps/1">Application1</Link>：<Link to="/apps/1/detail">Detail</Link>
@@ -33,7 +34,7 @@ describe('react router', () => {
 
   // https://github.com/airbnb/enzyme/issues/875
   it('react router 6', () => {
-    const Home = () => {
+    const Home: React.FC = () => {
       const location = useLocation();
       const navigate = useNavigate();
       const pathSnippets = location.pathname.split('/').filter(i => i);
@@ -41,7 +42,7 @@ describe('react router', () => {
         const url = `/${pathSnippets.slice(0, index + 1).join('/')}`;
         return (
           <Breadcrumb.Item key={url}>
-            <Link to={url}>{breadcrumbNameMap[url]}</Link>
+            <Link to={url}>{breadcrumbNameMap[url as keyof typeof breadcrumbNameMap]}</Link>
           </Breadcrumb.Item>
         );
       });
@@ -50,6 +51,14 @@ describe('react router', () => {
           <Link to="/">Home</Link>
         </Breadcrumb.Item>,
       ].concat(extraBreadcrumbItems);
+      const componentProps = useMemo<RouterProps>(
+        () => ({ component: Apps } as unknown as RouterProps),
+        [],
+      );
+      const renderProps = useMemo<RouterProps>(
+        () => ({ render: () => <span>Home Page</span> } as unknown as RouterProps),
+        [],
+      );
       return (
         <div className="demo">
           <div className="demo-nav">
@@ -57,8 +66,8 @@ describe('react router', () => {
             <a onClick={() => navigate('/apps')}>Application List</a>
           </div>
           <Routes>
-            <Route path="/apps" component={Apps} />
-            <Route render={() => <span>Home Page</span>} />
+            <Route path="/apps" {...componentProps} />
+            <Route {...renderProps} />
           </Routes>
           <Breadcrumb>{breadcrumbItems}</Breadcrumb>
         </div>
diff --git a/components/cascader/__tests__/__snapshots__/demo.test.js.snap b/components/cascader/__tests__/__snapshots__/demo.test.ts.snap
similarity index 100%
rename from components/cascader/__tests__/__snapshots__/demo.test.js.snap
rename to components/cascader/__tests__/__snapshots__/demo.test.ts.snap
diff --git a/components/cascader/__tests__/__snapshots__/index.test.js.snap b/components/cascader/__tests__/__snapshots__/index.test.tsx.snap
similarity index 100%
rename from components/cascader/__tests__/__snapshots__/index.test.js.snap
rename to components/cascader/__tests__/__snapshots__/index.test.tsx.snap
diff --git a/components/cascader/__tests__/demo.test.js b/components/cascader/__tests__/demo.test.ts
similarity index 100%
rename from components/cascader/__tests__/demo.test.js
rename to components/cascader/__tests__/demo.test.ts
diff --git a/components/cascader/__tests__/index.test.js b/components/cascader/__tests__/index.test.tsx
similarity index 81%
rename from components/cascader/__tests__/index.test.js
rename to components/cascader/__tests__/index.test.tsx
index 511392135a..e148c89263 100644
--- a/components/cascader/__tests__/index.test.js
+++ b/components/cascader/__tests__/index.test.tsx
@@ -1,4 +1,6 @@
 import React from 'react';
+import type { SingleValueType } from 'rc-cascader/lib/Cascader';
+import type { BaseOptionType, DefaultOptionType } from '..';
 import Cascader from '..';
 import excludeAllWarning from '../../../tests/shared/excludeWarning';
 import focusTest from '../../../tests/shared/focusTest';
@@ -9,22 +11,27 @@ import { fireEvent, render } from '../../../tests/utils';
 
 const { SHOW_CHILD, SHOW_PARENT } = Cascader;
 
-function toggleOpen(container) {
-  fireEvent.mouseDown(container.querySelector('.ant-select-selector'));
+function toggleOpen(container: ReturnType<typeof render>['container']) {
+  fireEvent.mouseDown(container.querySelector('.ant-select-selector')!);
 }
 
-function isOpen(container) {
-  return container.querySelector('.ant-cascader').className.includes('ant-select-open');
+function isOpen(container: ReturnType<typeof render>['container']) {
+  return container.querySelector('.ant-cascader')?.className.includes('ant-select-open');
 }
 
-function getDropdown(container) {
+function getDropdown(container: ReturnType<typeof render>['container']) {
   return container.querySelector('.ant-select-dropdown');
 }
 
-function clickOption(container, menuIndex, itemIndex, type = 'click') {
+function clickOption(
+  container: ReturnType<typeof render>['container'],
+  menuIndex: number,
+  itemIndex: number,
+  type = 'click',
+) {
   const menu = container.querySelectorAll('ul.ant-cascader-menu')[menuIndex];
   const itemList = menu.querySelectorAll('li.ant-cascader-menu-item');
-  fireEvent[type](itemList[itemIndex]);
+  fireEvent?.[type as keyof typeof fireEvent]?.(itemList[itemIndex]);
 }
 
 const options = [
@@ -62,8 +69,11 @@ const options = [
   },
 ];
 
-function filter(inputValue, path) {
-  return path.some(option => option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1);
+function filter<OptionType extends BaseOptionType = DefaultOptionType>(
+  inputValue: string,
+  path: OptionType[],
+): boolean {
+  return path.some(option => option.label.toLowerCase().includes(inputValue.toLowerCase()));
 }
 
 describe('Cascader', () => {
@@ -133,31 +143,25 @@ describe('Cascader', () => {
 
   it('backspace should work with `Cascader[showSearch]`', () => {
     const { container } = render(<Cascader options={options} showSearch />);
-    fireEvent.change(container.querySelector('input'), { target: { value: '123' } });
+    fireEvent.change(container.querySelector('input')!, { target: { value: '123' } });
     expect(isOpen(container)).toBeTruthy();
 
-    fireEvent.keyDown(container.querySelector('input'), {
-      key: 'Backspace',
-      keyCode: 8,
-    });
+    fireEvent.keyDown(container.querySelector('input')!, { key: 'Backspace', keyCode: 8 });
     expect(isOpen(container)).toBeTruthy();
 
-    fireEvent.change(container.querySelector('input'), { target: { value: '' } });
+    fireEvent.change(container.querySelector('input')!, { target: { value: '' } });
     expect(isOpen(container)).toBeTruthy();
 
-    fireEvent.keyDown(container.querySelector('input'), {
-      key: 'Backspace',
-      keyCode: 8,
-    });
+    fireEvent.keyDown(container.querySelector('input')!, { key: 'Backspace', keyCode: 8 });
     expect(isOpen(container)).toBeFalsy();
   });
 
   it('should highlight keyword and filter when search in Cascader', () => {
     const { container } = render(<Cascader options={options} showSearch={{ filter }} />);
-    fireEvent.change(container.querySelector('input'), { target: { value: 'z' } });
+    fireEvent.change(container.querySelector('input')!, { target: { value: 'z' } });
 
     // React 18 with testing lib will have additional space. We have to compare innerHTML. Sad.
-    expect(getDropdown(container).innerHTML).toMatchSnapshot();
+    expect(getDropdown(container)?.innerHTML).toMatchSnapshot();
   });
 
   it('should highlight keyword and filter when search in Cascader with same field name of label and value', () => {
@@ -180,8 +184,11 @@ describe('Cascader', () => {
         ],
       },
     ];
-    function customFilter(inputValue, path) {
-      return path.some(option => option.name.toLowerCase().indexOf(inputValue.toLowerCase()) > -1);
+    function customFilter<OptionType extends BaseOptionType = DefaultOptionType>(
+      inputValue: string,
+      path: OptionType[],
+    ): boolean {
+      return path.some(option => option.name.toLowerCase().includes(inputValue.toLowerCase()));
     }
     const { container } = render(
       <Cascader
@@ -190,15 +197,15 @@ describe('Cascader', () => {
         showSearch={{ filter: customFilter }}
       />,
     );
-    fireEvent.change(container.querySelector('input'), { target: { value: 'z' } });
+    fireEvent.change(container.querySelector('input')!, { target: { value: 'z' } });
 
     // React 18 with testing lib will have additional space. We have to compare innerHTML. Sad.
-    expect(getDropdown(container).innerHTML).toMatchSnapshot();
+    expect(getDropdown(container)?.innerHTML).toMatchSnapshot();
   });
 
   it('should render not found content', () => {
     const { container } = render(<Cascader options={options} showSearch={{ filter }} />);
-    fireEvent.change(container.querySelector('input'), {
+    fireEvent.change(container.querySelector('input')!, {
       target: { value: '__notfoundkeyword__' },
     });
     expect(getDropdown(container)).toMatchSnapshot();
@@ -208,10 +215,10 @@ describe('Cascader', () => {
     const { container } = render(
       <Cascader options={options} defaultValue={['zhejiang', 'hangzhou']} />,
     );
-    expect(container.querySelector('.ant-select-selection-item').textContent).toEqual(
+    expect(container.querySelector('.ant-select-selection-item')?.textContent).toEqual(
       'Zhejiang / Hangzhou',
     );
-    fireEvent.mouseDown(container.querySelector('.ant-select-clear'));
+    fireEvent.mouseDown(container.querySelector('.ant-select-clear')!);
     expect(container.querySelector('.ant-select-selection-item')).toBeFalsy();
   });
 
@@ -219,14 +226,14 @@ describe('Cascader', () => {
     const { container } = render(
       <Cascader options={options} defaultValue={['zhejiang', 'hangzhou']} showSearch />,
     );
-    fireEvent.change(container.querySelector('input'), { target: { value: 'xxx' } });
-    fireEvent.mouseDown(container.querySelector('.ant-select-clear'));
-    expect(container.querySelector('input').value).toEqual('');
+    fireEvent.change(container.querySelector('input')!, { target: { value: 'xxx' } });
+    fireEvent.mouseDown(container.querySelector('.ant-select-clear')!);
+    expect(container.querySelector('input')?.value).toEqual('');
   });
 
   it('should change filtered item when options are changed', () => {
     const { container, rerender } = render(<Cascader options={options} showSearch={{ filter }} />);
-    fireEvent.change(container.querySelector('input'), { target: { value: 'a' } });
+    fireEvent.change(container.querySelector('input')!, { target: { value: 'a' } });
     expect(container.querySelectorAll('.ant-cascader-menu-item').length).toBe(2);
 
     rerender(<Cascader options={[options[0]]} showSearch={{ filter }} />);
@@ -235,14 +242,11 @@ describe('Cascader', () => {
 
   it('should select item immediately when searching and pressing down arrow key', () => {
     const { container } = render(<Cascader options={options} showSearch={{ filter }} />);
-    fireEvent.change(container.querySelector('input'), { target: { value: 'a' } });
+    fireEvent.change(container.querySelector('input')!, { target: { value: 'a' } });
 
     expect(container.querySelectorAll('.ant-cascader-menu-item').length).toBe(2);
     expect(container.querySelectorAll('.ant-cascader-menu-item-active').length).toBe(0);
-    fireEvent.keyDown(container.querySelector('input'), {
-      key: 'Down',
-      keyCode: 40,
-    });
+    fireEvent.keyDown(container.querySelector('input')!, { key: 'Down', keyCode: 40 });
     expect(container.querySelectorAll('.ant-cascader-menu-item-active').length).toBe(1);
   });
 
@@ -300,14 +304,14 @@ describe('Cascader', () => {
     clickOption(container, 0, 0);
     clickOption(container, 1, 0);
     clickOption(container, 2, 0);
-    expect(container.querySelector('.ant-select-selection-item').textContent).toEqual(
+    expect(container.querySelector('.ant-select-selection-item')?.textContent).toEqual(
       'Zhejiang / Hangzhou / West Lake',
     );
     expect(onChange).toHaveBeenCalledWith(['zhejiang', 'hangzhou', 'xihu'], expect.anything());
   });
 
   it('should show not found content when options.length is 0', () => {
-    const customerOptions = [];
+    const customerOptions: any[] = [];
     const { container } = render(<Cascader options={customerOptions} />);
     toggleOpen(container);
     expect(getDropdown(container)).toMatchSnapshot();
@@ -329,7 +333,7 @@ describe('Cascader', () => {
       const { container } = render(
         <Cascader options={options} showSearch={{ filter, limit: 1 }} />,
       );
-      fireEvent.change(container.querySelector('input'), { target: { value: 'a' } });
+      fireEvent.change(container.querySelector('input')!, { target: { value: 'a' } });
       expect(container.querySelectorAll('.ant-cascader-menu-item')).toHaveLength(1);
     });
 
@@ -337,7 +341,7 @@ describe('Cascader', () => {
       const { container } = render(
         <Cascader options={options} showSearch={{ filter, limit: false }} />,
       );
-      fireEvent.change(container.querySelector('input'), { target: { value: 'a' } });
+      fireEvent.change(container.querySelector('input')!, { target: { value: 'a' } });
       expect(container.querySelectorAll('.ant-cascader-menu-item')).toHaveLength(2);
     });
 
@@ -345,8 +349,8 @@ describe('Cascader', () => {
       const { container } = render(
         <Cascader options={options} showSearch={{ filter, limit: -1 }} />,
       );
-      fireEvent.click(container.querySelector('input'));
-      fireEvent.change(container.querySelector('input'), { target: { value: 'a' } });
+      fireEvent.click(container.querySelector('input')!);
+      fireEvent.change(container.querySelector('input')!, { target: { value: 'a' } });
       expect(container.querySelectorAll('.ant-cascader-menu-item')).toHaveLength(2);
     });
   });
@@ -384,11 +388,11 @@ describe('Cascader', () => {
 
   it('placeholder works correctly', () => {
     const { container, rerender } = render(<Cascader options={[]} />);
-    expect(container.querySelector('.ant-select-selection-placeholder').textContent).toEqual('');
+    expect(container.querySelector('.ant-select-selection-placeholder')?.textContent).toEqual('');
 
     const customPlaceholder = 'Custom placeholder';
     rerender(<Cascader options={[]} placeholder={customPlaceholder} />);
-    expect(container.querySelector('.ant-select-selection-placeholder').textContent).toEqual(
+    expect(container.querySelector('.ant-select-selection-placeholder')?.textContent).toEqual(
       customPlaceholder,
     );
   });
@@ -410,7 +414,7 @@ describe('Cascader', () => {
     toggleOpen(container);
 
     // Inject in tests/__mocks__/rc-trigger.js
-    expect(global.triggerProps.popupPlacement).toEqual('topRight');
+    expect((global as any)?.triggerProps.popupPlacement).toEqual('topRight');
   });
 
   it('popup correctly with defaultValue RTL', () => {
@@ -489,7 +493,7 @@ describe('Cascader', () => {
     const { container } = render(
       <Cascader options={options} defaultValue={['options1', 'options2']} />,
     );
-    expect(container.querySelector('.ant-select-selection-item').textContent).toEqual(
+    expect(container.querySelector('.ant-select-selection-item')?.textContent).toEqual(
       'options1 / options2',
     );
   });
@@ -497,7 +501,7 @@ describe('Cascader', () => {
   it('can be selected when showSearch', () => {
     const onChange = jest.fn();
     const { container } = render(<Cascader options={options} onChange={onChange} showSearch />);
-    fireEvent.change(container.querySelector('input'), { target: { value: 'Zh' } });
+    fireEvent.change(container.querySelector('input')!, { target: { value: 'Zh' } });
 
     expect(container.querySelectorAll('.ant-cascader-menu').length).toBe(1);
     clickOption(container, 0, 0);
@@ -506,14 +510,11 @@ describe('Cascader', () => {
 
   it('options should open after press esc and then search', () => {
     const { container } = render(<Cascader options={options} showSearch />);
-    fireEvent.change(container.querySelector('input'), { target: { value: 'jin' } });
+    fireEvent.change(container.querySelector('input')!, { target: { value: 'jin' } });
     expect(isOpen(container)).toBeTruthy();
-    fireEvent.keyDown(container.querySelector('input'), {
-      key: 'Esc',
-      keyCode: 27,
-    });
+    fireEvent.keyDown(container.querySelector('input')!, { key: 'Esc', keyCode: 27 });
     expect(isOpen(container)).toBeFalsy();
-    fireEvent.change(container.querySelector('input'), { target: { value: 'jin' } });
+    fireEvent.change(container.querySelector('input')!, { target: { value: 'jin' } });
     expect(isOpen(container)).toBeTruthy();
   });
 
@@ -523,7 +524,7 @@ describe('Cascader', () => {
     const { container } = render(
       <Cascader options={options} onChange={onChange} showSearch fieldNames={sameNames} />,
     );
-    fireEvent.change(container.querySelector('input'), { target: { value: 'est' } });
+    fireEvent.change(container.querySelector('input')!, { target: { value: 'est' } });
     clickOption(container, 0, 0);
     expect(onChange).toHaveBeenCalledWith(['Zhejiang', 'Hangzhou', 'West Lake'], expect.anything());
   });
@@ -533,14 +534,14 @@ describe('Cascader', () => {
     toggleOpen(container);
 
     // Inject in tests/__mocks__/rc-trigger.js
-    expect(global.triggerProps.popupPlacement).toEqual('bottomRight');
+    expect((global as any).triggerProps.popupPlacement).toEqual('bottomRight');
   });
 
   describe('legacy props', () => {
     it('popupClassName', () => {
       render(<Cascader open popupPlacement="bottomLeft" />);
       // Inject in tests/__mocks__/rc-trigger.js
-      expect(global.triggerProps.popupPlacement).toEqual('bottomLeft');
+      expect((global as any).triggerProps.popupPlacement).toEqual('bottomLeft');
     });
 
     it('should support showCheckedStrategy child', () => {
@@ -583,8 +584,8 @@ describe('Cascader', () => {
         },
       ];
 
-      let selectedValue;
-      const onChange = function onChange(value) {
+      let selectedValue: SingleValueType[];
+      const onChange = function onChange(value: SingleValueType[]) {
         selectedValue = value;
       };
 
@@ -603,9 +604,9 @@ describe('Cascader', () => {
       clickOption(container, 1, 0);
       clickOption(container, 2, 0);
       clickOption(container, 2, 1);
-      expect(selectedValue[0].join(',')).toBe('zhejiang,hangzhou,xihu');
-      expect(selectedValue[1].join(',')).toBe('zhejiang,hangzhou,donghu');
-      expect(selectedValue.join(',')).toBe('zhejiang,hangzhou,xihu,zhejiang,hangzhou,donghu');
+      expect(selectedValue![0].join(',')).toBe('zhejiang,hangzhou,xihu');
+      expect(selectedValue![1].join(',')).toBe('zhejiang,hangzhou,donghu');
+      expect(selectedValue!.join(',')).toBe('zhejiang,hangzhou,xihu,zhejiang,hangzhou,donghu');
     });
 
     it('should support showCheckedStrategy parent', () => {
@@ -648,8 +649,8 @@ describe('Cascader', () => {
         },
       ];
 
-      let selectedValue;
-      const onChange = function onChange(value) {
+      let selectedValue: SingleValueType[];
+      const onChange = function onChange(value: SingleValueType[]) {
         selectedValue = value;
       };
 
@@ -668,8 +669,8 @@ describe('Cascader', () => {
       clickOption(container, 2, 0);
       clickOption(container, 2, 1);
 
-      expect(selectedValue.length).toBe(1);
-      expect(selectedValue.join(',')).toBe('zhejiang');
+      expect(selectedValue!.length).toBe(1);
+      expect(selectedValue!.join(',')).toBe('zhejiang');
     });
   });
 });
diff --git a/components/checkbox/__tests__/__snapshots__/checkbox.test.js.snap b/components/checkbox/__tests__/__snapshots__/checkbox.test.tsx.snap
similarity index 100%
rename from components/checkbox/__tests__/__snapshots__/checkbox.test.js.snap
rename to components/checkbox/__tests__/__snapshots__/checkbox.test.tsx.snap
diff --git a/components/checkbox/__tests__/__snapshots__/demo.test.js.snap b/components/checkbox/__tests__/__snapshots__/demo.test.ts.snap
similarity index 100%
rename from components/checkbox/__tests__/__snapshots__/demo.test.js.snap
rename to components/checkbox/__tests__/__snapshots__/demo.test.ts.snap
diff --git a/components/checkbox/__tests__/__snapshots__/group.test.js.snap b/components/checkbox/__tests__/__snapshots__/group.test.tsx.snap
similarity index 100%
rename from components/checkbox/__tests__/__snapshots__/group.test.js.snap
rename to components/checkbox/__tests__/__snapshots__/group.test.tsx.snap
diff --git a/components/checkbox/__tests__/checkbox.test.js b/components/checkbox/__tests__/checkbox.test.tsx
similarity index 90%
rename from components/checkbox/__tests__/checkbox.test.js
rename to components/checkbox/__tests__/checkbox.test.tsx
index 6814d86505..8cd3d6dcde 100644
--- a/components/checkbox/__tests__/checkbox.test.js
+++ b/components/checkbox/__tests__/checkbox.test.tsx
@@ -19,10 +19,10 @@ describe('Checkbox', () => {
       <Checkbox onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave} />,
     );
 
-    fireEvent.mouseEnter(container.querySelector('label'));
+    fireEvent.mouseEnter(container.querySelector('label')!);
     expect(onMouseEnter).toHaveBeenCalled();
 
-    fireEvent.mouseLeave(container.querySelector('label'));
+    fireEvent.mouseLeave(container.querySelector('label')!);
     expect(onMouseLeave).toHaveBeenCalled();
   });
 
diff --git a/components/checkbox/__tests__/demo.test.js b/components/checkbox/__tests__/demo.test.ts
similarity index 100%
rename from components/checkbox/__tests__/demo.test.js
rename to components/checkbox/__tests__/demo.test.ts
diff --git a/components/checkbox/__tests__/group.test.js b/components/checkbox/__tests__/group.test.tsx
similarity index 90%
rename from components/checkbox/__tests__/group.test.js
rename to components/checkbox/__tests__/group.test.tsx
index 6ffa2be3e2..b22065d489 100644
--- a/components/checkbox/__tests__/group.test.js
+++ b/components/checkbox/__tests__/group.test.tsx
@@ -6,6 +6,8 @@ import Collapse from '../../collapse';
 import Input from '../../input';
 import Table from '../../table';
 import Checkbox from '../index';
+import type { CheckboxValueType } from '../Group';
+import type { CheckboxGroupProps } from '../index';
 
 describe('CheckboxGroup', () => {
   mountTest(Checkbox.Group);
@@ -60,9 +62,11 @@ describe('CheckboxGroup', () => {
 
   it('all children should have a name property', () => {
     const { container } = render(<Checkbox.Group name="checkboxgroup" options={['Yes', 'No']} />);
-    [...container.querySelectorAll('input[type="checkbox"]')].forEach(el => {
-      expect(el.getAttribute('name')).toEqual('checkboxgroup');
-    });
+    Array.from(container.querySelectorAll<HTMLInputElement>('input[type="checkbox"]')).forEach(
+      el => {
+        expect(el.getAttribute('name')).toEqual('checkboxgroup');
+      },
+    );
   });
 
   it('passes prefixCls down to checkbox', () => {
@@ -81,10 +85,10 @@ describe('CheckboxGroup', () => {
       { label: 'Apple', value: 'Apple' },
       { label: 'Orange', value: 'Orange' },
     ];
-    const renderCheckbox = props => <Checkbox.Group {...props} />;
+    const renderCheckbox = (props: CheckboxGroupProps) => <Checkbox.Group {...props} />;
     const { container, rerender } = render(renderCheckbox({ options }));
     expect(container.querySelectorAll('.ant-checkbox-checked').length).toBe(0);
-    rerender(renderCheckbox({ options, value: 'Apple' }));
+    rerender(renderCheckbox({ options, value: 'Apple' as unknown as CheckboxValueType[] }));
     expect(container.querySelectorAll('.ant-checkbox-checked').length).toBe(1);
   });
 
@@ -116,7 +120,7 @@ describe('CheckboxGroup', () => {
         <Checkbox key={2} value={2} />
       </Checkbox.Group>,
     );
-    fireEvent.click(container.querySelector('.ant-checkbox-input'));
+    fireEvent.click(container.querySelector('.ant-checkbox-input')!);
 
     expect(onChange).toHaveBeenCalledWith([2]);
   });
@@ -164,7 +168,7 @@ describe('CheckboxGroup', () => {
     const { container } = render(
       <Checkbox.Group>
         <Collapse bordered={false}>
-          <Collapse.Panel header="test panel">
+          <Collapse.Panel key="test panel" header="test panel">
             <div>
               <Checkbox value="1">item</Checkbox>
             </div>
@@ -174,11 +178,11 @@ describe('CheckboxGroup', () => {
     );
 
     fireEvent.click(
-      container.querySelector('.ant-collapse-item').querySelector('.ant-collapse-header'),
+      container.querySelector('.ant-collapse-item')?.querySelector('.ant-collapse-header')!,
     );
-    fireEvent.click(container.querySelector('.ant-checkbox-input'));
+    fireEvent.click(container.querySelector('.ant-checkbox-input')!);
     expect(container.querySelectorAll('.ant-checkbox-checked').length).toBe(1);
-    fireEvent.click(container.querySelector('.ant-checkbox-input'));
+    fireEvent.click(container.querySelector('.ant-checkbox-input')!);
     expect(container.querySelectorAll('.ant-checkbox-checked').length).toBe(0);
   });
 
@@ -210,12 +214,12 @@ describe('CheckboxGroup', () => {
   });
 
   it('should get div ref', () => {
-    const refCalls = [];
+    const refCalls: HTMLDivElement[] = [];
     render(
       <Checkbox.Group
         options={['Apple', 'Pear', 'Orange']}
         ref={node => {
-          refCalls.push(node);
+          refCalls.push(node!);
         }}
       />,
     );
@@ -230,18 +234,18 @@ describe('CheckboxGroup', () => {
       <Checkbox.Group options={[1, 'Pear', 'Orange']} onChange={onChange} />,
     );
 
-    fireEvent.click(container.querySelector('.ant-checkbox-input'));
+    fireEvent.click(container.querySelector('.ant-checkbox-input')!);
     expect(onChange).toHaveBeenCalledWith([1]);
   });
 
   it('should store latest checkbox value if changed', () => {
     const onChange = jest.fn();
 
-    const Demo = () => {
-      const [v, setV] = useState('');
+    const Demo: React.FC = () => {
+      const [v, setV] = useState<string>('');
 
       React.useEffect(() => {
-        setTimeout(setV('1'), 1000);
+        setTimeout(setV('1') as unknown as TimerHandler, 1000);
       }, []);
 
       return (
@@ -257,12 +261,12 @@ describe('CheckboxGroup', () => {
     };
 
     const { container } = render(<Demo />);
-    fireEvent.click(container.querySelector('.ant-checkbox-input'));
+    fireEvent.click(container.querySelector('.ant-checkbox-input')!);
     expect(onChange).toHaveBeenCalledWith([]);
-    fireEvent.click(container.querySelector('.ant-checkbox-input'));
+    fireEvent.click(container.querySelector('.ant-checkbox-input')!);
     expect(onChange).toHaveBeenCalledWith(['length1']);
-    fireEvent.change(container.querySelector('.ant-input'), { target: { value: '' } });
-    fireEvent.click(container.querySelector('.ant-checkbox-input'));
+    fireEvent.change(container.querySelector('.ant-input')!, { target: { value: '' } });
+    fireEvent.click(container.querySelector('.ant-checkbox-input')!);
     expect(onChange).toHaveBeenCalledWith(['A']);
   });
 });
diff --git a/components/config-provider/__tests__/__snapshots__/components.test.tsx.snap b/components/config-provider/__tests__/__snapshots__/components.test.tsx.snap
index fa2856b030..237741a587 100644
--- a/components/config-provider/__tests__/__snapshots__/components.test.tsx.snap
+++ b/components/config-provider/__tests__/__snapshots__/components.test.tsx.snap
@@ -15519,11 +15519,11 @@ exports[`ConfigProvider components Form configProvider 1`] = `
         >
           <div
             class="config-form-item-explain config-show-help-appear config-show-help-appear-start config-show-help config-form-item-explain-connected"
+            role="alert"
             style="height: 0px; opacity: 0;"
           >
             <div
               class="config-show-help-item-appear config-show-help-item-appear-start config-show-help-item config-form-item-explain-error"
-              role="alert"
               style="height: 0px; opacity: 0;"
             >
               Bamboo is Light
@@ -15575,11 +15575,11 @@ exports[`ConfigProvider components Form configProvider componentDisabled 1`] = `
         >
           <div
             class="config-form-item-explain config-show-help-appear config-show-help-appear-start config-show-help config-form-item-explain-connected"
+            role="alert"
             style="height: 0px; opacity: 0;"
           >
             <div
               class="config-show-help-item-appear config-show-help-item-appear-start config-show-help-item config-form-item-explain-error"
-              role="alert"
               style="height: 0px; opacity: 0;"
             >
               Bamboo is Light
@@ -15630,11 +15630,11 @@ exports[`ConfigProvider components Form configProvider componentSize large 1`] =
         >
           <div
             class="config-form-item-explain config-show-help-appear config-show-help-appear-start config-show-help config-form-item-explain-connected"
+            role="alert"
             style="height: 0px; opacity: 0;"
           >
             <div
               class="config-show-help-item-appear config-show-help-item-appear-start config-show-help-item config-form-item-explain-error"
-              role="alert"
               style="height: 0px; opacity: 0;"
             >
               Bamboo is Light
@@ -15685,11 +15685,11 @@ exports[`ConfigProvider components Form configProvider componentSize middle 1`]
         >
           <div
             class="config-form-item-explain config-show-help-appear config-show-help-appear-start config-show-help config-form-item-explain-connected"
+            role="alert"
             style="height: 0px; opacity: 0;"
           >
             <div
               class="config-show-help-item-appear config-show-help-item-appear-start config-show-help-item config-form-item-explain-error"
-              role="alert"
               style="height: 0px; opacity: 0;"
             >
               Bamboo is Light
@@ -15740,11 +15740,11 @@ exports[`ConfigProvider components Form configProvider virtual and dropdownMatch
         >
           <div
             class="ant-form-item-explain ant-show-help-appear ant-show-help-appear-start ant-show-help ant-form-item-explain-connected"
+            role="alert"
             style="height: 0px; opacity: 0;"
           >
             <div
               class="ant-show-help-item-appear ant-show-help-item-appear-start ant-show-help-item ant-form-item-explain-error"
-              role="alert"
               style="height: 0px; opacity: 0;"
             >
               Bamboo is Light
@@ -15795,11 +15795,11 @@ exports[`ConfigProvider components Form normal 1`] = `
         >
           <div
             class="ant-form-item-explain ant-show-help-appear ant-show-help-appear-start ant-show-help ant-form-item-explain-connected"
+            role="alert"
             style="height: 0px; opacity: 0;"
           >
             <div
               class="ant-show-help-item-appear ant-show-help-item-appear-start ant-show-help-item ant-form-item-explain-error"
-              role="alert"
               style="height: 0px; opacity: 0;"
             >
               Bamboo is Light
@@ -15850,11 +15850,11 @@ exports[`ConfigProvider components Form prefixCls 1`] = `
         >
           <div
             class="prefix-Form-item-explain ant-show-help-appear ant-show-help-appear-start ant-show-help prefix-Form-item-explain-connected"
+            role="alert"
             style="height: 0px; opacity: 0;"
           >
             <div
               class="ant-show-help-item-appear ant-show-help-item-appear-start ant-show-help-item prefix-Form-item-explain-error"
-              role="alert"
               style="height: 0px; opacity: 0;"
             >
               Bamboo is Light
diff --git a/components/config-provider/cssVariables.tsx b/components/config-provider/cssVariables.tsx
index 81fd01c7d8..c417090612 100644
--- a/components/config-provider/cssVariables.tsx
+++ b/components/config-provider/cssVariables.tsx
@@ -30,8 +30,8 @@ export function getStyle(globalPrefixCls: string, theme: Theme) {
     variables[`${type}-color-hover`] = colorPalettes[4];
     variables[`${type}-color-active`] = colorPalettes[6];
     variables[`${type}-color-outline`] = baseColor.clone().setAlpha(0.2).toRgbString();
-    variables[`${type}-color-deprecated-bg`] = colorPalettes[1];
-    variables[`${type}-color-deprecated-border`] = colorPalettes[3];
+    variables[`${type}-color-deprecated-bg`] = colorPalettes[0];
+    variables[`${type}-color-deprecated-border`] = colorPalettes[2];
   };
 
   // ================ Primary Color ================
diff --git a/components/divider/__tests__/__snapshots__/demo.test.js.snap b/components/divider/__tests__/__snapshots__/demo.test.ts.snap
similarity index 100%
rename from components/divider/__tests__/__snapshots__/demo.test.js.snap
rename to components/divider/__tests__/__snapshots__/demo.test.ts.snap
diff --git a/components/divider/__tests__/demo.test.js b/components/divider/__tests__/demo.test.ts
similarity index 100%
rename from components/divider/__tests__/demo.test.js
rename to components/divider/__tests__/demo.test.ts
diff --git a/components/divider/__tests__/index.test.js b/components/divider/__tests__/index.test.ts
similarity index 100%
rename from components/divider/__tests__/index.test.js
rename to components/divider/__tests__/index.test.ts
diff --git a/components/drawer/__tests__/Drawer.test.js b/components/drawer/__tests__/Drawer.test.tsx
similarity index 82%
rename from components/drawer/__tests__/Drawer.test.js
rename to components/drawer/__tests__/Drawer.test.tsx
index bfea454797..c1ed16cde1 100644
--- a/components/drawer/__tests__/Drawer.test.js
+++ b/components/drawer/__tests__/Drawer.test.tsx
@@ -1,12 +1,13 @@
 import React from 'react';
 import { act } from 'react-dom/test-utils';
+import type { DrawerProps } from '..';
 import Drawer from '..';
 import mountTest from '../../../tests/shared/mountTest';
 import rtlTest from '../../../tests/shared/rtlTest';
 import { fireEvent, render } from '../../../tests/utils';
 import ConfigProvider from '../../config-provider';
 
-const DrawerTest = ({ getContainer }) => (
+const DrawerTest: React.FC<DrawerProps> = ({ getContainer }) => (
   <div>
     <Drawer open width={400} getContainer={getContainer}>
       Here is content of Drawer
@@ -59,35 +60,37 @@ describe('Drawer', () => {
   });
 
   it('getContainer return undefined', () => {
-    const { container: wrapper, rerender } = render(<DrawerTest getContainer={() => undefined} />);
+    const { container, rerender } = render(
+      <DrawerTest getContainer={() => undefined as unknown as HTMLElement} />,
+    );
     triggerMotion();
-    expect(wrapper.firstChild).toMatchSnapshot();
+    expect(container.firstChild).toMatchSnapshot();
 
     rerender(<DrawerTest getContainer={false} />);
     triggerMotion();
-    expect(wrapper.firstChild).toMatchSnapshot();
+    expect(container.firstChild).toMatchSnapshot();
   });
 
   it('render top drawer', () => {
-    const { container: wrapper } = render(
+    const { container } = render(
       <Drawer open height={400} placement="top" getContainer={false}>
         Here is content of Drawer
       </Drawer>,
     );
 
     triggerMotion();
-    expect(wrapper.firstChild).toMatchSnapshot();
+    expect(container.firstChild).toMatchSnapshot();
   });
 
   it('have a title', () => {
-    const { container: wrapper } = render(
+    const { container } = render(
       <Drawer open title="Test Title" getContainer={false}>
         Here is content of Drawer
       </Drawer>,
     );
 
     triggerMotion();
-    expect(wrapper.firstChild).toMatchSnapshot();
+    expect(container.firstChild).toMatchSnapshot();
   });
 
   it('closable is false', () => {
@@ -205,17 +208,4 @@ describe('Drawer', () => {
       zIndex: 903,
     });
   });
-  it('deprecated warning', () => {
-    const errSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
-
-    const { rerender } = render(<Drawer visible />);
-    expect(errSpy).toHaveBeenCalledWith(
-      'Warning: [antd: Drawer] `visible` is deprecated which will be removed in next major version, please use `open` instead.',
-    );
-    rerender(<Drawer afterVisibleChange={() => {}} />);
-    expect(errSpy).toHaveBeenCalledWith(
-      'Warning: [antd: Drawer] `afterVisibleChange` is deprecated which will be removed in next major version, please use `afterOpenChange` instead.',
-    );
-    errSpy.mockRestore();
-  });
 });
diff --git a/components/drawer/__tests__/DrawerEvent.test.js b/components/drawer/__tests__/DrawerEvent.test.tsx
similarity index 63%
rename from components/drawer/__tests__/DrawerEvent.test.js
rename to components/drawer/__tests__/DrawerEvent.test.tsx
index 8e0ba915cc..69c470605e 100644
--- a/components/drawer/__tests__/DrawerEvent.test.js
+++ b/components/drawer/__tests__/DrawerEvent.test.tsx
@@ -1,14 +1,15 @@
 import React from 'react';
+import type { DrawerProps } from '..';
 import Drawer from '..';
 import { act, fireEvent, render } from '../../../tests/utils';
 
-describe('Drawer', () => {
-  const getDrawer = props => (
-    <Drawer open getContainer={false} {...props}>
-      Here is content of Drawer
-    </Drawer>
-  );
+const DrawerTest: React.FC<DrawerProps> = props => (
+  <Drawer open getContainer={false} {...props}>
+    Here is content of Drawer
+  </Drawer>
+);
 
+describe('Drawer', () => {
   beforeEach(() => {
     jest.useFakeTimers();
   });
@@ -18,12 +19,12 @@ describe('Drawer', () => {
   });
 
   it('render correctly', () => {
-    const { container, asFragment, rerender } = render(getDrawer());
+    const { container, asFragment, rerender } = render(<DrawerTest />);
     expect(container.querySelector('.ant-drawer-body')).toBeTruthy();
 
-    rerender(getDrawer({ open: false }));
+    rerender(<DrawerTest open={false} />);
 
-    expect(container.querySelector('.ant-drawer-body').textContent).toEqual(
+    expect(container.querySelector('.ant-drawer-body')?.textContent).toEqual(
       'Here is content of Drawer',
     );
 
@@ -32,33 +33,33 @@ describe('Drawer', () => {
 
   it('mask trigger onClose', () => {
     const onClose = jest.fn();
-    const { container } = render(getDrawer({ onClose }));
+    const { container } = render(<DrawerTest onClose={onClose} />);
 
-    fireEvent.click(container.querySelector('.ant-drawer-mask'));
+    fireEvent.click(container.querySelector('.ant-drawer-mask')!);
     expect(onClose).toHaveBeenCalled();
   });
 
   it('close button trigger onClose', () => {
     const onClose = jest.fn();
-    const { container } = render(getDrawer({ onClose }));
+    const { container } = render(<DrawerTest onClose={onClose} />);
 
-    fireEvent.click(container.querySelector('.ant-drawer-close'));
+    fireEvent.click(container.querySelector('.ant-drawer-close')!);
     expect(onClose).toHaveBeenCalled();
   });
 
   it('maskClosable no trigger onClose', () => {
     const onClose = jest.fn();
-    const { container } = render(getDrawer({ onClose, maskClosable: false }));
+    const { container } = render(<DrawerTest onClose={onClose} maskClosable={false} />);
 
-    fireEvent.click(container.querySelector('.ant-drawer-mask'));
+    fireEvent.click(container.querySelector('.ant-drawer-mask')!);
     expect(onClose).not.toHaveBeenCalled();
   });
 
   it('dom should be removed after close when destroyOnClose is true', () => {
-    const { container, rerender } = render(getDrawer({ destroyOnClose: true }));
+    const { container, rerender } = render(<DrawerTest destroyOnClose />);
     expect(container.querySelector('.ant-drawer')).toBeTruthy();
 
-    rerender(getDrawer({ destroyOnClose: true, open: false }));
+    rerender(<DrawerTest destroyOnClose open={false} />);
     act(() => {
       jest.runAllTimers();
     });
@@ -67,53 +68,53 @@ describe('Drawer', () => {
   });
 
   it('dom should be existed after close when destroyOnClose is false', () => {
-    const { container, rerender } = render(getDrawer());
+    const { container, rerender } = render(<DrawerTest />);
     expect(container.querySelector('.ant-drawer')).toBeTruthy();
 
-    rerender(getDrawer({ open: false }));
+    rerender(<DrawerTest open={false} />);
     act(() => {
       jest.runAllTimers();
     });
-    fireEvent.animationEnd(container.querySelector('.ant-drawer-content'));
+    fireEvent.animationEnd(container.querySelector('.ant-drawer-content')!);
 
     expect(container.querySelector('.ant-drawer')).toBeTruthy();
   });
 
   it('dom should be existed after close twice when getContainer is false', () => {
-    const { container, rerender } = render(getDrawer({ open: true, getContainer: false }));
+    const { container, rerender } = render(<DrawerTest open getContainer={false} />);
     expect(container.querySelector('.ant-drawer-content')).toBeTruthy();
 
     // Hide
-    rerender(getDrawer({ open: false, getContainer: false }));
+    rerender(<DrawerTest open={false} getContainer={false} />);
     act(() => {
       jest.runAllTimers();
     });
-    fireEvent.animationEnd(container.querySelector('.ant-drawer-content-wrapper'));
+    fireEvent.animationEnd(container.querySelector('.ant-drawer-content-wrapper')!);
     expect(container.querySelector('.ant-drawer-content-wrapper-hidden')).toBeTruthy();
 
     // Show
-    rerender(getDrawer({ open: true, getContainer: false }));
+    rerender(<DrawerTest open getContainer={false} />);
     expect(container.querySelector('.ant-drawer-content-wrapper')).toBeTruthy();
     expect(container.querySelector('.ant-drawer-content-wrapper-hidden')).toBeFalsy();
 
     // Hide
-    rerender(getDrawer({ open: false, getContainer: false }));
+    rerender(<DrawerTest open={false} getContainer={false} />);
     act(() => {
       jest.runAllTimers();
     });
-    fireEvent.animationEnd(container.querySelector('.ant-drawer-content-wrapper'));
+    fireEvent.animationEnd(container.querySelector('.ant-drawer-content-wrapper')!);
     expect(container.querySelector('.ant-drawer-content-wrapper-hidden')).toBeTruthy();
   });
 
-  it('test afterOpenChange', async () => {
+  it('test afterVisibleChange', async () => {
     const afterOpenChange = jest.fn();
-    const { container, rerender } = render(getDrawer({ afterOpenChange, open: true }));
-    rerender(getDrawer({ afterOpenChange, open: false }));
+    const { container, rerender } = render(<DrawerTest open afterOpenChange={afterOpenChange} />);
+    rerender(<DrawerTest open={false} afterOpenChange={afterOpenChange} />);
 
     act(() => {
       jest.runAllTimers();
     });
-    fireEvent.animationEnd(container.querySelector('.ant-drawer-content-wrapper'));
+    fireEvent.animationEnd(container.querySelector('.ant-drawer-content-wrapper')!);
 
     expect(afterOpenChange).toHaveBeenCalledTimes(1);
   });
@@ -121,18 +122,18 @@ describe('Drawer', () => {
   it('should support children ref', () => {
     const fn = jest.fn();
 
-    const refCallback = ref => {
+    const refCallback = (ref: HTMLDivElement | null) => {
       expect(typeof ref).toBe('object');
       fn();
     };
 
-    const RefDemo = () => {
-      const ref = React.useRef();
+    const RefDemo: React.FC = () => {
+      const ref = React.useRef<HTMLDivElement>(null);
       const [open, setOpen] = React.useState(false);
 
       React.useEffect(() => {
         if (open) {
-          refCallback(ref.current);
+          refCallback(ref.current!);
         }
       }, [open]);
 
@@ -146,7 +147,7 @@ describe('Drawer', () => {
       );
     };
     const { container } = render(<RefDemo />);
-    fireEvent.click(container.querySelector('a'));
+    fireEvent.click(container.querySelector('a')!);
     expect(fn).toHaveBeenCalled();
   });
 });
diff --git a/components/drawer/__tests__/MultiDrawer.test.js b/components/drawer/__tests__/MultiDrawer.test.tsx
similarity index 60%
rename from components/drawer/__tests__/MultiDrawer.test.js
rename to components/drawer/__tests__/MultiDrawer.test.tsx
index 2a8fa87ec1..61089fd8d7 100644
--- a/components/drawer/__tests__/MultiDrawer.test.js
+++ b/components/drawer/__tests__/MultiDrawer.test.tsx
@@ -1,9 +1,21 @@
+import type { DrawerPopupProps } from 'rc-drawer/lib/DrawerPopup';
 import React from 'react';
 import Drawer from '..';
 import { fireEvent, render } from '../../../tests/utils';
 import Button from '../../button';
 
-class MultiDrawer extends React.Component {
+interface DrawerPropsType {
+  push?: DrawerPopupProps['push'];
+  placement?: DrawerPopupProps['placement'];
+}
+
+interface DrawerStateType {
+  open: boolean;
+  hasChildren: boolean;
+  childrenDrawer: boolean;
+}
+
+class MultiDrawer extends React.Component<DrawerPropsType, DrawerStateType> {
   state = { open: false, childrenDrawer: false, hasChildren: true };
 
   showDrawer = () => {
@@ -84,16 +96,11 @@ class MultiDrawer extends React.Component {
               padding: '10px 16px',
               textAlign: 'right',
               left: 0,
-              background: '#fff',
+              backgroundColor: '#fff',
               borderRadius: '0 0 4px 4px',
             }}
           >
-            <Button
-              style={{
-                marginRight: 8,
-              }}
-              onClick={this.onClose}
-            >
+            <Button style={{ marginRight: 8 }} onClick={this.onClose}>
               Cancel
             </Button>
             <Button onClick={this.onClose} type="primary">
@@ -110,53 +117,53 @@ class MultiDrawer extends React.Component {
 
 describe('Drawer', () => {
   it('render right MultiDrawer', () => {
-    const { container: wrapper } = render(<MultiDrawer placement="right" />);
-    fireEvent.click(wrapper.querySelector('button#open_drawer'));
-    fireEvent.click(wrapper.querySelector('button#open_two_drawer'));
+    const { container } = render(<MultiDrawer placement="right" />);
+    fireEvent.click(container.querySelector('button#open_drawer')!);
+    fireEvent.click(container.querySelector('button#open_two_drawer')!);
 
-    expect(wrapper.querySelector('.ant-drawer-content-wrapper')).toHaveStyle({
+    expect(container.querySelector('.ant-drawer-content-wrapper')).toHaveStyle({
       transform: 'translateX(-180px)',
     });
-    expect(wrapper.querySelectorAll('#two_drawer_text').length).toBe(1);
+    expect(container.querySelectorAll('#two_drawer_text').length).toBe(1);
   });
 
   it('render left MultiDrawer', () => {
-    const { container: wrapper } = render(<MultiDrawer placement="left" />);
-    fireEvent.click(wrapper.querySelector('button#open_drawer'));
-    fireEvent.click(wrapper.querySelector('button#open_two_drawer'));
+    const { container } = render(<MultiDrawer placement="left" />);
+    fireEvent.click(container.querySelector('button#open_drawer')!);
+    fireEvent.click(container.querySelector('button#open_two_drawer')!);
 
-    expect(wrapper.querySelector('.ant-drawer-content-wrapper')).toHaveStyle({
+    expect(container.querySelector('.ant-drawer-content-wrapper')).toHaveStyle({
       transform: 'translateX(180px)',
     });
-    expect(wrapper.querySelectorAll('#two_drawer_text').length).toBe(1);
-    fireEvent.click(wrapper.querySelector('.Two-level .ant-drawer-close'));
-    expect(wrapper.querySelector('.childrenDrawer').innerHTML).toEqual('false');
+    expect(container.querySelectorAll('#two_drawer_text').length).toBe(1);
+    fireEvent.click(container.querySelector('.Two-level .ant-drawer-close')!);
+    expect(container.querySelector('.childrenDrawer')?.innerHTML).toEqual('false');
   });
 
   it('render top MultiDrawer', () => {
-    const { container: wrapper } = render(<MultiDrawer placement="top" />);
-    fireEvent.click(wrapper.querySelector('button#open_drawer'));
-    fireEvent.click(wrapper.querySelector('button#open_two_drawer'));
-    expect(wrapper.querySelector('.ant-drawer-content-wrapper')).toHaveStyle({
+    const { container } = render(<MultiDrawer placement="top" />);
+    fireEvent.click(container.querySelector('button#open_drawer')!);
+    fireEvent.click(container.querySelector('button#open_two_drawer')!);
+    expect(container.querySelector('.ant-drawer-content-wrapper')).toHaveStyle({
       transform: 'translateY(180px)',
     });
-    expect(wrapper.querySelectorAll('#two_drawer_text').length).toBe(1);
+    expect(container.querySelectorAll('#two_drawer_text').length).toBe(1);
   });
 
   it('render MultiDrawer is child in unmount', () => {
-    const { container: wrapper } = render(<MultiDrawer placement="top" mask={false} />);
-    fireEvent.click(wrapper.querySelector('button#open_drawer'));
-    fireEvent.click(wrapper.querySelector('button#open_two_drawer'));
-    fireEvent.click(wrapper.querySelector('button#remove_drawer'));
+    const { container: wrapper } = render(<MultiDrawer placement="top" />);
+    fireEvent.click(wrapper.querySelector('button#open_drawer')!);
+    fireEvent.click(wrapper.querySelector('button#open_two_drawer')!);
+    fireEvent.click(wrapper.querySelector('button#remove_drawer')!);
 
     // Strange, testing-lib get wrong style in next branch.
-    expect(wrapper.querySelector('.ant-drawer-content-wrapper').style).toEqual(
+    expect((wrapper.querySelector('.ant-drawer-content-wrapper') as any).style).toEqual(
       expect.objectContaining({
         transform: '',
       }),
     );
 
-    fireEvent.click(wrapper.querySelector('button#open_two_drawer'));
+    fireEvent.click(wrapper.querySelector('button#open_two_drawer')!);
     expect(wrapper.querySelector('.ant-drawer-content-wrapper')).toHaveStyle({
       transform: 'translateY(180px)',
     });
@@ -164,28 +171,28 @@ describe('Drawer', () => {
   });
 
   it('custom MultiDrawer push distance', () => {
-    const { container: wrapper } = render(<MultiDrawer push={{ distance: 256 }} />);
-    fireEvent.click(wrapper.querySelector('button#open_drawer'));
-    fireEvent.click(wrapper.querySelector('button#open_two_drawer'));
-    expect(wrapper.querySelector('.ant-drawer-content-wrapper')).toHaveStyle({
+    const { container } = render(<MultiDrawer push={{ distance: 256 }} />);
+    fireEvent.click(container.querySelector('button#open_drawer')!);
+    fireEvent.click(container.querySelector('button#open_two_drawer')!);
+    expect(container.querySelector('.ant-drawer-content-wrapper')).toHaveStyle({
       transform: 'translateX(-256px)',
     });
   });
 
   it('custom MultiDrawer push with true', () => {
-    const { container: wrapper } = render(<MultiDrawer push />);
-    fireEvent.click(wrapper.querySelector('button#open_drawer'));
-    fireEvent.click(wrapper.querySelector('button#open_two_drawer'));
-    expect(wrapper.querySelector('.ant-drawer-content-wrapper')).toHaveStyle({
+    const { container } = render(<MultiDrawer push />);
+    fireEvent.click(container.querySelector('button#open_drawer')!);
+    fireEvent.click(container.querySelector('button#open_two_drawer')!);
+    expect(container.querySelector('.ant-drawer-content-wrapper')).toHaveStyle({
       transform: 'translateX(-180px)',
     });
   });
 
   it('custom MultiDrawer push with false', () => {
     const { container: wrapper } = render(<MultiDrawer push={false} />);
-    fireEvent.click(wrapper.querySelector('button#open_drawer'));
-    fireEvent.click(wrapper.querySelector('button#open_two_drawer'));
-    expect(wrapper.querySelector('.ant-drawer-content-wrapper').style).toEqual(
+    fireEvent.click(wrapper.querySelector('button#open_drawer')!);
+    fireEvent.click(wrapper.querySelector('button#open_two_drawer')!);
+    expect((wrapper.querySelector('.ant-drawer-content-wrapper') as any).style).toEqual(
       expect.objectContaining({
         transform: '',
       }),
diff --git a/components/drawer/__tests__/__snapshots__/Drawer.test.js.snap b/components/drawer/__tests__/__snapshots__/Drawer.test.tsx.snap
similarity index 100%
rename from components/drawer/__tests__/__snapshots__/Drawer.test.js.snap
rename to components/drawer/__tests__/__snapshots__/Drawer.test.tsx.snap
diff --git a/components/drawer/__tests__/__snapshots__/DrawerEvent.test.js.snap b/components/drawer/__tests__/__snapshots__/DrawerEvent.test.tsx.snap
similarity index 100%
rename from components/drawer/__tests__/__snapshots__/DrawerEvent.test.js.snap
rename to components/drawer/__tests__/__snapshots__/DrawerEvent.test.tsx.snap
diff --git a/components/drawer/__tests__/__snapshots__/demo-extend.test.tsx.snap b/components/drawer/__tests__/__snapshots__/demo-extend.test.tsx.snap
index e76873caaf..2c80bd290a 100644
--- a/components/drawer/__tests__/__snapshots__/demo-extend.test.tsx.snap
+++ b/components/drawer/__tests__/__snapshots__/demo-extend.test.tsx.snap
@@ -600,6 +600,7 @@ HTMLCollection [
                             class="ant-form-item-control-input-content"
                           >
                             <input
+                              aria-required="true"
                               class="ant-input"
                               id="name"
                               placeholder="Please enter user name"
@@ -655,6 +656,7 @@ HTMLCollection [
                                   http://
                                 </span>
                                 <input
+                                  aria-required="true"
                                   class="ant-input"
                                   id="url"
                                   placeholder="Please enter url"
@@ -710,6 +712,7 @@ HTMLCollection [
                             class="ant-form-item-control-input-content"
                           >
                             <div
+                              aria-required="true"
                               class="ant-select ant-select-in-form-item ant-select-single ant-select-show-arrow"
                             >
                               <div
@@ -724,6 +727,7 @@ HTMLCollection [
                                     aria-controls="owner_list"
                                     aria-haspopup="listbox"
                                     aria-owns="owner_list"
+                                    aria-required="true"
                                     autocomplete="off"
                                     class="ant-select-selection-search-input"
                                     id="owner"
@@ -887,6 +891,7 @@ HTMLCollection [
                             class="ant-form-item-control-input-content"
                           >
                             <div
+                              aria-required="true"
                               class="ant-select ant-select-in-form-item ant-select-single ant-select-show-arrow"
                             >
                               <div
@@ -901,6 +906,7 @@ HTMLCollection [
                                     aria-controls="type_list"
                                     aria-haspopup="listbox"
                                     aria-owns="type_list"
+                                    aria-required="true"
                                     autocomplete="off"
                                     class="ant-select-selection-search-input"
                                     id="type"
@@ -1069,6 +1075,7 @@ HTMLCollection [
                             class="ant-form-item-control-input-content"
                           >
                             <div
+                              aria-required="true"
                               class="ant-select ant-select-in-form-item ant-select-single ant-select-show-arrow"
                             >
                               <div
@@ -1083,6 +1090,7 @@ HTMLCollection [
                                     aria-controls="approver_list"
                                     aria-haspopup="listbox"
                                     aria-owns="approver_list"
+                                    aria-required="true"
                                     autocomplete="off"
                                     class="ant-select-selection-search-input"
                                     id="approver"
@@ -1246,6 +1254,7 @@ HTMLCollection [
                             class="ant-form-item-control-input-content"
                           >
                             <div
+                              aria-required="true"
                               class="ant-picker ant-picker-range"
                               style="width: 100%;"
                             >
@@ -2470,6 +2479,7 @@ HTMLCollection [
                             class="ant-form-item-control-input-content"
                           >
                             <textarea
+                              aria-required="true"
                               class="ant-input"
                               id="description"
                               placeholder="please enter url description"
diff --git a/components/drawer/__tests__/__snapshots__/demo.test.js.snap b/components/drawer/__tests__/__snapshots__/demo.test.ts.snap
similarity index 100%
rename from components/drawer/__tests__/__snapshots__/demo.test.js.snap
rename to components/drawer/__tests__/__snapshots__/demo.test.ts.snap
diff --git a/components/drawer/__tests__/demo.test.js b/components/drawer/__tests__/demo.test.ts
similarity index 100%
rename from components/drawer/__tests__/demo.test.js
rename to components/drawer/__tests__/demo.test.ts
diff --git a/components/dropdown/__tests__/dropdown-button.test.tsx b/components/dropdown/__tests__/dropdown-button.test.tsx
index 9c35b6eeb4..45d85a360f 100644
--- a/components/dropdown/__tests__/dropdown-button.test.tsx
+++ b/components/dropdown/__tests__/dropdown-button.test.tsx
@@ -47,21 +47,24 @@ describe('DropdownButton', () => {
       onOpenChange: () => {},
     };
 
-    render(<DropdownButton {...props} />);
+    const { rerender } = render(<DropdownButton {...props} />);
 
     Object.keys(props).forEach((key: keyof DropdownProps) => {
       expect(dropdownProps[key]).toBe(props[key]);
     });
+
+    rerender(<DropdownButton overlay={<div>123</div>} open />);
+    expect(dropdownProps.open).toBe(true);
   });
 
-  it("don't pass visible to Dropdown if it's not exits", () => {
+  it("don't pass open to Dropdown if it's not exits", () => {
     const menu = (
       <Menu>
         <Menu.Item key="1">foo</Menu.Item>
       </Menu>
     );
     render(<DropdownButton overlay={menu} />);
-    expect('visible' in dropdownProps).toBe(false);
+    expect('open' in dropdownProps).toBe(false);
   });
 
   it('should support href like Button', () => {
diff --git a/components/dropdown/__tests__/index.test.tsx b/components/dropdown/__tests__/index.test.tsx
index 8f9222113b..fe680d1bd9 100644
--- a/components/dropdown/__tests__/index.test.tsx
+++ b/components/dropdown/__tests__/index.test.tsx
@@ -95,6 +95,7 @@ describe('Dropdown', () => {
     expect(error).toHaveBeenCalledWith(
       expect.stringContaining("[antd: Dropdown] You are using 'topCenter'"),
     );
+    error.mockRestore();
   });
 
   // zombieJ: when replaced with react test lib, it may be mock fully content
diff --git a/components/dropdown/index.en-US.md b/components/dropdown/index.en-US.md
index b979c7bd99..c714cc1ed1 100644
--- a/components/dropdown/index.en-US.md
+++ b/components/dropdown/index.en-US.md
@@ -27,8 +27,8 @@ When there are more than a few options to choose from, you can wrap them in a `D
 | overlayStyle | The style of the dropdown root element | CSSProperties | - |  |
 | placement | Placement of popup menu: `bottom` `bottomLeft` `bottomRight` `top` `topLeft` `topRight` | string | `bottomLeft` |  |
 | trigger | The trigger mode which executes the dropdown action. Note that hover can't be used on touchscreens | Array&lt;`click`\|`hover`\|`contextMenu`> | \[`hover`] |  |
-| open | Whether the dropdown menu is currently open | boolean | - |  |
-| onOpenChange | Called when the open state is changed. Not trigger when hidden by click item | (open: boolean) => void | - |  |
+| open | Whether the dropdown menu is currently open | boolean | - | 4.23.0 |
+| onOpenChange | Called when the open state is changed. Not trigger when hidden by click item | (open: boolean) => void | - | 4.23.0 |
 
 You should use [Menu](/components/menu/) as `overlay`. The menu items and dividers are also available by using `Menu.Item` and `Menu.Divider`.
 
@@ -50,6 +50,6 @@ You should use [Menu](/components/menu/) as `overlay`. The menu items and divide
 | size | Size of the button, the same as [Button](/components/button/#API) | string | `default` |  |
 | trigger | The trigger mode which executes the dropdown action | Array&lt;`click`\|`hover`\|`contextMenu`> | \[`hover`] |  |
 | type | Type of the button, the same as [Button](/components/button/#API) | string | `default` |  |
-| open | Whether the dropdown menu is currently open | boolean | - |  |
+| open | Whether the dropdown menu is currently open | boolean | - | 4.23.0 |
 | onClick | The same as [Button](/components/button/#API): called when you click the button on the left | (event) => void | - |  |
-| onOpenChange | Called when the open state is changed | (open: boolean) => void | - |  |
+| onOpenChange | Called when the open state is changed | (open: boolean) => void | - | 4.23.0 |
diff --git a/components/dropdown/index.zh-CN.md b/components/dropdown/index.zh-CN.md
index 83f2857da1..f5592a9a4e 100644
--- a/components/dropdown/index.zh-CN.md
+++ b/components/dropdown/index.zh-CN.md
@@ -31,8 +31,8 @@ cover: https://gw.alipayobjects.com/zos/alicdn/eedWN59yJ/Dropdown.svg
 | overlayStyle | 下拉根元素的样式 | CSSProperties | - |  |
 | placement | 菜单弹出位置：`bottom` `bottomLeft` `bottomRight` `top` `topLeft` `topRight` | string | `bottomLeft` |  |
 | trigger | 触发下拉的行为, 移动端不支持 hover | Array&lt;`click`\|`hover`\|`contextMenu`> | \[`hover`] |  |
-| open | 菜单是否显示 | boolean | - |  |
-| onOpenChange | 菜单显示状态改变时调用，参数为 `open`。点击菜单按钮导致的消失不会触发 | (open: boolean) => void | - |  |
+| open | 菜单是否显示 | boolean | - | 4.23.0 |
+| onOpenChange | 菜单显示状态改变时调用，参数为 `visible`。点击菜单按钮导致的消失不会触发 | (open: boolean) => void | - | 4.23.0 |
 
 `overlay` 菜单使用 [Menu](/components/menu/)，还包括菜单项 `Menu.Item`，分割线 `Menu.Divider`。
 
@@ -54,6 +54,6 @@ cover: https://gw.alipayobjects.com/zos/alicdn/eedWN59yJ/Dropdown.svg
 | size | 按钮大小，和 [Button](/components/button/#API) 一致 | string | `default` |  |
 | trigger | 触发下拉的行为 | Array&lt;`click`\|`hover`\|`contextMenu`> | \[`hover`] |  |
 | type | 按钮类型，和 [Button](/components/button/#API) 一致 | string | `default` |  |
-| open | 菜单是否显示 | boolean | - |  |
+| open | 菜单是否显示 | boolean | - | 4.23.0 |
 | onClick | 点击左侧按钮的回调，和 [Button](/components/button/#API) 一致 | (event) => void | - |  |
-| onOpenChange | 菜单显示状态改变时调用，参数为 `open` | (open: boolean) => void | - |  |
+| onOpenChange | 菜单显示状态改变时调用，参数为 `visible` | (open: boolean) => void | - | 4.23.0 |
diff --git a/components/empty/__tests__/__snapshots__/demo.test.js.snap b/components/empty/__tests__/__snapshots__/demo.test.ts.snap
similarity index 100%
rename from components/empty/__tests__/__snapshots__/demo.test.js.snap
rename to components/empty/__tests__/__snapshots__/demo.test.ts.snap
diff --git a/components/empty/__tests__/__snapshots__/index.test.js.snap b/components/empty/__tests__/__snapshots__/index.test.tsx.snap
similarity index 100%
rename from components/empty/__tests__/__snapshots__/index.test.js.snap
rename to components/empty/__tests__/__snapshots__/index.test.tsx.snap
diff --git a/components/empty/__tests__/demo.test.js b/components/empty/__tests__/demo.test.ts
similarity index 100%
rename from components/empty/__tests__/demo.test.js
rename to components/empty/__tests__/demo.test.ts
diff --git a/components/empty/__tests__/index.test.js b/components/empty/__tests__/index.test.tsx
similarity index 89%
rename from components/empty/__tests__/index.test.js
rename to components/empty/__tests__/index.test.tsx
index 1cbd8b6e0b..ade004ab19 100644
--- a/components/empty/__tests__/index.test.js
+++ b/components/empty/__tests__/index.test.tsx
@@ -11,7 +11,7 @@ describe('Empty', () => {
 
   it('image size should change', () => {
     const { container } = render(<Empty imageStyle={{ height: 20 }} />);
-    expect(container.querySelector('.ant-empty-image').style.height).toBe('20px');
+    expect(container.querySelector<HTMLDivElement>('.ant-empty-image')?.style.height).toBe('20px');
   });
 
   it('description can be false', () => {
diff --git a/components/form/ErrorList.tsx b/components/form/ErrorList.tsx
index 9bcb037d38..35fa94d7a5 100644
--- a/components/form/ErrorList.tsx
+++ b/components/form/ErrorList.tsx
@@ -30,6 +30,7 @@ function toErrorEntity(
 }
 
 export interface ErrorListProps {
+  fieldId?: string;
   help?: React.ReactNode;
   helpStatus?: ValidateStatus;
   errors?: React.ReactNode[];
@@ -44,6 +45,7 @@ export default function ErrorList({
   errors = EMPTY_LIST,
   warnings = EMPTY_LIST,
   className: rootClassName,
+  fieldId,
   onVisibleChanged,
 }: ErrorListProps) {
   const { prefixCls } = React.useContext(FormItemPrefixContext);
@@ -72,6 +74,12 @@ export default function ErrorList({
     ];
   }, [help, helpStatus, debounceErrors, debounceWarnings]);
 
+  const helpProps: { id?: string } = {};
+
+  if (fieldId) {
+    helpProps.id = `${fieldId}_help`;
+  }
+
   return (
     <CSSMotion
       {...collapseMotion}
@@ -85,8 +93,10 @@ export default function ErrorList({
 
         return (
           <div
+            {...helpProps}
             className={classNames(baseClassName, holderClassName, rootClassName)}
             style={holderStyle}
+            role="alert"
           >
             <CSSMotionList
               keys={fullKeyList}
@@ -106,7 +116,6 @@ export default function ErrorList({
                 return (
                   <div
                     key={key}
-                    role="alert"
                     className={classNames(itemClassName, {
                       [`${baseClassName}-${errorStatus}`]: errorStatus,
                     })}
diff --git a/components/form/FormItem/index.tsx b/components/form/FormItem/index.tsx
index b1dcfb6220..edb587ce0e 100644
--- a/components/form/FormItem/index.tsx
+++ b/components/form/FormItem/index.tsx
@@ -40,11 +40,16 @@ interface MemoInputProps {
   value: any;
   update: any;
   children: React.ReactNode;
+  childProps: any[];
 }
 
 const MemoInput = React.memo(
   ({ children }: MemoInputProps) => children as JSX.Element,
-  (prev, next) => prev.value === next.value && prev.update === next.update,
+  (prev, next) =>
+    prev.value === next.value &&
+    prev.update === next.update &&
+    prev.childProps.length === next.childProps.length &&
+    prev.childProps.every((value, index) => value === next.childProps[index]),
 );
 
 export interface FormItemProps<Values = any>
@@ -313,6 +318,25 @@ function InternalFormItem<Values = any>(props: FormItemProps<Values>): React.Rea
             childProps.id = fieldId;
           }
 
+          if (props.help || mergedErrors.length > 0 || mergedWarnings.length > 0 || props.extra) {
+            const describedbyArr = [];
+            if (props.help || mergedErrors.length > 0) {
+              describedbyArr.push(`${fieldId}_help`);
+            }
+            if (props.extra) {
+              describedbyArr.push(`${fieldId}_extra`);
+            }
+            childProps['aria-describedby'] = describedbyArr.join(' ');
+          }
+
+          if (mergedErrors.length > 0) {
+            childProps['aria-invalid'] = 'true';
+          }
+
+          if (isRequired) {
+            childProps['aria-required'] = 'true';
+          }
+
           if (supportRef(children)) {
             childProps.ref = getItemRef(mergedName, children);
           }
@@ -330,8 +354,19 @@ function InternalFormItem<Values = any>(props: FormItemProps<Values>): React.Rea
             };
           });
 
+          // List of props that need to be watched for changes -> if changes are detected in MemoInput -> rerender
+          const watchingChildProps = [
+            childProps['aria-required'],
+            childProps['aria-invalid'],
+            childProps['aria-describedby'],
+          ];
+
           childNode = (
-            <MemoInput value={mergedControl[props.valuePropName || 'value']} update={children}>
+            <MemoInput
+              value={mergedControl[props.valuePropName || 'value']}
+              update={children}
+              childProps={watchingChildProps}
+            >
               {cloneElement(children, childProps)}
             </MemoInput>
           );
diff --git a/components/form/FormItemInput.tsx b/components/form/FormItemInput.tsx
index 58f602798a..f4223e67f7 100644
--- a/components/form/FormItemInput.tsx
+++ b/components/form/FormItemInput.tsx
@@ -32,6 +32,7 @@ export interface FormItemInputProps {
   extra?: React.ReactNode;
   status?: ValidateStatus;
   help?: React.ReactNode;
+  fieldId?: string;
 }
 
 const FormItemInput: React.FC<FormItemInputProps & FormItemInputMiscProps> = props => {
@@ -45,6 +46,7 @@ const FormItemInput: React.FC<FormItemInputProps & FormItemInputMiscProps> = pro
     _internalItemRender: formItemRender,
     extra,
     help,
+    fieldId,
     marginBottom,
     onErrorVisibleChanged,
   } = props;
@@ -72,6 +74,7 @@ const FormItemInput: React.FC<FormItemInputProps & FormItemInputMiscProps> = pro
       <div style={{ display: 'flex', flexWrap: 'nowrap' }}>
         <FormItemPrefixContext.Provider value={formItemContext}>
           <ErrorList
+            fieldId={fieldId}
             errors={errors}
             warnings={warnings}
             help={help}
@@ -84,9 +87,19 @@ const FormItemInput: React.FC<FormItemInputProps & FormItemInputMiscProps> = pro
       </div>
     ) : null;
 
+  const extraProps: { id?: string } = {};
+
+  if (fieldId) {
+    extraProps.id = `${fieldId}_extra`;
+  }
+
   // If extra = 0, && will goes wrong
   // 0&&error -> 0
-  const extraDom = extra ? <div className={`${baseClassName}-extra`}>{extra}</div> : null;
+  const extraDom = extra ? (
+    <div {...extraProps} className={`${baseClassName}-extra`}>
+      {extra}
+    </div>
+  ) : null;
 
   const dom =
     formItemRender && formItemRender.mark === 'pro_table_render' && formItemRender.render ? (
diff --git a/components/form/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/form/__tests__/__snapshots__/demo-extend.test.ts.snap
index 0e3745b57c..fe113f3768 100644
--- a/components/form/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/form/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -41,6 +41,7 @@ exports[`renders ./components/form/demo/advanced-search.md extend context correc
                   class="ant-form-item-control-input-content"
                 >
                   <input
+                    aria-required="true"
                     class="ant-input"
                     id="advanced_search_field-0"
                     placeholder="placeholder"
@@ -84,6 +85,7 @@ exports[`renders ./components/form/demo/advanced-search.md extend context correc
                   class="ant-form-item-control-input-content"
                 >
                   <div
+                    aria-required="true"
                     class="ant-select ant-select-in-form-item ant-select-single ant-select-show-arrow"
                   >
                     <div
@@ -98,6 +100,7 @@ exports[`renders ./components/form/demo/advanced-search.md extend context correc
                           aria-controls="advanced_search_field-1_list"
                           aria-haspopup="listbox"
                           aria-owns="advanced_search_field-1_list"
+                          aria-required="true"
                           autocomplete="off"
                           class="ant-select-selection-search-input"
                           id="advanced_search_field-1"
@@ -262,6 +265,7 @@ exports[`renders ./components/form/demo/advanced-search.md extend context correc
                   class="ant-form-item-control-input-content"
                 >
                   <input
+                    aria-required="true"
                     class="ant-input"
                     id="advanced_search_field-2"
                     placeholder="placeholder"
@@ -305,6 +309,7 @@ exports[`renders ./components/form/demo/advanced-search.md extend context correc
                   class="ant-form-item-control-input-content"
                 >
                   <input
+                    aria-required="true"
                     class="ant-input"
                     id="advanced_search_field-3"
                     placeholder="placeholder"
@@ -348,6 +353,7 @@ exports[`renders ./components/form/demo/advanced-search.md extend context correc
                   class="ant-form-item-control-input-content"
                 >
                   <div
+                    aria-required="true"
                     class="ant-select ant-select-in-form-item ant-select-single ant-select-show-arrow"
                   >
                     <div
@@ -362,6 +368,7 @@ exports[`renders ./components/form/demo/advanced-search.md extend context correc
                           aria-controls="advanced_search_field-4_list"
                           aria-haspopup="listbox"
                           aria-owns="advanced_search_field-4_list"
+                          aria-required="true"
                           autocomplete="off"
                           class="ant-select-selection-search-input"
                           id="advanced_search_field-4"
@@ -526,6 +533,7 @@ exports[`renders ./components/form/demo/advanced-search.md extend context correc
                   class="ant-form-item-control-input-content"
                 >
                   <input
+                    aria-required="true"
                     class="ant-input"
                     id="advanced_search_field-5"
                     placeholder="placeholder"
@@ -631,6 +639,7 @@ exports[`renders ./components/form/demo/basic.md extend context correctly 1`] =
             class="ant-form-item-control-input-content"
           >
             <input
+              aria-required="true"
               class="ant-input"
               id="basic_username"
               type="text"
@@ -672,6 +681,7 @@ exports[`renders ./components/form/demo/basic.md extend context correctly 1`] =
             >
               <input
                 action="click"
+                aria-required="true"
                 class="ant-input"
                 id="basic_password"
                 type="password"
@@ -815,6 +825,7 @@ Array [
               class="ant-form-item-control-input-content"
             >
               <input
+                aria-required="true"
                 class="ant-input"
                 id="basic_username"
                 type="text"
@@ -856,6 +867,7 @@ Array [
               >
                 <input
                   action="click"
+                  aria-required="true"
                   class="ant-input"
                   id="basic_password"
                   type="password"
@@ -1184,6 +1196,7 @@ Array [
               class="ant-form-item-control-input-content"
             >
               <input
+                aria-required="true"
                 class="ant-input"
                 id="responsive_username"
                 type="text"
@@ -1225,6 +1238,7 @@ Array [
               >
                 <input
                   action="click"
+                  aria-required="true"
                   class="ant-input"
                   id="responsive_password"
                   type="password"
@@ -1601,6 +1615,7 @@ exports[`renders ./components/form/demo/control-hooks.md extend context correctl
             class="ant-form-item-control-input-content"
           >
             <input
+              aria-required="true"
               class="ant-input"
               id="control-hooks_note"
               type="text"
@@ -1638,6 +1653,7 @@ exports[`renders ./components/form/demo/control-hooks.md extend context correctl
             class="ant-form-item-control-input-content"
           >
             <div
+              aria-required="true"
               class="ant-select ant-select-in-form-item ant-select-single ant-select-allow-clear ant-select-show-arrow"
             >
               <div
@@ -1652,6 +1668,7 @@ exports[`renders ./components/form/demo/control-hooks.md extend context correctl
                     aria-controls="control-hooks_gender_list"
                     aria-haspopup="listbox"
                     aria-owns="control-hooks_gender_list"
+                    aria-required="true"
                     autocomplete="off"
                     class="ant-select-selection-search-input"
                     id="control-hooks_gender"
@@ -1879,6 +1896,7 @@ exports[`renders ./components/form/demo/control-ref.md extend context correctly
             class="ant-form-item-control-input-content"
           >
             <input
+              aria-required="true"
               class="ant-input"
               id="control-ref_note"
               type="text"
@@ -1916,6 +1934,7 @@ exports[`renders ./components/form/demo/control-ref.md extend context correctly
             class="ant-form-item-control-input-content"
           >
             <div
+              aria-required="true"
               class="ant-select ant-select-in-form-item ant-select-single ant-select-allow-clear ant-select-show-arrow"
             >
               <div
@@ -1930,6 +1949,7 @@ exports[`renders ./components/form/demo/control-ref.md extend context correctly
                     aria-controls="control-ref_gender_list"
                     aria-haspopup="listbox"
                     aria-owns="control-ref_gender_list"
+                    aria-required="true"
                     autocomplete="off"
                     class="ant-select-selection-search-input"
                     id="control-ref_gender"
@@ -5972,6 +5992,7 @@ exports[`renders ./components/form/demo/dynamic-form-items-complex.md extend con
             class="ant-form-item-control-input-content"
           >
             <div
+              aria-required="true"
               class="ant-select ant-select-in-form-item ant-select-single ant-select-show-arrow"
             >
               <div
@@ -5986,6 +6007,7 @@ exports[`renders ./components/form/demo/dynamic-form-items-complex.md extend con
                     aria-controls="dynamic_form_nest_item_area_list"
                     aria-haspopup="listbox"
                     aria-owns="dynamic_form_nest_item_area_list"
+                    aria-required="true"
                     autocomplete="off"
                     class="ant-select-selection-search-input"
                     id="dynamic_form_nest_item_area"
@@ -6347,6 +6369,7 @@ exports[`renders ./components/form/demo/dynamic-rule.md extend context correctly
             class="ant-form-item-control-input-content"
           >
             <input
+              aria-required="true"
               class="ant-input"
               id="dynamic_rule_username"
               placeholder="Please input your name"
@@ -6497,6 +6520,7 @@ exports[`renders ./components/form/demo/form-context.md extend context correctly
             class="ant-form-item-control-input-content"
           >
             <input
+              aria-required="true"
               class="ant-input"
               id="basicForm_group"
               type="text"
@@ -6648,6 +6672,7 @@ Array [
               class="ant-form-item-control-input-content"
             >
               <input
+                aria-required="true"
                 class="ant-input"
                 id="global_state_username"
                 type="text"
@@ -6721,6 +6746,7 @@ exports[`renders ./components/form/demo/inline-login.md extend context correctly
                 </span>
               </span>
               <input
+                aria-required="true"
                 class="ant-input"
                 id="horizontal_login_username"
                 placeholder="Username"
@@ -6775,6 +6801,7 @@ exports[`renders ./components/form/demo/inline-login.md extend context correctly
                 </span>
               </span>
               <input
+                aria-required="true"
                 class="ant-input"
                 id="horizontal_login_password"
                 placeholder="Password"
@@ -7209,6 +7236,7 @@ exports[`renders ./components/form/demo/layout-can-wrap.md extend context correc
             class="ant-form-item-control-input-content"
           >
             <input
+              aria-required="true"
               class="ant-input"
               id="wrap_username"
               type="text"
@@ -7248,6 +7276,7 @@ exports[`renders ./components/form/demo/layout-can-wrap.md extend context correc
             class="ant-form-item-control-input-content"
           >
             <input
+              aria-required="true"
               class="ant-input"
               id="wrap_password"
               type="text"
@@ -7333,6 +7362,7 @@ exports[`renders ./components/form/demo/nest-messages.md extend context correctl
             class="ant-form-item-control-input-content"
           >
             <input
+              aria-required="true"
               class="ant-input"
               id="nest-messages_user_name"
               type="text"
@@ -7635,6 +7665,7 @@ exports[`renders ./components/form/demo/normal-login.md extend context correctly
                 </span>
               </span>
               <input
+                aria-required="true"
                 class="ant-input"
                 id="normal_login_username"
                 placeholder="Username"
@@ -7689,6 +7720,7 @@ exports[`renders ./components/form/demo/normal-login.md extend context correctly
                 </span>
               </span>
               <input
+                aria-required="true"
                 class="ant-input"
                 id="normal_login_password"
                 placeholder="Password"
@@ -7902,6 +7934,7 @@ exports[`renders ./components/form/demo/register.md extend context correctly 1`]
             class="ant-form-item-control-input-content"
           >
             <input
+              aria-required="true"
               class="ant-input"
               id="register_email"
               type="text"
@@ -7943,6 +7976,7 @@ exports[`renders ./components/form/demo/register.md extend context correctly 1`]
             >
               <input
                 action="click"
+                aria-required="true"
                 class="ant-input"
                 id="register_password"
                 type="password"
@@ -8012,6 +8046,7 @@ exports[`renders ./components/form/demo/register.md extend context correctly 1`]
             >
               <input
                 action="click"
+                aria-required="true"
                 class="ant-input"
                 id="register_confirm"
                 type="password"
@@ -8124,6 +8159,7 @@ exports[`renders ./components/form/demo/register.md extend context correctly 1`]
             class="ant-form-item-control-input-content"
           >
             <input
+              aria-required="true"
               class="ant-input"
               id="register_nickname"
               type="text"
@@ -8161,6 +8197,7 @@ exports[`renders ./components/form/demo/register.md extend context correctly 1`]
             class="ant-form-item-control-input-content"
           >
             <div
+              aria-required="true"
               class="ant-select ant-cascader ant-select-in-form-item ant-select-single ant-select-allow-clear ant-select-show-arrow"
             >
               <div
@@ -8174,6 +8211,7 @@ exports[`renders ./components/form/demo/register.md extend context correctly 1`]
                     aria-controls="register_residence_list"
                     aria-haspopup="listbox"
                     aria-owns="register_residence_list"
+                    aria-required="true"
                     autocomplete="off"
                     class="ant-select-selection-search-input"
                     id="register_residence"
@@ -8521,6 +8559,7 @@ exports[`renders ./components/form/demo/register.md extend context correctly 1`]
                   </div>
                 </span>
                 <input
+                  aria-required="true"
                   class="ant-input"
                   id="register_phone"
                   type="text"
@@ -8631,6 +8670,7 @@ exports[`renders ./components/form/demo/register.md extend context correctly 1`]
                     class="ant-input-number-input-wrap"
                   >
                     <input
+                      aria-required="true"
                       autocomplete="off"
                       class="ant-input-number-input"
                       id="register_donation"
@@ -8818,6 +8858,7 @@ exports[`renders ./components/form/demo/register.md extend context correctly 1`]
             class="ant-form-item-control-input-content"
           >
             <div
+              aria-required="true"
               class="ant-select ant-select-in-form-item ant-select-auto-complete ant-select-single ant-select-customize-input ant-select-show-search"
             >
               <div
@@ -8832,6 +8873,7 @@ exports[`renders ./components/form/demo/register.md extend context correctly 1`]
                     aria-controls="register_website_list"
                     aria-haspopup="listbox"
                     aria-owns="register_website_list"
+                    aria-required="true"
                     autocomplete="off"
                     class="ant-input ant-select-selection-search-input"
                     id="register_website"
@@ -8897,6 +8939,7 @@ exports[`renders ./components/form/demo/register.md extend context correctly 1`]
               data-count="0 / 100"
             >
               <textarea
+                aria-required="true"
                 class="ant-input"
                 id="register_intro"
               />
@@ -8933,6 +8976,7 @@ exports[`renders ./components/form/demo/register.md extend context correctly 1`]
             class="ant-form-item-control-input-content"
           >
             <div
+              aria-required="true"
               class="ant-select ant-select-in-form-item ant-select-single ant-select-show-arrow"
             >
               <div
@@ -8947,6 +8991,7 @@ exports[`renders ./components/form/demo/register.md extend context correctly 1`]
                     aria-controls="register_gender_list"
                     aria-haspopup="listbox"
                     aria-owns="register_gender_list"
+                    aria-required="true"
                     autocomplete="off"
                     class="ant-select-selection-search-input"
                     id="register_gender"
@@ -9129,6 +9174,7 @@ exports[`renders ./components/form/demo/register.md extend context correctly 1`]
                 style="padding-left:4px;padding-right:4px"
               >
                 <input
+                  aria-required="true"
                   class="ant-input"
                   id="register_captcha"
                   type="text"
@@ -10986,6 +11032,7 @@ exports[`renders ./components/form/demo/time-related-controls.md extend context
                 class="ant-picker-input"
               >
                 <input
+                  aria-required="true"
                   autocomplete="off"
                   id="time_related_controls_date-picker"
                   placeholder="Select date"
@@ -11611,6 +11658,7 @@ exports[`renders ./components/form/demo/time-related-controls.md extend context
                 class="ant-picker-input"
               >
                 <input
+                  aria-required="true"
                   autocomplete="off"
                   id="time_related_controls_date-time-picker"
                   placeholder="Select date"
@@ -13589,6 +13637,7 @@ exports[`renders ./components/form/demo/time-related-controls.md extend context
                 class="ant-picker-input"
               >
                 <input
+                  aria-required="true"
                   autocomplete="off"
                   id="time_related_controls_month-picker"
                   placeholder="Select month"
@@ -13844,6 +13893,7 @@ exports[`renders ./components/form/demo/time-related-controls.md extend context
             class="ant-form-item-control-input-content"
           >
             <div
+              aria-required="true"
               class="ant-picker ant-picker-range"
             >
               <div
@@ -15054,6 +15104,7 @@ exports[`renders ./components/form/demo/time-related-controls.md extend context
             class="ant-form-item-control-input-content"
           >
             <div
+              aria-required="true"
               class="ant-picker ant-picker-range"
             >
               <div
@@ -17085,6 +17136,7 @@ exports[`renders ./components/form/demo/time-related-controls.md extend context
                 class="ant-picker-input"
               >
                 <input
+                  aria-required="true"
                   autocomplete="off"
                   id="time_related_controls_time-picker"
                   placeholder="Select time"
@@ -18748,6 +18800,7 @@ exports[`renders ./components/form/demo/validate-other.md extend context correct
             class="ant-form-item-control-input-content"
           >
             <div
+              aria-required="true"
               class="ant-select ant-select-in-form-item ant-select-has-feedback ant-select-single ant-select-show-arrow"
             >
               <div
@@ -18762,6 +18815,7 @@ exports[`renders ./components/form/demo/validate-other.md extend context correct
                     aria-controls="validate_other_select_list"
                     aria-haspopup="listbox"
                     aria-owns="validate_other_select_list"
+                    aria-required="true"
                     autocomplete="off"
                     class="ant-select-selection-search-input"
                     id="validate_other_select"
@@ -18920,6 +18974,7 @@ exports[`renders ./components/form/demo/validate-other.md extend context correct
             class="ant-form-item-control-input-content"
           >
             <div
+              aria-required="true"
               class="ant-select ant-select-in-form-item ant-select-multiple ant-select-show-search"
             >
               <div
@@ -18942,6 +18997,7 @@ exports[`renders ./components/form/demo/validate-other.md extend context correct
                         aria-controls="validate_other_select-multiple_list"
                         aria-haspopup="listbox"
                         aria-owns="validate_other_select-multiple_list"
+                        aria-required="true"
                         autocomplete="off"
                         class="ant-select-selection-search-input"
                         id="validate_other_select-multiple"
@@ -19476,6 +19532,7 @@ exports[`renders ./components/form/demo/validate-other.md extend context correct
             class="ant-form-item-control-input-content"
           >
             <div
+              aria-required="true"
               class="ant-radio-group ant-radio-group-outline"
               id="validate_other_radio-button"
             >
@@ -20095,6 +20152,7 @@ exports[`renders ./components/form/demo/validate-other.md extend context correct
                 >
                   <input
                     accept=""
+                    aria-describedby="validate_other_upload_extra"
                     id="validate_other_upload"
                     style="display:none"
                     type="file"
@@ -20136,6 +20194,7 @@ exports[`renders ./components/form/demo/validate-other.md extend context correct
         </div>
         <div
           class="ant-form-item-extra"
+          id="validate_other_upload_extra"
         >
           longgggggggggggggggggggggggggggggggggg
         </div>
@@ -26409,6 +26468,7 @@ exports[`renders ./components/form/demo/warning-only.md extend context correctly
             class="ant-form-item-control-input-content"
           >
             <input
+              aria-required="true"
               class="ant-input"
               id="url"
               placeholder="input placeholder"
diff --git a/components/form/__tests__/__snapshots__/demo.test.js.snap b/components/form/__tests__/__snapshots__/demo.test.ts.snap
similarity index 99%
rename from components/form/__tests__/__snapshots__/demo.test.js.snap
rename to components/form/__tests__/__snapshots__/demo.test.ts.snap
index d1619e60c2..1912c1ef50 100644
--- a/components/form/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/form/__tests__/__snapshots__/demo.test.ts.snap
@@ -41,6 +41,7 @@ exports[`renders ./components/form/demo/advanced-search.md correctly 1`] = `
                   class="ant-form-item-control-input-content"
                 >
                   <input
+                    aria-required="true"
                     class="ant-input"
                     id="advanced_search_field-0"
                     placeholder="placeholder"
@@ -84,6 +85,7 @@ exports[`renders ./components/form/demo/advanced-search.md correctly 1`] = `
                   class="ant-form-item-control-input-content"
                 >
                   <div
+                    aria-required="true"
                     class="ant-select ant-select-in-form-item ant-select-single ant-select-show-arrow"
                   >
                     <div
@@ -98,6 +100,7 @@ exports[`renders ./components/form/demo/advanced-search.md correctly 1`] = `
                           aria-controls="advanced_search_field-1_list"
                           aria-haspopup="listbox"
                           aria-owns="advanced_search_field-1_list"
+                          aria-required="true"
                           autocomplete="off"
                           class="ant-select-selection-search-input"
                           id="advanced_search_field-1"
@@ -180,6 +183,7 @@ exports[`renders ./components/form/demo/advanced-search.md correctly 1`] = `
                   class="ant-form-item-control-input-content"
                 >
                   <input
+                    aria-required="true"
                     class="ant-input"
                     id="advanced_search_field-2"
                     placeholder="placeholder"
@@ -223,6 +227,7 @@ exports[`renders ./components/form/demo/advanced-search.md correctly 1`] = `
                   class="ant-form-item-control-input-content"
                 >
                   <input
+                    aria-required="true"
                     class="ant-input"
                     id="advanced_search_field-3"
                     placeholder="placeholder"
@@ -266,6 +271,7 @@ exports[`renders ./components/form/demo/advanced-search.md correctly 1`] = `
                   class="ant-form-item-control-input-content"
                 >
                   <div
+                    aria-required="true"
                     class="ant-select ant-select-in-form-item ant-select-single ant-select-show-arrow"
                   >
                     <div
@@ -280,6 +286,7 @@ exports[`renders ./components/form/demo/advanced-search.md correctly 1`] = `
                           aria-controls="advanced_search_field-4_list"
                           aria-haspopup="listbox"
                           aria-owns="advanced_search_field-4_list"
+                          aria-required="true"
                           autocomplete="off"
                           class="ant-select-selection-search-input"
                           id="advanced_search_field-4"
@@ -362,6 +369,7 @@ exports[`renders ./components/form/demo/advanced-search.md correctly 1`] = `
                   class="ant-form-item-control-input-content"
                 >
                   <input
+                    aria-required="true"
                     class="ant-input"
                     id="advanced_search_field-5"
                     placeholder="placeholder"
@@ -467,6 +475,7 @@ exports[`renders ./components/form/demo/basic.md correctly 1`] = `
             class="ant-form-item-control-input-content"
           >
             <input
+              aria-required="true"
               class="ant-input"
               id="basic_username"
               type="text"
@@ -508,6 +517,7 @@ exports[`renders ./components/form/demo/basic.md correctly 1`] = `
             >
               <input
                 action="click"
+                aria-required="true"
                 class="ant-input"
                 id="basic_password"
                 type="password"
@@ -651,6 +661,7 @@ Array [
               class="ant-form-item-control-input-content"
             >
               <input
+                aria-required="true"
                 class="ant-input"
                 id="basic_username"
                 type="text"
@@ -692,6 +703,7 @@ Array [
               >
                 <input
                   action="click"
+                  aria-required="true"
                   class="ant-input"
                   id="basic_password"
                   type="password"
@@ -913,6 +925,7 @@ Array [
               class="ant-form-item-control-input-content"
             >
               <input
+                aria-required="true"
                 class="ant-input"
                 id="responsive_username"
                 type="text"
@@ -954,6 +967,7 @@ Array [
               >
                 <input
                   action="click"
+                  aria-required="true"
                   class="ant-input"
                   id="responsive_password"
                   type="password"
@@ -1223,6 +1237,7 @@ exports[`renders ./components/form/demo/control-hooks.md correctly 1`] = `
             class="ant-form-item-control-input-content"
           >
             <input
+              aria-required="true"
               class="ant-input"
               id="control-hooks_note"
               type="text"
@@ -1260,6 +1275,7 @@ exports[`renders ./components/form/demo/control-hooks.md correctly 1`] = `
             class="ant-form-item-control-input-content"
           >
             <div
+              aria-required="true"
               class="ant-select ant-select-in-form-item ant-select-single ant-select-allow-clear ant-select-show-arrow"
             >
               <div
@@ -1274,6 +1290,7 @@ exports[`renders ./components/form/demo/control-hooks.md correctly 1`] = `
                     aria-controls="control-hooks_gender_list"
                     aria-haspopup="listbox"
                     aria-owns="control-hooks_gender_list"
+                    aria-required="true"
                     autocomplete="off"
                     class="ant-select-selection-search-input"
                     id="control-hooks_gender"
@@ -1402,6 +1419,7 @@ exports[`renders ./components/form/demo/control-ref.md correctly 1`] = `
             class="ant-form-item-control-input-content"
           >
             <input
+              aria-required="true"
               class="ant-input"
               id="control-ref_note"
               type="text"
@@ -1439,6 +1457,7 @@ exports[`renders ./components/form/demo/control-ref.md correctly 1`] = `
             class="ant-form-item-control-input-content"
           >
             <div
+              aria-required="true"
               class="ant-select ant-select-in-form-item ant-select-single ant-select-allow-clear ant-select-show-arrow"
             >
               <div
@@ -1453,6 +1472,7 @@ exports[`renders ./components/form/demo/control-ref.md correctly 1`] = `
                     aria-controls="control-ref_gender_list"
                     aria-haspopup="listbox"
                     aria-owns="control-ref_gender_list"
+                    aria-required="true"
                     autocomplete="off"
                     class="ant-select-selection-search-input"
                     id="control-ref_gender"
@@ -3455,6 +3475,7 @@ exports[`renders ./components/form/demo/dynamic-form-items-complex.md correctly
             class="ant-form-item-control-input-content"
           >
             <div
+              aria-required="true"
               class="ant-select ant-select-in-form-item ant-select-single ant-select-show-arrow"
             >
               <div
@@ -3469,6 +3490,7 @@ exports[`renders ./components/form/demo/dynamic-form-items-complex.md correctly
                     aria-controls="dynamic_form_nest_item_area_list"
                     aria-haspopup="listbox"
                     aria-owns="dynamic_form_nest_item_area_list"
+                    aria-required="true"
                     autocomplete="off"
                     class="ant-select-selection-search-input"
                     id="dynamic_form_nest_item_area"
@@ -3748,6 +3770,7 @@ exports[`renders ./components/form/demo/dynamic-rule.md correctly 1`] = `
             class="ant-form-item-control-input-content"
           >
             <input
+              aria-required="true"
               class="ant-input"
               id="dynamic_rule_username"
               placeholder="Please input your name"
@@ -3898,6 +3921,7 @@ exports[`renders ./components/form/demo/form-context.md correctly 1`] = `
             class="ant-form-item-control-input-content"
           >
             <input
+              aria-required="true"
               class="ant-input"
               id="basicForm_group"
               type="text"
@@ -4049,6 +4073,7 @@ Array [
               class="ant-form-item-control-input-content"
             >
               <input
+                aria-required="true"
                 class="ant-input"
                 id="global_state_username"
                 type="text"
@@ -4122,6 +4147,7 @@ exports[`renders ./components/form/demo/inline-login.md correctly 1`] = `
                 </span>
               </span>
               <input
+                aria-required="true"
                 class="ant-input"
                 id="horizontal_login_username"
                 placeholder="Username"
@@ -4176,6 +4202,7 @@ exports[`renders ./components/form/demo/inline-login.md correctly 1`] = `
                 </span>
               </span>
               <input
+                aria-required="true"
                 class="ant-input"
                 id="horizontal_login_password"
                 placeholder="Password"
@@ -4610,6 +4637,7 @@ exports[`renders ./components/form/demo/layout-can-wrap.md correctly 1`] = `
             class="ant-form-item-control-input-content"
           >
             <input
+              aria-required="true"
               class="ant-input"
               id="wrap_username"
               type="text"
@@ -4649,6 +4677,7 @@ exports[`renders ./components/form/demo/layout-can-wrap.md correctly 1`] = `
             class="ant-form-item-control-input-content"
           >
             <input
+              aria-required="true"
               class="ant-input"
               id="wrap_password"
               type="text"
@@ -4734,6 +4763,7 @@ exports[`renders ./components/form/demo/nest-messages.md correctly 1`] = `
             class="ant-form-item-control-input-content"
           >
             <input
+              aria-required="true"
               class="ant-input"
               id="nest-messages_user_name"
               type="text"
@@ -5036,6 +5066,7 @@ exports[`renders ./components/form/demo/normal-login.md correctly 1`] = `
                 </span>
               </span>
               <input
+                aria-required="true"
                 class="ant-input"
                 id="normal_login_username"
                 placeholder="Username"
@@ -5090,6 +5121,7 @@ exports[`renders ./components/form/demo/normal-login.md correctly 1`] = `
                 </span>
               </span>
               <input
+                aria-required="true"
                 class="ant-input"
                 id="normal_login_password"
                 placeholder="Password"
@@ -5303,6 +5335,7 @@ exports[`renders ./components/form/demo/register.md correctly 1`] = `
             class="ant-form-item-control-input-content"
           >
             <input
+              aria-required="true"
               class="ant-input"
               id="register_email"
               type="text"
@@ -5344,6 +5377,7 @@ exports[`renders ./components/form/demo/register.md correctly 1`] = `
             >
               <input
                 action="click"
+                aria-required="true"
                 class="ant-input"
                 id="register_password"
                 type="password"
@@ -5413,6 +5447,7 @@ exports[`renders ./components/form/demo/register.md correctly 1`] = `
             >
               <input
                 action="click"
+                aria-required="true"
                 class="ant-input"
                 id="register_confirm"
                 type="password"
@@ -5501,6 +5536,7 @@ exports[`renders ./components/form/demo/register.md correctly 1`] = `
             class="ant-form-item-control-input-content"
           >
             <input
+              aria-required="true"
               class="ant-input"
               id="register_nickname"
               type="text"
@@ -5538,6 +5574,7 @@ exports[`renders ./components/form/demo/register.md correctly 1`] = `
             class="ant-form-item-control-input-content"
           >
             <div
+              aria-required="true"
               class="ant-select ant-cascader ant-select-in-form-item ant-select-single ant-select-allow-clear ant-select-show-arrow"
             >
               <div
@@ -5551,6 +5588,7 @@ exports[`renders ./components/form/demo/register.md correctly 1`] = `
                     aria-controls="register_residence_list"
                     aria-haspopup="listbox"
                     aria-owns="register_residence_list"
+                    aria-required="true"
                     autocomplete="off"
                     class="ant-select-selection-search-input"
                     id="register_residence"
@@ -5726,6 +5764,7 @@ exports[`renders ./components/form/demo/register.md correctly 1`] = `
                   </div>
                 </span>
                 <input
+                  aria-required="true"
                   class="ant-input"
                   id="register_phone"
                   type="text"
@@ -5836,6 +5875,7 @@ exports[`renders ./components/form/demo/register.md correctly 1`] = `
                     class="ant-input-number-input-wrap"
                   >
                     <input
+                      aria-required="true"
                       autocomplete="off"
                       class="ant-input-number-input"
                       id="register_donation"
@@ -5941,6 +5981,7 @@ exports[`renders ./components/form/demo/register.md correctly 1`] = `
             class="ant-form-item-control-input-content"
           >
             <div
+              aria-required="true"
               class="ant-select ant-select-in-form-item ant-select-auto-complete ant-select-single ant-select-customize-input ant-select-show-search"
             >
               <div
@@ -5955,6 +5996,7 @@ exports[`renders ./components/form/demo/register.md correctly 1`] = `
                     aria-controls="register_website_list"
                     aria-haspopup="listbox"
                     aria-owns="register_website_list"
+                    aria-required="true"
                     autocomplete="off"
                     class="ant-input ant-select-selection-search-input"
                     id="register_website"
@@ -6006,6 +6048,7 @@ exports[`renders ./components/form/demo/register.md correctly 1`] = `
               data-count="0 / 100"
             >
               <textarea
+                aria-required="true"
                 class="ant-input"
                 id="register_intro"
               />
@@ -6042,6 +6085,7 @@ exports[`renders ./components/form/demo/register.md correctly 1`] = `
             class="ant-form-item-control-input-content"
           >
             <div
+              aria-required="true"
               class="ant-select ant-select-in-form-item ant-select-single ant-select-show-arrow"
             >
               <div
@@ -6056,6 +6100,7 @@ exports[`renders ./components/form/demo/register.md correctly 1`] = `
                     aria-controls="register_gender_list"
                     aria-haspopup="listbox"
                     aria-owns="register_gender_list"
+                    aria-required="true"
                     autocomplete="off"
                     class="ant-select-selection-search-input"
                     id="register_gender"
@@ -6139,6 +6184,7 @@ exports[`renders ./components/form/demo/register.md correctly 1`] = `
                 style="padding-left:4px;padding-right:4px"
               >
                 <input
+                  aria-required="true"
                   class="ant-input"
                   id="register_captcha"
                   type="text"
@@ -7186,6 +7232,7 @@ exports[`renders ./components/form/demo/time-related-controls.md correctly 1`] =
                 class="ant-picker-input"
               >
                 <input
+                  aria-required="true"
                   autocomplete="off"
                   id="time_related_controls_date-picker"
                   placeholder="Select date"
@@ -7257,6 +7304,7 @@ exports[`renders ./components/form/demo/time-related-controls.md correctly 1`] =
                 class="ant-picker-input"
               >
                 <input
+                  aria-required="true"
                   autocomplete="off"
                   id="time_related_controls_date-time-picker"
                   placeholder="Select date"
@@ -7328,6 +7376,7 @@ exports[`renders ./components/form/demo/time-related-controls.md correctly 1`] =
                 class="ant-picker-input"
               >
                 <input
+                  aria-required="true"
                   autocomplete="off"
                   id="time_related_controls_month-picker"
                   placeholder="Select month"
@@ -7393,6 +7442,7 @@ exports[`renders ./components/form/demo/time-related-controls.md correctly 1`] =
             class="ant-form-item-control-input-content"
           >
             <div
+              aria-required="true"
               class="ant-picker ant-picker-range"
             >
               <div
@@ -7506,6 +7556,7 @@ exports[`renders ./components/form/demo/time-related-controls.md correctly 1`] =
             class="ant-form-item-control-input-content"
           >
             <div
+              aria-required="true"
               class="ant-picker ant-picker-range"
             >
               <div
@@ -7625,6 +7676,7 @@ exports[`renders ./components/form/demo/time-related-controls.md correctly 1`] =
                 class="ant-picker-input"
               >
                 <input
+                  aria-required="true"
                   autocomplete="off"
                   id="time_related_controls_time-picker"
                   placeholder="Select time"
@@ -7923,6 +7975,7 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
             class="ant-form-item-control-input-content"
           >
             <div
+              aria-required="true"
               class="ant-select ant-select-in-form-item ant-select-has-feedback ant-select-single ant-select-show-arrow"
             >
               <div
@@ -7937,6 +7990,7 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
                     aria-controls="validate_other_select_list"
                     aria-haspopup="listbox"
                     aria-owns="validate_other_select_list"
+                    aria-required="true"
                     autocomplete="off"
                     class="ant-select-selection-search-input"
                     id="validate_other_select"
@@ -8013,6 +8067,7 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
             class="ant-form-item-control-input-content"
           >
             <div
+              aria-required="true"
               class="ant-select ant-select-in-form-item ant-select-multiple ant-select-show-search"
             >
               <div
@@ -8035,6 +8090,7 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
                         aria-controls="validate_other_select-multiple_list"
                         aria-haspopup="listbox"
                         aria-owns="validate_other_select-multiple_list"
+                        aria-required="true"
                         autocomplete="off"
                         class="ant-select-selection-search-input"
                         id="validate_other_select-multiple"
@@ -8464,6 +8520,7 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
             class="ant-form-item-control-input-content"
           >
             <div
+              aria-required="true"
               class="ant-radio-group ant-radio-group-outline"
               id="validate_other_radio-button"
             >
@@ -9083,6 +9140,7 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
                 >
                   <input
                     accept=""
+                    aria-describedby="validate_other_upload_extra"
                     id="validate_other_upload"
                     style="display:none"
                     type="file"
@@ -9124,6 +9182,7 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
         </div>
         <div
           class="ant-form-item-extra"
+          id="validate_other_upload_extra"
         >
           longgggggggggggggggggggggggggggggggggg
         </div>
@@ -11066,6 +11125,7 @@ exports[`renders ./components/form/demo/warning-only.md correctly 1`] = `
             class="ant-form-item-control-input-content"
           >
             <input
+              aria-required="true"
               class="ant-input"
               id="url"
               placeholder="input placeholder"
diff --git a/components/form/__tests__/demo.test.js b/components/form/__tests__/demo.test.ts
similarity index 100%
rename from components/form/__tests__/demo.test.js
rename to components/form/__tests__/demo.test.ts
diff --git a/components/form/__tests__/index.test.js b/components/form/__tests__/index.test.js
index 31243c9ab6..c4263bbbcb 100644
--- a/components/form/__tests__/index.test.js
+++ b/components/form/__tests__/index.test.js
@@ -203,6 +203,158 @@ describe('Form', () => {
     );
   });
 
+  it('input element should have the prop aria-describedby pointing to the help id when there is a help message', () => {
+    const wrapper = mount(
+      <Form>
+        <Form.Item name="test" help="This is a help">
+          <input />
+        </Form.Item>
+      </Form>,
+    );
+
+    const input = wrapper.find('input');
+    expect(input.prop('aria-describedby')).toBe('test_help');
+    const help = wrapper.find('.ant-form-item-explain');
+    expect(help.prop('id')).toBe('test_help');
+  });
+
+  it('input element should not have the prop aria-describedby pointing to the help id when there is a help message and name is not defined', () => {
+    const wrapper = mount(
+      <Form>
+        <Form.Item help="This is a help">
+          <input />
+        </Form.Item>
+      </Form>,
+    );
+
+    const input = wrapper.find('input');
+    expect(input.prop('aria-describedby')).toBeUndefined();
+    const help = wrapper.find('.ant-form-item-explain');
+    expect(help.prop('id')).toBeUndefined();
+  });
+
+  it('input element should have the prop aria-describedby concatenated with the form name pointing to the help id when there is a help message', () => {
+    const wrapper = mount(
+      <Form name="form">
+        <Form.Item name="test" help="This is a help">
+          <input />
+        </Form.Item>
+      </Form>,
+    );
+
+    const input = wrapper.find('input');
+    expect(input.prop('aria-describedby')).toBe('form_test_help');
+    const help = wrapper.find('.ant-form-item-explain');
+    expect(help.prop('id')).toBe('form_test_help');
+  });
+
+  it('input element should have the prop aria-describedby pointing to the help id when there are errors', async () => {
+    const wrapper = mount(
+      <Form>
+        <Form.Item name="test" rules={[{ len: 3 }, { type: 'number' }]}>
+          <input />
+        </Form.Item>
+      </Form>,
+    );
+
+    const input = wrapper.find('input');
+    input.simulate('change', { target: { value: 'Invalid number' } });
+    await sleep(800);
+    wrapper.update();
+
+    const inputChanged = wrapper.find('input');
+    expect(inputChanged.prop('aria-describedby')).toBe('test_help');
+    const help = wrapper.find('.ant-form-item-explain');
+    expect(help.prop('id')).toBe('test_help');
+  });
+
+  it('input element should have the prop aria-invalid when there are errors', async () => {
+    const wrapper = mount(
+      <Form>
+        <Form.Item name="test" rules={[{ len: 3 }, { type: 'number' }]}>
+          <input />
+        </Form.Item>
+      </Form>,
+    );
+
+    const input = wrapper.find('input');
+    input.simulate('change', { target: { value: 'Invalid number' } });
+    await sleep(800);
+    wrapper.update();
+
+    const inputChanged = wrapper.find('input');
+    expect(inputChanged.prop('aria-invalid')).toBe('true');
+  });
+
+  it('input element should have the prop aria-required when the prop `required` is true', async () => {
+    const wrapper = mount(
+      <Form>
+        <Form.Item name="test" required>
+          <input />
+        </Form.Item>
+      </Form>,
+    );
+
+    const input = wrapper.find('input');
+    expect(input.prop('aria-required')).toBe('true');
+  });
+
+  it('input element should have the prop aria-required when there is a rule with required', async () => {
+    const wrapper = mount(
+      <Form>
+        <Form.Item name="test" rules={[{ required: true }]}>
+          <input />
+        </Form.Item>
+      </Form>,
+    );
+
+    const input = wrapper.find('input');
+    expect(input.prop('aria-required')).toBe('true');
+  });
+
+  it('input element should have the prop aria-describedby pointing to the extra id when there is a extra message', () => {
+    const wrapper = mount(
+      <Form>
+        <Form.Item name="test" extra="This is a extra message">
+          <input />
+        </Form.Item>
+      </Form>,
+    );
+
+    const input = wrapper.find('input');
+    expect(input.prop('aria-describedby')).toBe('test_extra');
+    const extra = wrapper.find('.ant-form-item-extra');
+    expect(extra.prop('id')).toBe('test_extra');
+  });
+
+  it('input element should not have the prop aria-describedby pointing to the extra id when there is a extra message and name is not defined', () => {
+    const wrapper = mount(
+      <Form>
+        <Form.Item extra="This is a extra message">
+          <input />
+        </Form.Item>
+      </Form>,
+    );
+
+    const input = wrapper.find('input');
+    expect(input.prop('aria-describedby')).toBeUndefined();
+    const extra = wrapper.find('.ant-form-item-extra');
+    expect(extra.prop('id')).toBeUndefined();
+  });
+
+  it('input element should have the prop aria-describedby pointing to the help and extra id when there is a help and extra message', () => {
+    const wrapper = mount(
+      <Form>
+        <Form.Item name="test" help="This is a help" extra="This is a extra message">
+          <input />
+        </Form.Item>
+      </Form>,
+    );
+
+    const input = wrapper.find('input');
+    expect(input.prop('aria-describedby')).toBe('test_help test_extra');
+  });
+
   describe('scrollToField', () => {
     function test(name, genForm) {
       it(name, () => {
@@ -710,9 +862,7 @@ describe('Form', () => {
     await sleep(100);
     wrapper.update();
     await sleep(100);
-    expect(wrapper.find('.ant-form-item-explain div').getDOMNode().getAttribute('role')).toBe(
-      'alert',
-    );
+    expect(wrapper.find('.ant-form-item-explain').getDOMNode().getAttribute('role')).toBe('alert');
   });
 
   it('return same form instance', () => {
diff --git a/components/icon/__tests__/index.test.tsx b/components/icon/__tests__/index.test.tsx
new file mode 100644
index 0000000000..39ba0b6f42
--- /dev/null
+++ b/components/icon/__tests__/index.test.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import Icon from '..';
+import { render } from '../../../tests/utils';
+
+// v3 兼容性测试
+describe('Icon', () => {
+  it('should render Icon', () => {
+    const { container } = render(<Icon />);
+    expect(container.firstChild).toBe(null);
+  });
+
+  it('should throw Error', () => {
+    const errSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+    render(<Icon />);
+    expect(errSpy).toHaveBeenCalled();
+  });
+});
diff --git a/components/icon/index.tsx b/components/icon/index.tsx
index 0ced5db7a7..7cc36928c5 100755
--- a/components/icon/index.tsx
+++ b/components/icon/index.tsx
@@ -1,6 +1,6 @@
 import warning from '../_util/warning';
 
-const Icon = () => {
+const Icon: React.FC = () => {
   warning(false, 'Icon', 'Empty Icon');
   return null;
 };
diff --git a/components/image/__tests__/__snapshots__/demo.test.js.snap b/components/image/__tests__/__snapshots__/demo.test.ts.snap
similarity index 100%
rename from components/image/__tests__/__snapshots__/demo.test.js.snap
rename to components/image/__tests__/__snapshots__/demo.test.ts.snap
diff --git a/components/image/__tests__/__snapshots__/index.test.js.snap b/components/image/__tests__/__snapshots__/index.test.tsx.snap
similarity index 100%
rename from components/image/__tests__/__snapshots__/index.test.js.snap
rename to components/image/__tests__/__snapshots__/index.test.tsx.snap
diff --git a/components/image/__tests__/demo.test.js b/components/image/__tests__/demo.test.ts
similarity index 100%
rename from components/image/__tests__/demo.test.js
rename to components/image/__tests__/demo.test.ts
diff --git a/components/image/__tests__/index.test.js b/components/image/__tests__/index.test.tsx
similarity index 65%
rename from components/image/__tests__/index.test.js
rename to components/image/__tests__/index.test.tsx
index 873be7e01b..0004d54c4a 100644
--- a/components/image/__tests__/index.test.js
+++ b/components/image/__tests__/index.test.tsx
@@ -11,60 +11,58 @@ describe('Image', () => {
   mountTest(Image);
   rtlTest(Image);
   it('Image preview props set false', () => {
-    const { container: wrapper } = render(<Image src={src} preview={false} />);
+    const { container } = render(<Image src={src} preview={false} />);
 
-    fireEvent.click(wrapper.querySelector('.ant-image'));
-    expect(wrapper.querySelector('.ant-image-preview-root')).toBe(null);
+    fireEvent.click(container.querySelector('.ant-image')!);
+    expect(container.querySelector('.ant-image-preview-root')).toBe(null);
   });
   it('Group preview props set false', () => {
-    const { container: wrapper } = render(
+    const { container } = render(
       <Image.PreviewGroup preview={false}>
         <Image src={src} />
       </Image.PreviewGroup>,
     );
 
-    fireEvent.click(wrapper.querySelector('.ant-image'));
+    fireEvent.click(container.querySelector('.ant-image')!);
 
-    expect(wrapper.querySelector('.ant-image-preview-root')).toBe(null);
+    expect(container.querySelector('.ant-image-preview-root')).toBe(null);
   });
 
   it('Default preview props', () => {
-    const { container: wrapper, baseElement } = render(
-      <Image src={src} preview={{ visible: true }} />,
-    );
+    const { container, baseElement } = render(<Image src={src} preview={{ visible: true }} />);
 
-    fireEvent.click(wrapper.querySelector('.ant-image'));
+    fireEvent.click(container.querySelector('.ant-image')!);
 
     expect(baseElement.querySelector('.ant-image-preview-mask')).toHaveClass('ant-fade');
     expect(baseElement.querySelector('.ant-image-preview')).toHaveClass('ant-zoom');
   });
   it('Default Group preview props', () => {
-    const { container: wrapper, baseElement } = render(
+    const { container, baseElement } = render(
       <Image.PreviewGroup preview={{ visible: true }}>
         <Image src={src} />
       </Image.PreviewGroup>,
     );
 
-    fireEvent.click(wrapper.querySelector('.ant-image'));
+    fireEvent.click(container.querySelector('.ant-image')!);
 
     expect(baseElement.querySelector('.ant-image-preview-mask')).toHaveClass('ant-fade');
     expect(baseElement.querySelector('.ant-image-preview')).toHaveClass('ant-zoom');
   });
   it('Customize preview props', () => {
-    const { container: wrapper, baseElement } = render(
+    const { container, baseElement } = render(
       <Image
         src={src}
         preview={{ visible: true, transitionName: 'abc', maskTransitionName: 'def' }}
       />,
     );
 
-    fireEvent.click(wrapper.querySelector('.ant-image'));
+    fireEvent.click(container.querySelector('.ant-image')!);
 
     expect(baseElement.querySelector('.ant-image-preview')).toHaveClass('abc');
     expect(baseElement.querySelector('.ant-image-preview-mask')).toHaveClass('def');
   });
   it('Customize Group preview props', () => {
-    const { container: wrapper, baseElement } = render(
+    const { container, baseElement } = render(
       <Image.PreviewGroup
         preview={{ visible: true, transitionName: 'abc', maskTransitionName: 'def' }}
       >
@@ -72,22 +70,21 @@ describe('Image', () => {
       </Image.PreviewGroup>,
     );
 
-    fireEvent.click(wrapper.querySelector('.ant-image'));
+    fireEvent.click(container.querySelector('.ant-image')!);
 
     expect(baseElement.querySelector('.ant-image-preview')).toHaveClass('abc');
     expect(baseElement.querySelector('.ant-image-preview-mask')).toHaveClass('def');
   });
   it('ConfigProvider getPopupContainer', () => {
-    const { container: wrapper, baseElement } = render(
+    const { container, baseElement } = render(
       <>
         <div className="container" />
-        <ConfigProvider getPopupContainer={() => document.querySelector('.container')}>
+        <ConfigProvider getPopupContainer={() => document.querySelector('.container')!}>
           <Image src={src} />
         </ConfigProvider>
       </>,
     );
-    fireEvent.click(wrapper.querySelector('.ant-image'));
-    const containerElement = baseElement.querySelector('.container');
-    expect(containerElement.children.length).not.toBe(0);
+    fireEvent.click(container.querySelector('.ant-image')!);
+    expect(baseElement.querySelector('.container')?.children.length).not.toBe(0);
   });
 });
diff --git a/components/input-number/__tests__/__snapshots__/demo.test.js.snap b/components/input-number/__tests__/__snapshots__/demo.test.ts.snap
similarity index 100%
rename from components/input-number/__tests__/__snapshots__/demo.test.js.snap
rename to components/input-number/__tests__/__snapshots__/demo.test.ts.snap
diff --git a/components/input-number/__tests__/__snapshots__/index.test.js.snap b/components/input-number/__tests__/__snapshots__/index.test.tsx.snap
similarity index 100%
rename from components/input-number/__tests__/__snapshots__/index.test.js.snap
rename to components/input-number/__tests__/__snapshots__/index.test.tsx.snap
diff --git a/components/input-number/__tests__/demo.test.js b/components/input-number/__tests__/demo.test.ts
similarity index 100%
rename from components/input-number/__tests__/demo.test.js
rename to components/input-number/__tests__/demo.test.ts
diff --git a/components/input-number/__tests__/index.test.js b/components/input-number/__tests__/index.test.tsx
similarity index 95%
rename from components/input-number/__tests__/index.test.js
rename to components/input-number/__tests__/index.test.tsx
index d745439380..6e670602dd 100644
--- a/components/input-number/__tests__/index.test.js
+++ b/components/input-number/__tests__/index.test.tsx
@@ -15,18 +15,18 @@ describe('InputNumber', () => {
   it('should return null when blur a empty input number', () => {
     const onChange = jest.fn();
     const { container } = render(<InputNumber defaultValue="1" onChange={onChange} />);
-    fireEvent.change(container.querySelector('input'), { target: { value: '' } });
+    fireEvent.change(container.querySelector('input')!, { target: { value: '' } });
     expect(onChange).toHaveBeenLastCalledWith(null);
   });
 
   it('should call onStep when press up or down button', () => {
     const onStep = jest.fn();
     const { container } = render(<InputNumber defaultValue={1} onStep={onStep} />);
-    fireEvent.mouseDown(container.querySelector('.ant-input-number-handler-up'));
+    fireEvent.mouseDown(container.querySelector('.ant-input-number-handler-up')!);
     expect(onStep).toHaveBeenCalledTimes(1);
     expect(onStep).toHaveBeenLastCalledWith(2, { offset: 1, type: 'up' });
 
-    fireEvent.mouseDown(container.querySelector('.ant-input-number-handler-down'));
+    fireEvent.mouseDown(container.querySelector('.ant-input-number-handler-down')!);
     expect(onStep).toHaveBeenCalledTimes(2);
     expect(onStep).toHaveBeenLastCalledWith(1, { offset: 1, type: 'down' });
   });
diff --git a/components/input-number/__tests__/prefix.test.js b/components/input-number/__tests__/prefix.test.tsx
similarity index 83%
rename from components/input-number/__tests__/prefix.test.js
rename to components/input-number/__tests__/prefix.test.tsx
index b741836e07..2588e1d2ed 100644
--- a/components/input-number/__tests__/prefix.test.js
+++ b/components/input-number/__tests__/prefix.test.tsx
@@ -10,15 +10,15 @@ describe('prefix', () => {
   );
   it('should support className when has prefix', () => {
     const { container } = render(<InputNumber prefix="suffix" className="my-class-name" />);
-    expect(container.firstChild?.className.includes('my-class-name')).toBe(true);
+    expect((container.firstChild as HTMLElement)?.className.includes('my-class-name')).toBe(true);
     expect(container.querySelector('input')?.className.includes('my-class-name')).toBe(false);
   });
 
   it('should trigger focus when prefix is clicked', () => {
     const { container } = render(<InputNumber prefix={<i>123</i>} />);
 
-    const mockFocus = jest.spyOn(container.querySelector('input'), 'focus');
-    fireEvent.mouseUp(container.querySelector('i'));
+    const mockFocus = jest.spyOn(container.querySelector('input')!, 'focus');
+    fireEvent.mouseUp(container.querySelector('i')!);
     expect(mockFocus).toHaveBeenCalled();
   });
 });
diff --git a/components/input/__tests__/Password.test.js b/components/input/__tests__/Password.test.tsx
similarity index 72%
rename from components/input/__tests__/Password.test.js
rename to components/input/__tests__/Password.test.tsx
index cb60b93a58..fc150cdca7 100644
--- a/components/input/__tests__/Password.test.js
+++ b/components/input/__tests__/Password.test.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-// eslint-disable-next-line import/no-unresolved
+import type { InputRef } from '..';
 import Input from '..';
 import focusTest from '../../../tests/shared/focusTest';
 import mountTest from '../../../tests/shared/mountTest';
@@ -13,12 +13,12 @@ describe('Input.Password', () => {
   rtlTest(Input.Password);
 
   it('should get input element from ref', () => {
-    const ref = React.createRef();
+    const ref = React.createRef<InputRef>();
     const onSelect = jest.fn();
 
     const { container } = render(<Input.Password onSelect={onSelect} ref={ref} />);
-    expect(ref.current.input instanceof HTMLInputElement).toBe(true);
-    fireEvent.select(container.querySelector('input'));
+    expect(ref.current?.input instanceof HTMLInputElement).toBe(true);
+    fireEvent.select(container.querySelector('input')!);
     expect(onSelect).toHaveBeenCalled();
   });
 
@@ -30,13 +30,13 @@ describe('Input.Password', () => {
 
   it('should change type when click', () => {
     const { asFragment, container } = render(<Input.Password />);
-    fireEvent.change(container.querySelector('input'), { target: { value: '111' } });
+    fireEvent.change(container.querySelector('input')!, { target: { value: '111' } });
     expect(asFragment().firstChild).toMatchSnapshot();
 
-    fireEvent.click(container.querySelector('.ant-input-password-icon'));
+    fireEvent.click(container.querySelector('.ant-input-password-icon')!);
     expect(asFragment().firstChild).toMatchSnapshot();
 
-    fireEvent.click(container.querySelector('.ant-input-password-icon'));
+    fireEvent.click(container.querySelector('.ant-input-password-icon')!);
     expect(asFragment().firstChild).toMatchSnapshot();
   });
 
@@ -50,7 +50,7 @@ describe('Input.Password', () => {
   it('should not toggle visibility when disabled prop is true', () => {
     const { container } = render(<Input.Password disabled />);
     expect(container.querySelectorAll('.anticon-eye-invisible').length).toBe(1);
-    fireEvent.click(container.querySelector('.anticon-eye-invisible'));
+    fireEvent.click(container.querySelector('.anticon-eye-invisible')!);
     expect(container.querySelectorAll('.anticon-eye').length).toBe(0);
   });
 
@@ -59,43 +59,43 @@ describe('Input.Password', () => {
       container: document.body,
     });
     expect(document.activeElement).toBe(container.querySelector('input'));
-    document.activeElement.setSelectionRange(2, 2);
-    expect(document.activeElement.selectionStart).toBe(2);
-    fireEvent.mouseDown(container.querySelector('.ant-input-password-icon'));
-    fireEvent.mouseUp(container.querySelector('.ant-input-password-icon'));
-    fireEvent.click(container.querySelector('.ant-input-password-icon'));
+    (document?.activeElement as any)?.setSelectionRange(2, 2);
+    expect((document?.activeElement as any)?.selectionStart).toBe(2);
+    fireEvent.mouseDown(container.querySelector('.ant-input-password-icon')!);
+    fireEvent.mouseUp(container.querySelector('.ant-input-password-icon')!);
+    fireEvent.click(container.querySelector('.ant-input-password-icon')!);
     expect(document.activeElement).toBe(container.querySelector('input'));
-    expect(document.activeElement.selectionStart).toBe(2);
+    expect((document?.activeElement as any).selectionStart).toBe(2);
     unmount();
   });
 
   // https://github.com/ant-design/ant-design/issues/20541
   it('should not show value attribute in input element', async () => {
     const { container } = render(<Input.Password />);
-    fireEvent.change(container.querySelector('input'), { target: { value: 'value' } });
+    fireEvent.change(container.querySelector('input')!, { target: { value: 'value' } });
     await sleep();
-    expect(container.querySelector('input').getAttribute('value')).toBeFalsy();
+    expect(container.querySelector('input')?.getAttribute('value')).toBeFalsy();
   });
 
   // https://github.com/ant-design/ant-design/issues/24526
   it('should not show value attribute in input element after blur it', async () => {
     const { container } = render(<Input.Password />);
-    fireEvent.change(container.querySelector('input'), { target: { value: 'value' } });
+    fireEvent.change(container.querySelector('input')!, { target: { value: 'value' } });
     await sleep();
-    expect(container.querySelector('input').getAttribute('value')).toBeFalsy();
-    fireEvent.blur(container.querySelector('input'));
+    expect(container.querySelector('input')?.getAttribute('value')).toBeFalsy();
+    fireEvent.blur(container.querySelector('input')!);
     await sleep();
-    expect(container.querySelector('input').getAttribute('value')).toBeFalsy();
-    fireEvent.focus(container.querySelector('input'));
+    expect(container.querySelector('input')?.getAttribute('value')).toBeFalsy();
+    fireEvent.focus(container.querySelector('input')!);
     await sleep();
-    expect(container.querySelector('input').getAttribute('value')).toBeFalsy();
+    expect(container.querySelector('input')?.getAttribute('value')).toBeFalsy();
   });
 
   // https://github.com/ant-design/ant-design/issues/20541
   it('could be unmount without errors', () => {
     expect(() => {
       const { container, unmount } = render(<Input.Password />);
-      fireEvent.change(container.querySelector('input'), { target: { value: 'value' } });
+      fireEvent.change(container.querySelector('input')!, { target: { value: 'value' } });
       unmount();
     }).not.toThrow();
   });
@@ -104,6 +104,6 @@ describe('Input.Password', () => {
   it('should not contain value attribute in input element with defaultValue', async () => {
     const { container } = render(<Input.Password defaultValue="value" />);
     await sleep();
-    expect(container.querySelector('input').getAttribute('value')).toBeFalsy();
+    expect(container.querySelector('input')?.getAttribute('value')).toBeFalsy();
   });
 });
diff --git a/components/input/__tests__/Search.test.js b/components/input/__tests__/Search.test.tsx
similarity index 70%
rename from components/input/__tests__/Search.test.js
rename to components/input/__tests__/Search.test.tsx
index bb35325cfa..a891512de4 100644
--- a/components/input/__tests__/Search.test.js
+++ b/components/input/__tests__/Search.test.tsx
@@ -4,6 +4,7 @@ import focusTest from '../../../tests/shared/focusTest';
 import mountTest from '../../../tests/shared/mountTest';
 import rtlTest from '../../../tests/shared/rtlTest';
 import Button from '../../button';
+import type { InputRef } from '../Input';
 import Search from '../Search';
 
 describe('Input.Search', () => {
@@ -42,24 +43,16 @@ describe('Input.Search', () => {
     const { container } = render(
       <Search defaultValue="search text" onSearch={onSearch} disabled />,
     );
-    fireEvent.click(container.querySelector('button'));
+    fireEvent.click(container.querySelector('button')!);
     expect(onSearch).toHaveBeenCalledTimes(0);
   });
 
   it('should trigger onSearch when click search icon', () => {
     const onSearch = jest.fn();
     const { container } = render(<Search defaultValue="search text" onSearch={onSearch} />);
-    fireEvent.click(container.querySelector('button'));
+    fireEvent.click(container.querySelector('button')!);
     expect(onSearch).toHaveBeenCalledTimes(1);
-    expect(onSearch).toHaveBeenCalledWith(
-      'search text',
-      expect.anything(),
-      // FIXME: should use following code
-      // expect.objectContaining({
-      //   type: 'click',
-      //   preventDefault: expect.any(Function),
-      // }),
-    );
+    expect(onSearch).toHaveBeenCalledWith('search text', expect.anything());
   });
 
   it('should trigger onSearch when click search button', () => {
@@ -67,17 +60,9 @@ describe('Input.Search', () => {
     const { container } = render(
       <Search defaultValue="search text" enterButton onSearch={onSearch} />,
     );
-    fireEvent.click(container.querySelector('button'));
+    fireEvent.click(container.querySelector('button')!);
     expect(onSearch).toHaveBeenCalledTimes(1);
-    expect(onSearch).toHaveBeenCalledWith(
-      'search text',
-      expect.anything(),
-      // FIXME: should use following code
-      // expect.objectContaining({
-      //   type: 'click',
-      //   preventDefault: expect.any(Function),
-      // }),
-    );
+    expect(onSearch).toHaveBeenCalledWith('search text', expect.anything());
   });
 
   it('should trigger onSearch when click search button with text', () => {
@@ -85,17 +70,9 @@ describe('Input.Search', () => {
     const { container } = render(
       <Search defaultValue="search text" enterButton="button text" onSearch={onSearch} />,
     );
-    fireEvent.click(container.querySelector('button'));
+    fireEvent.click(container.querySelector('button')!);
     expect(onSearch).toHaveBeenCalledTimes(1);
-    expect(onSearch).toHaveBeenCalledWith(
-      'search text',
-      expect.anything(),
-      // FIXME: should use following code
-      // expect.objectContaining({
-      //   type: 'click',
-      //   preventDefault: expect.any(Function),
-      // }),
-    );
+    expect(onSearch).toHaveBeenCalledWith('search text', expect.anything());
   });
 
   it('should trigger onSearch when click search button with customize button', () => {
@@ -107,17 +84,9 @@ describe('Input.Search', () => {
         onSearch={onSearch}
       />,
     );
-    fireEvent.click(container.querySelector('button'));
+    fireEvent.click(container.querySelector('button')!);
     expect(onSearch).toHaveBeenCalledTimes(1);
-    expect(onSearch).toHaveBeenCalledWith(
-      'search text',
-      expect.anything(),
-      // FIXME: should use following code
-      // expect.objectContaining({
-      //   type: 'click',
-      //   preventDefault: expect.any(Function),
-      // }),
-    );
+    expect(onSearch).toHaveBeenCalledWith('search text', expect.anything());
   });
 
   it('should trigger onSearch when click search button of native', () => {
@@ -134,56 +103,32 @@ describe('Input.Search', () => {
         onSearch={onSearch}
       />,
     );
-    fireEvent.click(container.querySelector('button'));
+    fireEvent.click(container.querySelector('button')!);
     expect(onSearch).toHaveBeenCalledTimes(1);
-    expect(onSearch).toHaveBeenCalledWith(
-      'search text',
-      expect.anything(),
-      // FIXME: should use following code
-      // expect.objectContaining({
-      //   type: 'click',
-      //   preventDefault: expect.any(Function),
-      // }),
-    );
+    expect(onSearch).toHaveBeenCalledWith('search text', expect.anything());
     expect(onButtonClick).toHaveBeenCalledTimes(1);
   });
 
   it('should trigger onSearch when press enter', () => {
     const onSearch = jest.fn();
     const { container } = render(<Search defaultValue="search text" onSearch={onSearch} />);
-    fireEvent.keyDown(container.querySelector('input'), { key: 'Enter', keyCode: 13 });
+    fireEvent.keyDown(container.querySelector('input')!, { key: 'Enter', keyCode: 13 });
     expect(onSearch).toHaveBeenCalledTimes(1);
-    expect(onSearch).toHaveBeenCalledWith(
-      'search text',
-      expect.anything(),
-      // FIXME: should use following code
-      // expect.objectContaining({
-      //   type: 'keydown',
-      //   preventDefault: expect.any(Function),
-      // }),
-    );
+    expect(onSearch).toHaveBeenCalledWith('search text', expect.anything());
   });
 
   // https://github.com/ant-design/ant-design/issues/34844
   it('should not trigger onSearch when press enter using chinese inputting method', () => {
     const onSearch = jest.fn();
     const { container } = render(<Search defaultValue="search text" onSearch={onSearch} />);
-    fireEvent.compositionStart(container.querySelector('input'));
-    fireEvent.keyDown(container.querySelector('input'), { key: 'Enter', keyCode: 13 });
+    fireEvent.compositionStart(container.querySelector('input')!);
+    fireEvent.keyDown(container.querySelector('input')!, { key: 'Enter', keyCode: 13 });
     expect(onSearch).not.toHaveBeenCalled();
 
-    fireEvent.compositionEnd(container.querySelector('input'));
-    fireEvent.keyDown(container.querySelector('input'), { key: 'Enter', keyCode: 13 });
+    fireEvent.compositionEnd(container.querySelector('input')!);
+    fireEvent.keyDown(container.querySelector('input')!, { key: 'Enter', keyCode: 13 });
     expect(onSearch).toHaveBeenCalledTimes(1);
-    expect(onSearch).toHaveBeenCalledWith(
-      'search text',
-      expect.anything(),
-      // FIXME: should use following code
-      // expect.objectContaining({
-      //   type: 'keydown',
-      //   preventDefault: expect.any(Function),
-      // }),
-    );
+    expect(onSearch).toHaveBeenCalledWith('search text', expect.anything());
   });
 
   // https://github.com/ant-design/ant-design/issues/14785
@@ -204,7 +149,7 @@ describe('Input.Search', () => {
     const { container } = render(
       <Search allowClear defaultValue="value" onSearch={onSearch} onChange={onChange} />,
     );
-    fireEvent.click(container.querySelector('.ant-input-clear-icon'));
+    fireEvent.click(container.querySelector('.ant-input-clear-icon')!);
     expect(onSearch).toHaveBeenLastCalledWith('', expect.anything());
     expect(onChange).toHaveBeenCalled();
   });
@@ -236,13 +181,13 @@ describe('Input.Search', () => {
   });
 
   it('should prevent search button mousedown event', () => {
-    const ref = React.createRef();
+    const ref = React.createRef<InputRef>();
     const { container } = render(<Search ref={ref} enterButton="button text" />, {
       container: document.body,
     });
-    ref.current.focus();
+    ref.current?.focus();
     expect(document.activeElement).toBe(container.querySelector('input'));
-    fireEvent.mouseDown(container.querySelector('button'));
+    fireEvent.mouseDown(container.querySelector('button')!);
     expect(document.activeElement).toBe(container.querySelector('input'));
   });
 
@@ -250,7 +195,7 @@ describe('Input.Search', () => {
     const ref = jest.fn();
     const { container } = render(<Search ref={ref} enterButton />);
     expect(() => {
-      fireEvent.mouseDown(container.querySelector('button'));
+      fireEvent.mouseDown(container.querySelector('button')!);
     }).not.toThrow();
   });
 
@@ -258,10 +203,10 @@ describe('Input.Search', () => {
   it('Search with allowClear should have one className only', () => {
     const { container } = render(<Search allowClear className="className" />);
     expect(
-      container.querySelector('.ant-input-group-wrapper').classList.contains('className'),
+      container.querySelector('.ant-input-group-wrapper')?.classList.contains('className'),
     ).toBe(true);
     expect(
-      container.querySelector('.ant-input-affix-wrapper').classList.contains('className'),
+      container.querySelector('.ant-input-affix-wrapper')?.classList.contains('className'),
     ).toBe(false);
   });
 });
diff --git a/components/input/__tests__/__snapshots__/Password.test.js.snap b/components/input/__tests__/__snapshots__/Password.test.tsx.snap
similarity index 100%
rename from components/input/__tests__/__snapshots__/Password.test.js.snap
rename to components/input/__tests__/__snapshots__/Password.test.tsx.snap
diff --git a/components/input/__tests__/__snapshots__/Search.test.js.snap b/components/input/__tests__/__snapshots__/Search.test.tsx.snap
similarity index 100%
rename from components/input/__tests__/__snapshots__/Search.test.js.snap
rename to components/input/__tests__/__snapshots__/Search.test.tsx.snap
diff --git a/components/input/__tests__/__snapshots__/demo.test.js.snap b/components/input/__tests__/__snapshots__/demo.test.ts.snap
similarity index 100%
rename from components/input/__tests__/__snapshots__/demo.test.js.snap
rename to components/input/__tests__/__snapshots__/demo.test.ts.snap
diff --git a/components/input/__tests__/__snapshots__/textarea.test.js.snap b/components/input/__tests__/__snapshots__/textarea.test.tsx.snap
similarity index 100%
rename from components/input/__tests__/__snapshots__/textarea.test.js.snap
rename to components/input/__tests__/__snapshots__/textarea.test.tsx.snap
diff --git a/components/input/__tests__/demo.test.js b/components/input/__tests__/demo.test.ts
similarity index 100%
rename from components/input/__tests__/demo.test.js
rename to components/input/__tests__/demo.test.ts
diff --git a/components/input/__tests__/textarea.test.js b/components/input/__tests__/textarea.test.tsx
similarity index 66%
rename from components/input/__tests__/textarea.test.js
rename to components/input/__tests__/textarea.test.tsx
index 95d8c01e13..54040450a2 100644
--- a/components/input/__tests__/textarea.test.js
+++ b/components/input/__tests__/textarea.test.tsx
@@ -1,8 +1,11 @@
 import { spyElementPrototypes } from 'rc-util/lib/test/domHook';
+import type { ChangeEventHandler, TextareaHTMLAttributes } from 'react';
 import React, { useState } from 'react';
 import Input from '..';
 import focusTest from '../../../tests/shared/focusTest';
+import type { RenderOptions } from '../../../tests/utils';
 import { fireEvent, render, sleep, triggerResize } from '../../../tests/utils';
+import type { TextAreaRef } from '../TextArea';
 
 const { TextArea } = Input;
 
@@ -12,27 +15,23 @@ describe('TextArea', () => {
   const originalGetComputedStyle = window.getComputedStyle;
   beforeAll(() => {
     Object.defineProperty(window, 'getComputedStyle', {
-      value: node => ({
-        getPropertyValue: prop => {
-          if (prop === 'box-sizing') {
-            return originalGetComputedStyle(node)[prop] || 'border-box';
-          }
-          return originalGetComputedStyle(node)[prop];
-        },
+      value: (node: Element) => ({
+        getPropertyValue: (prop: PropertyKey) =>
+          prop === 'box-sizing'
+            ? originalGetComputedStyle(node)[prop as unknown as number] || 'border-box'
+            : originalGetComputedStyle(node)[prop as unknown as number],
       }),
     });
   });
 
   afterAll(() => {
-    Object.defineProperty(window, 'getComputedStyle', {
-      value: originalGetComputedStyle,
-    });
+    Object.defineProperty(window, 'getComputedStyle', { value: originalGetComputedStyle });
   });
 
   it('should auto calculate height according to content length', async () => {
     const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
 
-    const ref = React.createRef();
+    const ref = React.createRef<TextAreaRef>();
 
     const genTextArea = (props = {}) => (
       <TextArea
@@ -47,7 +46,7 @@ describe('TextArea', () => {
 
     const { container, rerender } = render(genTextArea());
 
-    const mockFunc = jest.spyOn(ref.current.resizableTextArea, 'resizeTextarea');
+    const mockFunc = jest.spyOn(ref.current?.resizableTextArea!, 'resizeTextarea');
 
     rerender(genTextArea({ value: '1111\n2222\n3333' }));
     // wrapper.setProps({ value: '1111\n2222\n3333' });
@@ -59,7 +58,7 @@ describe('TextArea', () => {
     await sleep(0);
     expect(mockFunc).toHaveBeenCalledTimes(2);
 
-    expect(container.querySelector('textarea').style.overflow).toBeFalsy();
+    expect(container.querySelector('textarea')?.style.overflow).toBeFalsy();
 
     expect(errorSpy).not.toHaveBeenCalled();
     errorSpy.mockRestore();
@@ -72,12 +71,12 @@ describe('TextArea', () => {
       <TextArea onKeyDown={fakeHandleKeyDown} onPressEnter={fakeHandlePressEnter} />,
     );
     /** KeyCode 65 is A */
-    fireEvent.keyDown(container.querySelector('textarea'), { keyCode: 65 });
+    fireEvent.keyDown(container.querySelector('textarea')!, { keyCode: 65 });
     expect(fakeHandleKeyDown).toHaveBeenCalledTimes(1);
     expect(fakeHandlePressEnter).toHaveBeenCalledTimes(0);
 
     /** KeyCode 13 is Enter */
-    fireEvent.keyDown(container.querySelector('textarea'), { keyCode: 13 });
+    fireEvent.keyDown(container.querySelector('textarea')!, { keyCode: 13 });
     expect(fakeHandleKeyDown).toHaveBeenCalledTimes(2);
     expect(fakeHandlePressEnter).toHaveBeenCalledTimes(1);
   });
@@ -95,7 +94,7 @@ describe('TextArea', () => {
 
     it('maxLength should not block control', () => {
       const { container } = render(<TextArea maxLength={1} value="light" />);
-      expect(container.querySelector('textarea').value).toEqual('light');
+      expect(container.querySelector('textarea')?.value).toEqual('light');
     });
 
     it('should limit correctly when in control', () => {
@@ -105,21 +104,21 @@ describe('TextArea', () => {
       };
 
       const { container } = render(<Demo />);
-      fireEvent.change(container.querySelector('textarea'), { target: { value: 'light' } });
+      fireEvent.change(container.querySelector('textarea')!, { target: { value: 'light' } });
 
-      expect(container.querySelector('textarea').value).toEqual('l');
+      expect(container.querySelector('textarea')?.value).toEqual('l');
     });
 
     it('should exceed maxLength when use IME', () => {
       const onChange = jest.fn();
 
       const { container } = render(<TextArea maxLength={1} onChange={onChange} />);
-      fireEvent.compositionStart(container.querySelector('textarea'));
-      fireEvent.change(container.querySelector('textarea'), { target: { value: 'zhu' } });
-      fireEvent.compositionEnd(container.querySelector('textarea'), {
+      fireEvent.compositionStart(container.querySelector('textarea')!);
+      fireEvent.change(container.querySelector('textarea')!, { target: { value: 'zhu' } });
+      fireEvent.compositionEnd(container.querySelector('textarea')!, {
         currentTarget: { value: '竹' },
       });
-      fireEvent.change(container.querySelector('textarea'), { target: { value: '竹' } });
+      fireEvent.change(container.querySelector('textarea')!, { target: { value: '竹' } });
 
       expect(onChange).toHaveBeenLastCalledWith(
         expect.objectContaining({ target: expect.objectContaining({ value: '竹' }) }),
@@ -132,13 +131,13 @@ describe('TextArea', () => {
       const { container } = render(
         <TextArea maxLength={6} defaultValue="123456" onChange={onChange} />,
       );
-      fireEvent.change(container.querySelector('textarea'), {
+      fireEvent.change(container.querySelector('textarea')!, {
         target: { selectionStart: 1, value: 'w123456' },
       });
-      fireEvent.change(container.querySelector('textarea'), {
+      fireEvent.change(container.querySelector('textarea')!, {
         target: { selectionStart: 3, value: 'w123456' },
       });
-      expect(container.querySelector('textarea').value).toBe('123456');
+      expect(container.querySelector('textarea')?.value).toBe('123456');
     });
 
     // 拼音输入
@@ -148,21 +147,21 @@ describe('TextArea', () => {
       const { container } = render(
         <TextArea maxLength={6} defaultValue="1234" onChange={onChange} />,
       );
-      fireEvent.change(container.querySelector('textarea'), {
+      fireEvent.change(container.querySelector('textarea')!, {
         target: { selectionStart: 4, value: '1234' },
       });
-      fireEvent.compositionStart(container.querySelector('textarea'));
+      fireEvent.compositionStart(container.querySelector('textarea')!);
 
-      fireEvent.change(container.querySelector('textarea'), {
+      fireEvent.change(container.querySelector('textarea')!, {
         target: { selectionStart: 9, value: '1234z z z' },
       });
-      fireEvent.change(container.querySelector('textarea'), {
+      fireEvent.change(container.querySelector('textarea')!, {
         target: { selectionStart: 7, value: '1234组织者' },
       });
 
-      fireEvent.compositionEnd(container.querySelector('textarea'));
+      fireEvent.compositionEnd(container.querySelector('textarea')!);
 
-      expect(container.querySelector('textarea').value).toBe('1234组织');
+      expect(container.querySelector('textarea')?.value).toBe('1234组织');
     });
 
     // 2. 光标位于中间或开头，且当前字符数未达到6个，若选中的字符 + 原字符的长度超过6个，则显示原有字符
@@ -171,29 +170,29 @@ describe('TextArea', () => {
       const { container } = render(
         <TextArea maxLength={6} defaultValue="1234" onChange={onChange} />,
       );
-      fireEvent.change(container.querySelector('textarea'), {
+      fireEvent.change(container.querySelector('textarea')!, {
         target: { selectionStart: 2, value: '1234' },
       });
-      fireEvent.compositionStart(container.querySelector('textarea'));
+      fireEvent.compositionStart(container.querySelector('textarea')!);
 
-      fireEvent.change(container.querySelector('textarea'), {
+      fireEvent.change(container.querySelector('textarea')!, {
         target: { selectionStart: 2, value: '12z z z34' },
       });
-      fireEvent.change(container.querySelector('textarea'), {
+      fireEvent.change(container.querySelector('textarea')!, {
         target: { selectionStart: 5, value: '12组织者34' },
       });
 
-      fireEvent.compositionEnd(container.querySelector('textarea'));
+      fireEvent.compositionEnd(container.querySelector('textarea')!);
 
-      expect(container.querySelector('textarea').value).toBe('1234');
+      expect(container.querySelector('textarea')?.value).toBe('1234');
     });
   });
 
   it('when prop value not in this.props, resizeTextarea should be called', async () => {
-    const ref = React.createRef();
+    const ref = React.createRef<TextAreaRef>();
     const { container } = render(<TextArea aria-label="textarea" ref={ref} />);
-    const resizeTextarea = jest.spyOn(ref.current.resizableTextArea, 'resizeTextarea');
-    fireEvent.change(container.querySelector('textarea'), { target: { value: 'test' } });
+    const resizeTextarea = jest.spyOn(ref.current?.resizableTextArea!, 'resizeTextarea');
+    fireEvent.change(container.querySelector('textarea')!, { target: { value: 'test' } });
     expect(resizeTextarea).toHaveBeenCalled();
   });
 
@@ -203,7 +202,7 @@ describe('TextArea', () => {
     const { container } = render(
       <TextArea onPressEnter={onPressEnter} onKeyDown={onKeyDown} aria-label="textarea" />,
     );
-    fireEvent.keyDown(container.querySelector('textarea'), { keyCode: 13 });
+    fireEvent.keyDown(container.querySelector('textarea')!, { keyCode: 13 });
 
     expect(onPressEnter).toHaveBeenCalled();
     expect(onKeyDown).toHaveBeenCalled();
@@ -211,18 +210,15 @@ describe('TextArea', () => {
 
   it('should trigger onResize', async () => {
     const onResize = jest.fn();
-    const ref = React.createRef();
+    const ref = React.createRef<TextAreaRef>();
     render(<TextArea ref={ref} onResize={onResize} autoSize />);
     await sleep(100);
-    const target = ref.current.resizableTextArea.textArea;
+    const target = ref.current?.resizableTextArea?.textArea!;
     triggerResize(target);
     await Promise.resolve();
 
     expect(onResize).toHaveBeenCalledWith(
-      expect.objectContaining({
-        width: expect.any(Number),
-        height: expect.any(Number),
-      }),
+      expect.objectContaining({ width: expect.any(Number), height: expect.any(Number) }),
     );
   });
 
@@ -233,24 +229,24 @@ describe('TextArea', () => {
     );
     inputRerender(<Input value={undefined} />);
     textareaRerender(<TextArea value={undefined} />);
-    expect(textareaContainer.querySelector('textarea').value).toBe(
-      inputContainer.querySelector('input').value,
+    expect(textareaContainer.querySelector('textarea')?.value).toBe(
+      inputContainer.querySelector('input')?.value,
     );
   });
 
   describe('should support showCount', () => {
     it('maxLength', () => {
       const { container } = render(<TextArea maxLength={5} showCount value="12345" />);
-      expect(container.querySelector('textarea').value).toBe('12345');
-      expect(container.querySelector('.ant-input-textarea').getAttribute('data-count')).toBe(
+      expect(container.querySelector('textarea')?.value).toBe('12345');
+      expect(container.querySelector('.ant-input-textarea')?.getAttribute('data-count')).toBe(
         '5 / 5',
       );
     });
 
     it('control exceed maxLength', () => {
       const { container } = render(<TextArea maxLength={5} showCount value="12345678" />);
-      expect(container.querySelector('textarea').value).toBe('12345678');
-      expect(container.querySelector('.ant-input-textarea').getAttribute('data-count')).toBe(
+      expect(container.querySelector('textarea')?.value).toBe('12345678');
+      expect(container.querySelector('.ant-input-textarea')?.getAttribute('data-count')).toBe(
         '8 / 5',
       );
     });
@@ -258,29 +254,29 @@ describe('TextArea', () => {
     describe('emoji', () => {
       it('should minimize value between emoji length and maxLength', () => {
         const { container } = render(<TextArea maxLength={1} showCount value="👀" />);
-        expect(container.querySelector('textarea').value).toBe('👀');
-        expect(container.querySelector('.ant-input-textarea').getAttribute('data-count')).toBe(
+        expect(container.querySelector('textarea')?.value).toBe('👀');
+        expect(container.querySelector('.ant-input-textarea')?.getAttribute('data-count')).toBe(
           '1 / 1',
         );
 
         // fix: 当 maxLength 长度为 2 的时候，输入 emoji 之后 showCount 会显示 1/2，但是不能再输入了
         // zombieJ: 逻辑统一了，emoji 现在也可以正确计数了
         const { container: container1 } = render(<TextArea maxLength={2} showCount value="👀" />);
-        expect(container1.querySelector('.ant-input-textarea').getAttribute('data-count')).toBe(
+        expect(container1.querySelector('.ant-input-textarea')?.getAttribute('data-count')).toBe(
           '1 / 2',
         );
       });
 
       it('defaultValue should slice', () => {
         const { container } = render(<TextArea maxLength={1} defaultValue="🧐cut" />);
-        expect(container.querySelector('textarea').value).toBe('🧐');
+        expect(container.querySelector('textarea')?.value).toBe('🧐');
       });
 
       // 修改TextArea value截取规则后新增单测
       it('slice emoji', () => {
         const { container } = render(<TextArea maxLength={5} showCount value="1234😂" />);
-        expect(container.querySelector('textarea').value).toBe('1234😂');
-        expect(container.querySelector('.ant-input-textarea').getAttribute('data-count')).toBe(
+        expect(container.querySelector('textarea')?.value).toBe('1234😂');
+        expect(container.querySelector('.ant-input-textarea')?.getAttribute('data-count')).toBe(
           '5 / 5',
         );
       });
@@ -292,12 +288,12 @@ describe('TextArea', () => {
       );
 
       // Outer
-      expect(container.querySelector('div').classList.contains('bamboo')).toBeTruthy();
-      expect(container.querySelector('div').style.background).toEqual('red');
+      expect(container.querySelector('div')?.classList.contains('bamboo')).toBeTruthy();
+      expect(container.querySelector('div')?.style.background).toEqual('red');
 
       // Inner
-      expect(container.querySelector('.ant-input').classList.contains('bamboo')).toBeFalsy();
-      expect(container.querySelector('.ant-input').style.background).toBeFalsy();
+      expect(container.querySelector('.ant-input')?.classList.contains('bamboo')).toBeFalsy();
+      expect(container.querySelector<HTMLDivElement>('.ant-input')?.style.background).toBeFalsy();
     });
 
     it('count formatter', () => {
@@ -310,8 +306,8 @@ describe('TextArea', () => {
           value="12345"
         />,
       );
-      expect(container.querySelector('textarea').value).toBe('12345');
-      expect(container.querySelector('.ant-input-textarea').getAttribute('data-count')).toBe(
+      expect(container.querySelector('textarea')?.value).toBe('12345');
+      expect(container.querySelector('.ant-input-textarea')?.getAttribute('data-count')).toBe(
         '12345, 5, 5',
       );
     });
@@ -319,36 +315,40 @@ describe('TextArea', () => {
 
   it('should support size', async () => {
     const { asFragment, container } = render(<TextArea size="large" />);
-    expect(container.querySelector('textarea').classList.contains('ant-input-lg')).toBe(true);
+    expect(container.querySelector('textarea')?.classList.contains('ant-input-lg')).toBe(true);
     expect(asFragment().firstChild).toMatchSnapshot();
   });
 
   it('set mouse cursor position', () => {
     const defaultValue = '11111';
     const valLength = defaultValue.length;
-    const ref = React.createRef();
+    const ref = React.createRef<TextAreaRef>();
     render(<TextArea autoFocus ref={ref} defaultValue={defaultValue} />);
-    ref.current.resizableTextArea.textArea.setSelectionRange(valLength, valLength);
-    expect(ref.current.resizableTextArea.textArea.selectionStart).toEqual(5);
-    expect(ref.current.resizableTextArea.textArea.selectionEnd).toEqual(5);
+    ref.current?.resizableTextArea?.textArea.setSelectionRange(valLength, valLength);
+    expect(ref.current?.resizableTextArea?.textArea.selectionStart).toEqual(5);
+    expect(ref.current?.resizableTextArea?.textArea.selectionEnd).toEqual(5);
   });
 });
 
 describe('TextArea allowClear', () => {
   it('should change type when click', () => {
     const { asFragment, container } = render(<TextArea allowClear />);
-    fireEvent.change(container.querySelector('textarea'), { target: { value: '111' } });
-    expect(container.querySelector('textarea').value).toEqual('111');
+    fireEvent.change(container.querySelector('textarea')!, { target: { value: '111' } });
+    expect(container.querySelector('textarea')?.value).toEqual('111');
     expect(asFragment().firstChild).toMatchSnapshot();
-    fireEvent.click(container.querySelector('.ant-input-clear-icon'));
+    fireEvent.click(container.querySelector('.ant-input-clear-icon')!);
     expect(asFragment().firstChild).toMatchSnapshot();
-    expect(container.querySelector('textarea').value).toEqual('');
+    expect(container.querySelector('textarea')?.value).toEqual('');
   });
 
   it('should not show icon if value is undefined, null or empty string', () => {
-    const wrappers = [null, undefined, ''].map(val => render(<TextArea allowClear value={val} />));
+    const wrappers = [null, undefined, ''].map(val =>
+      render(
+        <TextArea allowClear value={val as TextareaHTMLAttributes<HTMLTextAreaElement>['value']} />,
+      ),
+    );
     wrappers.forEach(({ asFragment, container }) => {
-      expect(container.querySelector('textarea').value).toEqual('');
+      expect(container.querySelector('textarea')?.value).toEqual('');
       expect(container.querySelector('.ant-input-clear-icon-hidden')).toBeTruthy();
       expect(asFragment().firstChild).toMatchSnapshot();
     });
@@ -356,10 +356,15 @@ describe('TextArea allowClear', () => {
 
   it('should not show icon if defaultValue is undefined, null or empty string', () => {
     const wrappers = [null, undefined, ''].map(val =>
-      render(<TextArea allowClear defaultValue={val} />),
+      render(
+        <TextArea
+          allowClear
+          defaultValue={val as TextareaHTMLAttributes<HTMLTextAreaElement>['value']}
+        />,
+      ),
     );
     wrappers.forEach(({ asFragment, container }) => {
-      expect(container.querySelector('textarea').value).toEqual('');
+      expect(container.querySelector('textarea')?.value).toEqual('');
       expect(container.querySelector('.ant-input-clear-icon-hidden')).toBeTruthy();
       expect(asFragment().firstChild).toMatchSnapshot();
     });
@@ -368,36 +373,36 @@ describe('TextArea allowClear', () => {
   it('should trigger event correctly', () => {
     let argumentEventObjectType;
     let argumentEventObjectValue;
-    const onChange = e => {
+    const onChange: ChangeEventHandler<HTMLTextAreaElement> = e => {
       argumentEventObjectType = e.type;
       argumentEventObjectValue = e.target.value;
     };
     const { container } = render(<TextArea allowClear defaultValue="111" onChange={onChange} />);
-    fireEvent.click(container.querySelector('.ant-input-clear-icon'));
+    fireEvent.click(container.querySelector('.ant-input-clear-icon')!);
     expect(argumentEventObjectType).toBe('click');
     expect(argumentEventObjectValue).toBe('');
-    expect(container.querySelector('textarea').value).toBe('');
+    expect(container.querySelector('textarea')?.value).toBe('');
   });
 
   it('should trigger event correctly on controlled mode', () => {
     let argumentEventObjectType;
     let argumentEventObjectValue;
-    const onChange = e => {
+    const onChange: ChangeEventHandler<HTMLTextAreaElement> = e => {
       argumentEventObjectType = e.type;
       argumentEventObjectValue = e.target.value;
     };
     const { container } = render(<TextArea allowClear value="111" onChange={onChange} />);
-    fireEvent.click(container.querySelector('.ant-input-clear-icon'));
+    fireEvent.click(container.querySelector('.ant-input-clear-icon')!);
     expect(argumentEventObjectType).toBe('click');
     expect(argumentEventObjectValue).toBe('');
-    expect(container.querySelector('textarea').value).toBe('111');
+    expect(container.querySelector('textarea')?.value).toBe('111');
   });
 
   it('should focus textarea after clear', () => {
     const { container, unmount } = render(<TextArea allowClear defaultValue="111" />, {
       container: document.body,
     });
-    fireEvent.click(container.querySelector('.ant-input-clear-icon'));
+    fireEvent.click(container.querySelector('.ant-input-clear-icon')!);
     expect(document.activeElement).toBe(container.querySelector('textarea'));
     unmount();
   });
@@ -409,30 +414,30 @@ describe('TextArea allowClear', () => {
 
   it('not block input when `value` is undefined', () => {
     const { container, rerender } = render(<Input value={undefined} />);
-    fireEvent.change(container.querySelector('input'), { target: { value: 'Bamboo' } });
-    expect(container.querySelector('input').value).toEqual('Bamboo');
+    fireEvent.change(container.querySelector('input')!, { target: { value: 'Bamboo' } });
+    expect(container.querySelector('input')?.value).toEqual('Bamboo');
 
     // Controlled
     rerender(<Input value="Light" />);
-    fireEvent.change(container.querySelector('input'), { target: { value: 'Bamboo' } });
-    expect(container.querySelector('input').value).toEqual('Light');
+    fireEvent.change(container.querySelector('input')!, { target: { value: 'Bamboo' } });
+    expect(container.querySelector('input')?.value).toEqual('Light');
   });
 
   it('scroll to bottom when autoSize', async () => {
-    const ref = React.createRef();
+    const ref = React.createRef<TextAreaRef>();
     const { container, unmount } = render(<Input.TextArea ref={ref} autoSize />, {
       container: document.body,
       legacyRoot: true,
-    });
-    fireEvent.focus(container.querySelector('textarea'));
-    container.querySelector('textarea').focus();
+    } as RenderOptions);
+    fireEvent.focus(container.querySelector('textarea')!);
+    container.querySelector('textarea')?.focus();
 
     const setSelectionRangeFn = jest.spyOn(
-      container.querySelector('textarea'),
+      container.querySelector('textarea')!,
       'setSelectionRange',
     );
-    fireEvent.input(container.querySelector('textarea'), { target: { value: '\n1' } });
-    const target = ref.current.resizableTextArea.textArea;
+    fireEvent.input(container.querySelector('textarea')!, { target: { value: '\n1' } });
+    const target = ref.current?.resizableTextArea?.textArea!;
     triggerResize(target);
     await sleep(100);
     expect(setSelectionRangeFn).toHaveBeenCalled();
@@ -442,7 +447,7 @@ describe('TextArea allowClear', () => {
   // https://github.com/ant-design/ant-design/issues/26308
   it('should display defaultValue when value is undefined', () => {
     const { container } = render(<Input.TextArea defaultValue="Light" value={undefined} />);
-    expect(container.querySelector('textarea').value).toBe('Light');
+    expect(container.querySelector('textarea')?.value).toBe('Light');
   });
 
   it('onChange event should return HTMLTextAreaElement', () => {
@@ -451,25 +456,23 @@ describe('TextArea allowClear', () => {
 
     function isNativeElement() {
       expect(onChange).toHaveBeenCalledWith(
-        expect.objectContaining({
-          target: expect.any(HTMLTextAreaElement),
-        }),
+        expect.objectContaining({ target: expect.any(HTMLTextAreaElement) }),
       );
 
       onChange.mockReset();
     }
 
     // Change
-    fireEvent.change(container.querySelector('textarea'), { target: { value: 'bamboo' } });
+    fireEvent.change(container.querySelector('textarea')!, { target: { value: 'bamboo' } });
     isNativeElement();
 
     // Composition End
-    fireEvent.change(container.querySelector('textarea'), { target: { value: 'light' } });
-    fireEvent.compositionEnd(container.querySelector('textarea'));
+    fireEvent.change(container.querySelector('textarea')!, { target: { value: 'light' } });
+    fireEvent.compositionEnd(container.querySelector('textarea')!);
     isNativeElement();
 
     // Reset
-    fireEvent.click(container.querySelector('.ant-input-clear-icon'));
+    fireEvent.click(container.querySelector('.ant-input-clear-icon')!);
     isNativeElement();
   });
 
@@ -489,12 +492,12 @@ describe('TextArea allowClear', () => {
     };
 
     const { container, unmount } = render(<App />);
-    container.querySelector('textarea').focus();
-    fireEvent.change(container.querySelector('textarea'), { target: { value: '111' } });
-    expect(container.querySelector('textarea').value).toEqual('111');
+    container.querySelector('textarea')?.focus();
+    fireEvent.change(container.querySelector('textarea')!, { target: { value: '111' } });
+    expect(container.querySelector('textarea')?.value).toEqual('111');
 
-    fireEvent.click(container.querySelector('.ant-input-clear-icon'));
-    expect(container.querySelector('textarea').value).toEqual('');
+    fireEvent.click(container.querySelector('.ant-input-clear-icon')!);
+    expect(container.querySelector('textarea')?.value).toEqual('');
 
     unmount();
   });
@@ -508,12 +511,12 @@ describe('TextArea allowClear', () => {
         container: document.body,
       },
     );
-    container.querySelector('textarea').focus();
-    fireEvent.mouseDown(container.querySelector('.ant-input-clear-icon'));
-    fireEvent.click(container.querySelector('.ant-input-clear-icon'));
-    fireEvent.mouseUp(container.querySelector('.ant-input-clear-icon'));
-    fireEvent.focus(container.querySelector('.ant-input-clear-icon'));
-    fireEvent.click(container.querySelector('.ant-input-clear-icon'));
+    container.querySelector('textarea')?.focus();
+    fireEvent.mouseDown(container.querySelector('.ant-input-clear-icon')!);
+    fireEvent.click(container.querySelector('.ant-input-clear-icon')!);
+    fireEvent.mouseUp(container.querySelector('.ant-input-clear-icon')!);
+    fireEvent.focus(container.querySelector('.ant-input-clear-icon')!);
+    fireEvent.click(container.querySelector('.ant-input-clear-icon')!);
     expect(onBlur).not.toHaveBeenCalled();
     unmount();
   });
@@ -522,16 +525,20 @@ describe('TextArea allowClear', () => {
     const { container, unmount } = render(<TextArea allowClear defaultValue="111" />, {
       container: document.body,
     });
-    fireEvent.click(container.querySelector('.ant-input-clear-icon'));
+    fireEvent.click(container.querySelector('.ant-input-clear-icon')!);
     expect(document.activeElement).toBe(container.querySelector('textarea'));
     unmount();
   });
 
   it('should display boolean value as string', () => {
-    const { container, rerender } = render(<TextArea value />);
-    expect(container.querySelector('textarea').value).toBe('true');
-    rerender(<TextArea value={false} />);
-    expect(container.querySelector('textarea').value).toBe('false');
+    const { container, rerender } = render(
+      <TextArea value={true as unknown as TextareaHTMLAttributes<HTMLTextAreaElement>['value']} />,
+    );
+    expect(container.querySelector('textarea')?.value).toBe('true');
+    rerender(
+      <TextArea value={false as unknown as TextareaHTMLAttributes<HTMLTextAreaElement>['value']} />,
+    );
+    expect(container.querySelector('textarea')?.value).toBe('false');
   });
 
   it('should focus when clearBtn is clicked in controlled case', () => {
@@ -541,18 +548,17 @@ describe('TextArea allowClear', () => {
       focus: handleFocus,
     });
 
-    const Demo = () => {
+    const Demo: React.FC = () => {
       const [value, setValue] = React.useState('');
-
       return <Input.TextArea allowClear value={value} onChange={e => setValue(e.target.value)} />;
     };
 
     const { container } = render(<Demo />);
-    fireEvent.change(container.querySelector('textarea'), { target: { value: 'test' } });
+    fireEvent.change(container.querySelector('textarea')!, { target: { value: 'test' } });
     expect(container.querySelector('.ant-input-clear-icon')?.className).not.toContain(
       'ant-input-clear-icon-hidden',
     );
-    fireEvent.click(container.querySelector('.ant-input-clear-icon'));
+    fireEvent.click(container.querySelector('.ant-input-clear-icon')!);
     expect(handleFocus).toHaveBeenCalledTimes(1);
 
     textareaSpy.mockRestore();
diff --git a/components/layout/__tests__/__snapshots__/demo.test.js.snap b/components/layout/__tests__/__snapshots__/demo.test.ts.snap
similarity index 100%
rename from components/layout/__tests__/__snapshots__/demo.test.js.snap
rename to components/layout/__tests__/__snapshots__/demo.test.ts.snap
diff --git a/components/layout/__tests__/__snapshots__/index.test.js.snap b/components/layout/__tests__/__snapshots__/index.test.tsx.snap
similarity index 100%
rename from components/layout/__tests__/__snapshots__/index.test.js.snap
rename to components/layout/__tests__/__snapshots__/index.test.tsx.snap
diff --git a/components/layout/__tests__/demo.test.js b/components/layout/__tests__/demo.test.ts
similarity index 100%
rename from components/layout/__tests__/demo.test.js
rename to components/layout/__tests__/demo.test.ts
diff --git a/components/layout/__tests__/index.test.js b/components/layout/__tests__/index.test.tsx
similarity index 83%
rename from components/layout/__tests__/index.test.js
rename to components/layout/__tests__/index.test.tsx
index 4dbd066938..aa709d7ffb 100644
--- a/components/layout/__tests__/index.test.js
+++ b/components/layout/__tests__/index.test.tsx
@@ -1,9 +1,9 @@
 import React, { useState } from 'react';
 import { act } from 'react-dom/test-utils';
+import { UserOutlined } from '@ant-design/icons';
 import Layout from '..';
 import mountTest from '../../../tests/shared/mountTest';
 import rtlTest from '../../../tests/shared/rtlTest';
-import Icon from '../../icon';
 import Menu from '../../menu';
 import { fireEvent, render } from '../../../tests/utils';
 
@@ -31,14 +31,14 @@ describe('Layout', () => {
         <Content>Content</Content>
       </Layout>,
     );
-    expect(container.querySelector('.ant-layout').className.includes('ant-layout-has-sider')).toBe(
+    expect(container.querySelector('.ant-layout')?.className.includes('ant-layout-has-sider')).toBe(
       true,
     );
     unmount();
   });
 
   it('umount from multiple siders', async () => {
-    const App = () => {
+    const App: React.FC = () => {
       const [hide1, setHide1] = useState(false);
       const [hide2, setHide2] = useState(false);
       return (
@@ -57,15 +57,15 @@ describe('Layout', () => {
       );
     };
     const { container } = render(<App />);
-    expect(container.querySelector('.ant-layout').className.includes('ant-layout-has-sider')).toBe(
+    expect(container.querySelector('.ant-layout')?.className.includes('ant-layout-has-sider')).toBe(
       true,
     );
     fireEvent.click(container.querySelectorAll('button')[0]);
-    expect(container.querySelector('.ant-layout').className.includes('ant-layout-has-sider')).toBe(
+    expect(container.querySelector('.ant-layout')?.className.includes('ant-layout-has-sider')).toBe(
       true,
     );
     fireEvent.click(container.querySelectorAll('button')[1]);
-    expect(container.querySelector('.ant-layout').className.includes('ant-layout-has-sider')).toBe(
+    expect(container.querySelector('.ant-layout')?.className.includes('ant-layout-has-sider')).toBe(
       false,
     );
   });
@@ -79,7 +79,7 @@ describe('Layout', () => {
         <Content>Content</Content>
       </Layout>,
     );
-    expect(container.querySelector('.ant-layout').className.includes('ant-layout-has-sider')).toBe(
+    expect(container.querySelector('.ant-layout')?.className.includes('ant-layout-has-sider')).toBe(
       true,
     );
   });
@@ -96,7 +96,7 @@ describe('Layout', () => {
     expect(
       container
         .querySelector('.ant-layout-sider')
-        .className.includes('ant-layout-sider-has-trigger'),
+        ?.className.includes('ant-layout-sider-has-trigger'),
     ).toBe(true);
   });
 
@@ -109,8 +109,8 @@ describe('Layout', () => {
         <Content>Content</Content>
       </Layout>,
     );
-    expect(container.querySelector('.ant-layout-sider').style.width).toBe('50%');
-    expect(container.querySelector('.ant-layout-sider').style.flex).toBe('0 0 50%');
+    expect(container.querySelector<HTMLElement>('.ant-layout-sider')?.style.width).toBe('50%');
+    expect(container.querySelector<HTMLElement>('.ant-layout-sider')?.style.flex).toBe('0 0 50%');
   });
 
   describe('zeroWidth', () => {
@@ -126,7 +126,7 @@ describe('Layout', () => {
       expect(
         container
           .querySelector('.ant-layout-sider')
-          .className.includes('ant-layout-sider-zero-width'),
+          ?.className.includes('ant-layout-sider-zero-width'),
       ).toBe(true);
     });
 
@@ -144,12 +144,12 @@ describe('Layout', () => {
         );
 
         onCollapse.mockReset();
-        fireEvent.click(container.querySelector('.ant-layout-sider-zero-width-trigger'));
+        fireEvent.click(container.querySelector('.ant-layout-sider-zero-width-trigger')!);
         expect(onCollapse).toHaveBeenCalledTimes(1);
       });
 
       it('controlled', () => {
-        const Demo = () => {
+        const Demo: React.FC = () => {
           const [collapsed, setCollapsed] = React.useState(true);
 
           return (
@@ -170,7 +170,7 @@ describe('Layout', () => {
 
         const { container } = render(<Demo />);
         expect(container.querySelector('.ant-layout-sider-collapsed')).toBeTruthy();
-        fireEvent.click(container.querySelector('.ant-layout-sider-zero-width-trigger'));
+        fireEvent.click(container.querySelector('.ant-layout-sider-zero-width-trigger')!);
         expect(container.querySelector('.ant-layout-sider-collapsed')).toBeFalsy();
       });
     });
@@ -179,14 +179,14 @@ describe('Layout', () => {
   it('detect ant-layout-sider-dark as default theme', async () => {
     const { container } = render(<Sider>Sider</Sider>);
     expect(
-      container.querySelector('.ant-layout-sider').className.includes('ant-layout-sider-dark'),
+      container.querySelector('.ant-layout-sider')?.className.includes('ant-layout-sider-dark'),
     ).toBe(true);
   });
 
   it('detect ant-layout-sider-light when set light theme', async () => {
     const { container } = render(<Sider theme="light">Sider</Sider>);
     expect(
-      container.querySelector('.ant-layout-sider').className.includes('ant-layout-sider-light'),
+      container.querySelector('.ant-layout-sider')?.className.includes('ant-layout-sider-light'),
     ).toBe(true);
   });
 
@@ -208,7 +208,7 @@ describe('Layout', () => {
         <Sider>Sider</Sider>
       </Layout>,
     );
-    expect(container.querySelector('.ant-layout').className.includes('ant-layout-has-sider')).toBe(
+    expect(container.querySelector('.ant-layout')?.className.includes('ant-layout-has-sider')).toBe(
       false,
     );
   });
@@ -219,30 +219,29 @@ describe('Layout', () => {
       <Sider collapsible collapsed={false}>
         <Menu mode="inline">
           <Menu.Item key="1">
-            <Icon type="user" />
+            <UserOutlined />
             <span>Light</span>
           </Menu.Item>
         </Menu>
       </Sider>,
     );
 
-    fireEvent.mouseEnter(container.querySelector('.ant-menu-item'));
+    fireEvent.mouseEnter(container.querySelector('.ant-menu-item')!);
     act(() => {
       jest.runAllTimers();
     });
     expect(container.querySelectorAll('.ant-tooltip-inner').length).toBeFalsy();
-
     rerender(
       <Sider collapsible collapsed>
         <Menu mode="inline">
           <Menu.Item key="1">
-            <Icon type="user" />
+            <UserOutlined />
             <span>Light</span>
           </Menu.Item>
         </Menu>
       </Sider>,
     );
-    fireEvent.mouseEnter(container.querySelector('.ant-menu-item'));
+    fireEvent.mouseEnter(container.querySelector('.ant-menu-item')!);
     act(() => {
       jest.runAllTimers();
     });
@@ -290,14 +289,15 @@ describe('Sider', () => {
       <Sider collapsedWidth={0} collapsible zeroWidthTriggerStyle={{ background: '#F96' }}>
         <Menu theme="dark" mode="inline" defaultSelectedKeys={['1']}>
           <Menu.Item key="1">
-            <Icon type="user" />
+            <UserOutlined />
             <span>nav 1</span>
           </Menu.Item>
         </Menu>
       </Sider>,
     );
     expect(
-      container.querySelector('.ant-layout-sider-zero-width-trigger').style.background,
+      container.querySelector<HTMLDivElement>('.ant-layout-sider-zero-width-trigger')?.style
+        .background,
     ).toEqual('rgb(255, 153, 102)');
   });
 
@@ -306,24 +306,23 @@ describe('Sider', () => {
       <Sider collapsedWidth={0} collapsible trigger={<span className="my-trigger" />}>
         <Menu theme="dark" mode="inline" defaultSelectedKeys={['1']}>
           <Menu.Item key="1">
-            <Icon type="user" />
+            <UserOutlined />
             <span>nav 1</span>
           </Menu.Item>
         </Menu>
       </Sider>,
     );
     expect(
-      container.querySelector('.ant-layout-sider-zero-width-trigger').querySelector('.my-trigger'),
+      container.querySelector('.ant-layout-sider-zero-width-trigger')?.querySelector('.my-trigger'),
     ).toBeTruthy();
   });
 
   ['Layout', 'Header', 'Footer', 'Sider'].forEach(tag => {
     const ComponentMap = { Layout, Header, Footer, Sider };
     it(`should get ${tag} element from ref`, () => {
-      const ref = React.createRef();
+      const ref = React.createRef<any>();
       const onSelect = jest.fn();
-      const Component = ComponentMap[tag];
-
+      const Component = ComponentMap[tag as keyof typeof ComponentMap];
       render(
         <Component onSelect={onSelect} ref={ref}>
           {tag}
diff --git a/components/list/__tests__/Item.test.js b/components/list/__tests__/Item.test.tsx
similarity index 96%
rename from components/list/__tests__/Item.test.js
rename to components/list/__tests__/Item.test.tsx
index d8bbdf2dc0..da73059628 100644
--- a/components/list/__tests__/Item.test.js
+++ b/components/list/__tests__/Item.test.tsx
@@ -49,7 +49,7 @@ describe('List Item Layout', () => {
       />,
     );
     expect(
-      wrapper.querySelector('.ant-list-item').classList.contains('ant-list-item-no-flex'),
+      wrapper.querySelector('.ant-list-item')?.classList.contains('ant-list-item-no-flex'),
     ).toBe(false);
   });
 
@@ -188,17 +188,17 @@ describe('List Item Layout', () => {
   });
 
   it('should ref', () => {
-    const ref = React.createRef();
+    const ref = React.createRef<HTMLElement>();
 
     render(<List.Item ref={ref}>Item</List.Item>);
     expect(ref.current).toHaveClass('ant-list-item');
   });
 
   it('should grid ref', () => {
-    const ref = React.createRef();
+    const ref = React.createRef<HTMLElement>();
 
     render(
-      <List grid>
+      <List grid={{}}>
         <List.Item ref={ref}>Item</List.Item>,
       </List>,
     );
diff --git a/components/list/__tests__/__snapshots__/Item.test.js.snap b/components/list/__tests__/__snapshots__/Item.test.tsx.snap
similarity index 100%
rename from components/list/__tests__/__snapshots__/Item.test.js.snap
rename to components/list/__tests__/__snapshots__/Item.test.tsx.snap
diff --git a/components/list/__tests__/__snapshots__/demo.test.js.snap b/components/list/__tests__/__snapshots__/demo.test.ts.snap
similarity index 100%
rename from components/list/__tests__/__snapshots__/demo.test.js.snap
rename to components/list/__tests__/__snapshots__/demo.test.ts.snap
diff --git a/components/list/__tests__/__snapshots__/empty.test.js.snap b/components/list/__tests__/__snapshots__/empty.test.tsx.snap
similarity index 100%
rename from components/list/__tests__/__snapshots__/empty.test.js.snap
rename to components/list/__tests__/__snapshots__/empty.test.tsx.snap
diff --git a/components/list/__tests__/__snapshots__/index.test.js.snap b/components/list/__tests__/__snapshots__/index.test.tsx.snap
similarity index 100%
rename from components/list/__tests__/__snapshots__/index.test.js.snap
rename to components/list/__tests__/__snapshots__/index.test.tsx.snap
diff --git a/components/list/__tests__/__snapshots__/pagination.test.js.snap b/components/list/__tests__/__snapshots__/pagination.test.tsx.snap
similarity index 100%
rename from components/list/__tests__/__snapshots__/pagination.test.js.snap
rename to components/list/__tests__/__snapshots__/pagination.test.tsx.snap
diff --git a/components/list/__tests__/demo.test.js b/components/list/__tests__/demo.test.ts
similarity index 100%
rename from components/list/__tests__/demo.test.js
rename to components/list/__tests__/demo.test.ts
diff --git a/components/list/__tests__/empty.test.js b/components/list/__tests__/empty.test.tsx
similarity index 100%
rename from components/list/__tests__/empty.test.js
rename to components/list/__tests__/empty.test.tsx
diff --git a/components/list/__tests__/index.test.js b/components/list/__tests__/index.test.tsx
similarity index 66%
rename from components/list/__tests__/index.test.js
rename to components/list/__tests__/index.test.tsx
index e1ee6944f1..42f7b516ef 100644
--- a/components/list/__tests__/index.test.js
+++ b/components/list/__tests__/index.test.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import type { ListProps } from '..';
 import List from '..';
 import mountTest from '../../../tests/shared/mountTest';
 import rtlTest from '../../../tests/shared/rtlTest';
@@ -13,12 +14,12 @@ describe('List', () => {
 
   it('locale not passed to internal div', async () => {
     const locale = { emptyText: 'Custom text' };
-    const renderItem = item => <List.Item>{item}</List.Item>;
-    const dataSource = [];
+    const renderItem: ListProps<any>['renderItem'] = item => <List.Item>{item}</List.Item>;
+    const dataSource: ListProps<any>['dataSource'] = [];
 
     const { container } = render(
       <List renderItem={renderItem} dataSource={dataSource} locale={locale} />,
     );
-    expect(container.querySelector('div.ant-list').getAttribute('locale')).toBe(null);
+    expect(container.querySelector('div.ant-list')?.getAttribute('locale')).toBe(null);
   });
 });
diff --git a/components/list/__tests__/loading.test.js b/components/list/__tests__/loading.test.tsx
similarity index 95%
rename from components/list/__tests__/loading.test.js
rename to components/list/__tests__/loading.test.tsx
index a95c0761ca..821fc5d4c8 100644
--- a/components/list/__tests__/loading.test.js
+++ b/components/list/__tests__/loading.test.tsx
@@ -6,9 +6,7 @@ import List from '..';
 
 describe('List', () => {
   it('renders empty loading', () => {
-    const loading = {
-      spinning: true,
-    };
+    const loading = { spinning: true };
     const { container: wrapper } = render(
       <List loading={loading} dataSource={[]} renderItem={() => <List.Item />} />,
     );
diff --git a/components/list/__tests__/pagination.test.js b/components/list/__tests__/pagination.test.tsx
similarity index 86%
rename from components/list/__tests__/pagination.test.js
rename to components/list/__tests__/pagination.test.tsx
index 98a59b53f8..2e4d1c3b47 100644
--- a/components/list/__tests__/pagination.test.js
+++ b/components/list/__tests__/pagination.test.tsx
@@ -1,10 +1,16 @@
 import React from 'react';
+import type { ListProps } from '..';
 import List from '..';
 import { fireEvent, render } from '../../../tests/utils';
 import { noop } from '../../_util/warning';
 
+interface DataSourceItem {
+  name: string;
+  key: React.Key;
+}
+
 describe('List.pagination', () => {
-  const data = [
+  const data: ListProps<DataSourceItem>['dataSource'] = [
     { key: 0, name: 'Jack' },
     { key: 1, name: 'Lucy' },
     { key: 2, name: 'Tom' },
@@ -13,7 +19,7 @@ describe('List.pagination', () => {
 
   const pagination = { className: 'my-page', pageSize: 2 };
 
-  function createList(props) {
+  function createList(props?: ListProps<DataSourceItem>) {
     return (
       <List
         itemLayout="vertical"
@@ -25,10 +31,10 @@ describe('List.pagination', () => {
     );
   }
 
-  function renderedNames(wrapper) {
+  function renderedNames(container: ReturnType<typeof render>['container']) {
     return Array.prototype.map.call(
-      wrapper.querySelectorAll('.ant-list-item'),
-      row => row.textContent,
+      container.querySelectorAll('.ant-list-item'),
+      (row: HTMLDivElement) => row.textContent,
     );
   }
 
@@ -39,12 +45,7 @@ describe('List.pagination', () => {
 
   it('should not show pager if pagination.hideOnSinglePage is true and only 1 page', () => {
     const { container: wrapper, rerender } = render(
-      createList({
-        pagination: {
-          pageSize: 3,
-          hideOnSinglePage: true,
-        },
-      }),
+      createList({ pagination: { pageSize: 3, hideOnSinglePage: true } }),
     );
     expect(wrapper.querySelectorAll('.ant-pagination')).toHaveLength(1);
     rerender(createList({ pagination: { pageSize: 3, hideOnSinglePage: false } }));
@@ -107,13 +108,13 @@ describe('List.pagination', () => {
     expect(wrapper.querySelectorAll('.ant-pagination')).toHaveLength(1);
     expect(wrapper.querySelectorAll('.ant-pagination-item')).toHaveLength(2);
 
-    fireEvent.click(wrapper.querySelector('.ant-pagination-item-2'));
+    fireEvent.click(wrapper.querySelector('.ant-pagination-item-2')!);
     expect(renderedNames(wrapper)).toEqual(['Tom', 'Jerry']);
 
     rerender(createList({ pagination: false }));
     expect(wrapper.querySelectorAll('.ant-pagination')).toHaveLength(0);
 
-    rerender(createList({ pagination: true }));
+    rerender(createList({ pagination: true as ListProps<DataSourceItem>['pagination'] }));
     expect(wrapper.querySelectorAll('.ant-pagination')).toHaveLength(1);
     // Legacy code will make pageSize ping with 10, here we fixed to keep sync by current one
     expect(wrapper.querySelectorAll('.ant-pagination-item')).toHaveLength(2);
@@ -123,7 +124,7 @@ describe('List.pagination', () => {
   // https://github.com/ant-design/ant-design/issues/5259
   it('change to correct page when data source changes', () => {
     const { container: wrapper, rerender } = render(createList({ pagination: { pageSize: 1 } }));
-    fireEvent.click(wrapper.querySelector('.ant-pagination-item-3'));
+    fireEvent.click(wrapper.querySelector('.ant-pagination-item-3')!);
     rerender(createList({ dataSource: [data[0]] }));
     expect(wrapper.querySelector('.ant-pagination-item-1')).toHaveClass(
       'ant-pagination-item-active',
@@ -134,20 +135,20 @@ describe('List.pagination', () => {
     const { container: wrapper, rerender } = render(
       createList({ pagination: { position: 'top' } }),
     );
-    expect(wrapper.querySelector('.ant-list').querySelectorAll('.ant-pagination')).toHaveLength(1);
+    expect(wrapper.querySelector('.ant-list')?.querySelectorAll('.ant-pagination')).toHaveLength(1);
 
     rerender(createList({ pagination: { position: 'bottom' } }));
     expect(
-      wrapper.querySelector('.ant-list').lastElementChild.querySelectorAll('.ant-pagination'),
+      wrapper.querySelector('.ant-list')?.lastElementChild?.querySelectorAll('.ant-pagination'),
     ).toHaveLength(1);
 
     rerender(createList({ pagination: { position: 'both' } }));
     expect(wrapper.querySelectorAll('.ant-pagination')).toHaveLength(2);
     expect(
-      wrapper.querySelector('.ant-list').firstElementChild.querySelectorAll('.ant-pagination'),
+      wrapper.querySelector('.ant-list')?.firstElementChild?.querySelectorAll('.ant-pagination'),
     ).toHaveLength(1);
     expect(
-      wrapper.querySelector('.ant-list').lastElementChild.querySelectorAll('.ant-pagination'),
+      wrapper.querySelector('.ant-list')?.lastElementChild?.querySelectorAll('.ant-pagination'),
     ).toHaveLength(1);
   });
 
@@ -155,10 +156,10 @@ describe('List.pagination', () => {
     const { container: wrapper } = render(createList({ pagination: { showSizeChanger: true } }));
     expect(wrapper.querySelector('.ant-pagination')).toMatchSnapshot();
 
-    fireEvent.mouseDown(wrapper.querySelector('.ant-select-selector'));
+    fireEvent.mouseDown(wrapper.querySelector('.ant-select-selector')!);
     fireEvent.click(wrapper.querySelectorAll('.ant-select-item-option')[2]);
 
-    fireEvent.mouseDown(wrapper.querySelector('.ant-select-selector'));
+    fireEvent.mouseDown(wrapper.querySelector('.ant-select-selector')!);
     expect(wrapper.querySelector('.ant-pagination')).toMatchSnapshot();
   });
 
@@ -178,7 +179,7 @@ describe('List.pagination', () => {
       }),
     );
 
-    fireEvent.mouseDown(wrapper.querySelector('.ant-select-selector'));
+    fireEvent.mouseDown(wrapper.querySelector('.ant-select-selector')!);
     fireEvent.click(wrapper.querySelectorAll('.ant-select-item-option')[1]);
     expect(handlePaginationChange).toHaveBeenCalledWith(1, 10);
   });
@@ -199,10 +200,6 @@ describe('List.pagination', () => {
   });
 
   it('should not crash when pagination is null', () => {
-    render(
-      createList({
-        pagination: null,
-      }),
-    );
+    render(createList({ pagination: null as unknown as ListProps<DataSourceItem>['pagination'] }));
   });
 });
diff --git a/components/locale-provider/__tests__/__snapshots__/index.test.tsx.snap b/components/locale-provider/__tests__/__snapshots__/index.test.tsx.snap
index 31ae56a43c..491c3f4cd1 100644
--- a/components/locale-provider/__tests__/__snapshots__/index.test.tsx.snap
+++ b/components/locale-provider/__tests__/__snapshots__/index.test.tsx.snap
@@ -35871,7 +35871,7 @@ exports[`Locale Provider should display the text as cs 1`] = `
                 type="button"
               >
                 <span>
-                  Storno
+                  Zrušit
                 </span>
               </button>
               <button
@@ -37444,7 +37444,7 @@ exports[`Locale Provider should display the text as cs 1`] = `
               type="button"
             >
               <span>
-                Storno
+                Zrušit
               </span>
             </button>
             <button
diff --git a/components/locale/cs_CZ.tsx b/components/locale/cs_CZ.tsx
index 0d28579493..65f3fd2a5c 100644
--- a/components/locale/cs_CZ.tsx
+++ b/components/locale/cs_CZ.tsx
@@ -1,9 +1,12 @@
+/* eslint-disable no-template-curly-in-string */
 import Pagination from 'rc-pagination/lib/locale/cs_CZ';
 import Calendar from '../calendar/locale/cs_CZ';
 import DatePicker from '../date-picker/locale/cs_CZ';
 import type { Locale } from '../locale-provider';
 import TimePicker from '../time-picker/locale/cs_CZ';
 
+const typeTemplate = '${label} není platný ${type}';
+
 const localeValues: Locale = {
   locale: 'cs',
   Pagination,
@@ -18,8 +21,12 @@ const localeValues: Locale = {
     filterConfirm: 'Potvrdit',
     filterReset: 'Obnovit',
     filterEmptyText: 'Žádné filtry',
+    filterCheckall: 'Vybrat všechny položky',
+    filterSearchPlaceholder: 'Vyhledat ve filtrech',
+    emptyText: 'Žádná data',
     selectAll: 'Vybrat všechny řádky na současné stránce',
     selectInvert: 'Invertovat výběr na současné stránce',
+    selectNone: 'Odznačit vše',
     selectionAll: 'Vybrat všechny řádky',
     sortTitle: 'Řadit',
     expand: 'Rozbalit řádek',
@@ -30,17 +37,24 @@ const localeValues: Locale = {
   },
   Modal: {
     okText: 'OK',
-    cancelText: 'Storno',
+    cancelText: 'Zrušit',
     justOkText: 'OK',
   },
   Popconfirm: {
     okText: 'OK',
-    cancelText: 'Storno',
+    cancelText: 'Zrušit',
   },
   Transfer: {
+    titles: ['', ''],
     searchPlaceholder: 'Vyhledávání',
     itemUnit: 'položka',
     itemsUnit: 'položek',
+    remove: 'Odstranit',
+    selectCurrent: 'Vybrat aktuální stranu',
+    removeCurrent: 'Smazat aktuální stranu',
+    selectAll: 'Označit vše',
+    removeAll: 'Odznačit vše',
+    selectInvert: 'Opačný výběr',
   },
   Upload: {
     uploading: 'Nahrávání...',
@@ -52,6 +66,71 @@ const localeValues: Locale = {
   Empty: {
     description: 'Žádná data',
   },
+  Icon: {
+    icon: 'ikona',
+  },
+  Text: {
+    edit: 'Upravit',
+    copy: 'Kopírovat',
+    copied: 'Zkopírované',
+    expand: 'Zvětšit',
+  },
+  PageHeader: {
+    back: 'Zpět',
+  },
+  Form: {
+    optional: '(nepovinné)',
+    defaultValidateMessages: {
+      default: 'Validační chyba pole pro ${label}',
+      required: 'Prosím vložte ${label}',
+      enum: '${label} musí být jeden z [${enum}]',
+      whitespace: '${label} nemůže být prázdný znak',
+      date: {
+        format: '${label} formát datumu je neplatný',
+        parse: '${label} není možné konvertovat na datum',
+        invalid: '${label} je neplatné datum',
+      },
+      types: {
+        string: typeTemplate,
+        method: typeTemplate,
+        array: typeTemplate,
+        object: typeTemplate,
+        number: typeTemplate,
+        date: typeTemplate,
+        boolean: typeTemplate,
+        integer: typeTemplate,
+        float: typeTemplate,
+        regexp: typeTemplate,
+        email: typeTemplate,
+        url: typeTemplate,
+        hex: typeTemplate,
+      },
+      string: {
+        len: '${label} musí být ${len} znaků',
+        min: '${label} musí být alespoň ${min} znaků',
+        max: '${label} musí být do ${max} znaků',
+        range: '${label} musí být mezi ${min}-${max} znaky',
+      },
+      number: {
+        len: '${label} musí být stejný jako ${len}',
+        min: '${label} musí být minimálně ${min}',
+        max: '${label} musí být maximálně ${max}',
+        range: '${label} musí být mezi ${min}-${max}',
+      },
+      array: {
+        len: 'Musí být ${len} ${label}',
+        min: 'Alespoň ${min} ${label}',
+        max: 'Nejvíc ${max} ${label}',
+        range: 'Počet ${label} musí být mezi ${min}-${max}',
+      },
+      pattern: {
+        mismatch: '${label} neodpovídá vzoru ${pattern}',
+      },
+    },
+  },
+  Image: {
+    preview: 'Náhled',
+  },
 };
 
 export default localeValues;
diff --git a/components/locale/ru_RU.tsx b/components/locale/ru_RU.tsx
index 30b8caf8ba..ec4b5ec456 100644
--- a/components/locale/ru_RU.tsx
+++ b/components/locale/ru_RU.tsx
@@ -22,6 +22,7 @@ const localeValues: Locale = {
     filterConfirm: 'OK',
     filterReset: 'Сбросить',
     filterEmptyText: 'Без фильтров',
+    filterCheckall: 'Выбрать все элементы',
     emptyText: 'Нет данных',
     selectAll: 'Выбрать всё',
     selectInvert: 'Инвертировать выбор',
diff --git a/components/mentions/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/mentions/__tests__/__snapshots__/demo-extend.test.ts.snap
index 9140774ee1..f6d945845f 100644
--- a/components/mentions/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/mentions/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -112,6 +112,7 @@ exports[`renders ./components/mentions/demo/form.md extend context correctly 1`]
               class="ant-mentions"
             >
               <textarea
+                aria-required="true"
                 class="rc-textarea"
                 id="bio"
                 placeholder="You can use @ to ref user here"
diff --git a/components/mentions/__tests__/__snapshots__/demo.test.ts.snap b/components/mentions/__tests__/__snapshots__/demo.test.ts.snap
index ab54c246ca..c714cf8852 100644
--- a/components/mentions/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/mentions/__tests__/__snapshots__/demo.test.ts.snap
@@ -112,6 +112,7 @@ exports[`renders ./components/mentions/demo/form.md correctly 1`] = `
               class="ant-mentions"
             >
               <textarea
+                aria-required="true"
                 class="rc-textarea"
                 id="bio"
                 placeholder="You can use @ to ref user here"
diff --git a/components/menu/style/theme.tsx b/components/menu/style/theme.tsx
index cdbb324276..d41f2250d2 100644
--- a/components/menu/style/theme.tsx
+++ b/components/menu/style/theme.tsx
@@ -124,7 +124,7 @@ const getThemeStyle = (token: MenuToken): CSSInterpolation => {
       },
 
       [`${componentCls}-item, ${componentCls}-submenu-title`]: {
-        '&:focus-visible': {
+        [`&:not(${componentCls}-item-disabled):focus-visible`]: {
           ...accessibilityFocus(token),
         },
       },
diff --git a/components/modal/__tests__/confirm.test.js b/components/modal/__tests__/confirm.test.tsx
similarity index 91%
rename from components/modal/__tests__/confirm.test.js
rename to components/modal/__tests__/confirm.test.tsx
index 975bc98e8c..27eb575262 100644
--- a/components/modal/__tests__/confirm.test.js
+++ b/components/modal/__tests__/confirm.test.tsx
@@ -5,12 +5,14 @@ import KeyCode from 'rc-util/lib/KeyCode';
 import { resetWarned } from 'rc-util/lib/warning';
 import * as React from 'react';
 import TestUtils from 'react-dom/test-utils';
+import type { ModalFuncProps } from '..';
 import Modal from '..';
 import { sleep, act } from '../../../tests/utils';
 import ConfigProvider from '../../config-provider';
+import type { ModalFunc } from '../confirm';
 import destroyFns from '../destroyFns';
 
-globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+(globalThis as any).IS_REACT_ACT_ENVIRONMENT = true;
 
 const { confirm } = Modal;
 
@@ -20,7 +22,7 @@ describe('Modal.confirm triggers callbacks correctly', () => {
   // Inject CSSMotion to replace with No transition support
   const MockCSSMotion = genCSSMotion(false);
   Object.keys(MockCSSMotion).forEach(key => {
-    CSSMotion[key] = MockCSSMotion[key];
+    (CSSMotion as any)[key] = (MockCSSMotion as any)[key];
   });
 
   // // Mock for rc-util raf
@@ -67,11 +69,11 @@ describe('Modal.confirm triggers callbacks correctly', () => {
     errorSpy.mockRestore();
   });
 
-  function $$(className) {
-    return document.body.querySelectorAll(className);
+  function $$(className: string) {
+    return document.body.querySelectorAll<HTMLElement>(className);
   }
 
-  function open(args) {
+  function open(args?: ModalFuncProps) {
     jest.useFakeTimers();
     confirm({
       title: 'Want to delete these items?',
@@ -242,23 +244,22 @@ describe('Modal.confirm triggers callbacks correctly', () => {
   });
 
   it('allows extra props on buttons', async () => {
-    open({ okButtonProps: { disabled: true }, cancelButtonProps: { 'data-test': 'baz' } });
+    open({
+      okButtonProps: { disabled: true },
+      cancelButtonProps: { 'data-test': 'baz' } as ModalFuncProps['cancelButtonProps'],
+    });
 
     await sleep();
     expect($$('.ant-btn')).toHaveLength(2);
-    expect($$('.ant-btn')[0].attributes['data-test'].value).toBe('baz');
-    expect($$('.ant-btn')[1].disabled).toBe(true);
+    expect(($$('.ant-btn')[0].attributes as any)['data-test'].value).toBe('baz');
+    expect(($$('.ant-btn')[1] as HTMLButtonElement).disabled).toBe(true);
   });
 
   describe('should close modals when click confirm button', () => {
-    ['info', 'success', 'warning', 'error'].forEach(type => {
+    (['info', 'success', 'warning', 'error'] as const).forEach(type => {
       it(type, async () => {
         jest.useFakeTimers();
-        Modal[type]({
-          title: 'title',
-          content: 'content',
-        });
-
+        Modal[type]?.({ title: 'title', content: 'content' });
         await act(async () => {
           jest.runAllTimers();
           await sleep();
@@ -325,13 +326,13 @@ describe('Modal.confirm triggers callbacks correctly', () => {
   });
 
   describe('should not close modals when click confirm button when onOk has argument', () => {
-    ['confirm', 'info', 'success', 'warning', 'error'].forEach(type => {
+    (['confirm', 'info', 'success', 'warning', 'error'] as const).forEach(type => {
       it(type, async () => {
         jest.useFakeTimers();
-        Modal[type]({
+        Modal[type]?.({
           title: 'title',
           content: 'content',
-          onOk: close => null, // eslint-disable-line no-unused-vars
+          onOk: _ => null, // eslint-disable-line no-unused-vars
         });
         await act(async () => {
           jest.runAllTimers();
@@ -351,10 +352,10 @@ describe('Modal.confirm triggers callbacks correctly', () => {
   });
 
   describe('could be update by new config', () => {
-    ['info', 'success', 'warning', 'error'].forEach(type => {
+    (['info', 'success', 'warning', 'error'] as const).forEach(type => {
       it(type, async () => {
         jest.useFakeTimers();
-        const instance = Modal[type]({
+        const instance = Modal[type]?.({
           title: 'title',
           content: 'content',
         });
@@ -387,17 +388,12 @@ describe('Modal.confirm triggers callbacks correctly', () => {
   });
 
   describe('could be update by call function', () => {
-    ['info', 'success', 'warning', 'error'].forEach(type => {
+    (['info', 'success', 'warning', 'error'] as const).forEach(type => {
       it(type, () => {
         jest.useFakeTimers();
-        const instance = Modal[type]({
+        const instance = Modal[type]?.({
           title: 'title',
-          okButtonProps: {
-            loading: true,
-            style: {
-              color: 'red',
-            },
-          },
+          okButtonProps: { loading: true, style: { color: 'red' } },
         });
         act(() => {
           jest.runAllTimers();
@@ -434,10 +430,10 @@ describe('Modal.confirm triggers callbacks correctly', () => {
   });
 
   describe('could be destroy', () => {
-    ['info', 'success', 'warning', 'error'].forEach(type => {
+    (['info', 'success', 'warning', 'error'] as const).forEach(type => {
       jest.useFakeTimers();
       it(type, async () => {
-        const instance = Modal[type]({
+        const instance = Modal[type]?.({
           title: 'title',
           content: 'content',
         });
@@ -462,8 +458,8 @@ describe('Modal.confirm triggers callbacks correctly', () => {
     jest.useFakeTimers();
 
     // Show
-    ['info', 'success', 'warning', 'error'].forEach(type => {
-      Modal[type]({
+    (['info', 'success', 'warning', 'error'] as const).forEach(type => {
+      Modal[type]?.({
         title: 'title',
         content: 'content',
       });
@@ -515,9 +511,9 @@ describe('Modal.confirm triggers callbacks correctly', () => {
       jest.runAllTimers();
     });
 
-    const instances = [];
-    ['info', 'success', 'warning', 'error'].forEach(type => {
-      const instance = Modal[type]({
+    const instances: ReturnType<ModalFunc>[] = [];
+    (['info', 'success', 'warning', 'error'] as const).forEach(type => {
+      const instance = Modal[type]?.({
         title: 'title',
         content: 'content',
       });
@@ -588,8 +584,9 @@ describe('Modal.confirm triggers callbacks correctly', () => {
   it('ok button should trigger onOk multiple times when onOk has close argument', async () => {
     const onOk = jest.fn();
     open({
-      onOk: close => {
+      onOk(close?: any) {
         onOk();
+        // @ts-ignore
         (() => {})(close); // do nothing
       },
     });
@@ -615,7 +612,7 @@ describe('Modal.confirm triggers callbacks correctly', () => {
     expect(document.querySelectorAll('.my-btn').length).toBe(2);
     expect(document.querySelectorAll('.bamboo-smile').length).toBe(1);
     expect(document.querySelectorAll('.my-modal-confirm').length).toBe(1);
-    ConfigProvider.config({ prefixCls: 'ant', iconPrefixCls: null });
+    ConfigProvider.config({ prefixCls: 'ant', iconPrefixCls: undefined });
     jest.useRealTimers();
   });
 
@@ -702,12 +699,12 @@ describe('Modal.confirm triggers callbacks correctly', () => {
   });
 
   describe('the callback close should be a method when onCancel has a close parameter', () => {
-    ['confirm', 'info', 'success', 'warning', 'error'].forEach(type => {
+    (['confirm', 'info', 'success', 'warning', 'error'] as const).forEach(type => {
       it(`click the close icon to trigger ${type} onCancel`, async () => {
         jest.useFakeTimers();
         const mock = jest.fn();
 
-        Modal[type]({
+        Modal[type]?.({
           closable: true,
           onCancel: close => mock(close),
         });
@@ -732,12 +729,12 @@ describe('Modal.confirm triggers callbacks correctly', () => {
       });
     });
 
-    ['confirm', 'info', 'success', 'warning', 'error'].forEach(type => {
+    (['confirm', 'info', 'success', 'warning', 'error'] as const).forEach(type => {
       it(`press ESC to trigger ${type} onCancel`, async () => {
         jest.useFakeTimers();
         const mock = jest.fn();
 
-        Modal[type]({
+        Modal[type]?.({
           keyboard: true,
           onCancel: close => mock(close),
         });
@@ -770,12 +767,12 @@ describe('Modal.confirm triggers callbacks correctly', () => {
       });
     });
 
-    ['confirm', 'info', 'success', 'warning', 'error'].forEach(type => {
+    (['confirm', 'info', 'success', 'warning', 'error'] as const).forEach(type => {
       it(`click the mask to trigger ${type} onCancel`, async () => {
         jest.useFakeTimers();
         const mock = jest.fn();
 
-        Modal[type]({
+        Modal[type]?.({
           maskClosable: true,
           onCancel: close => mock(close),
         });
diff --git a/components/pagination/__tests__/__snapshots__/demo.test.js.snap b/components/pagination/__tests__/__snapshots__/demo.test.ts.snap
similarity index 100%
rename from components/pagination/__tests__/__snapshots__/demo.test.js.snap
rename to components/pagination/__tests__/__snapshots__/demo.test.ts.snap
diff --git a/components/pagination/__tests__/__snapshots__/index.test.js.snap b/components/pagination/__tests__/__snapshots__/index.test.tsx.snap
similarity index 100%
rename from components/pagination/__tests__/__snapshots__/index.test.js.snap
rename to components/pagination/__tests__/__snapshots__/index.test.tsx.snap
diff --git a/components/pagination/__tests__/demo.test.js b/components/pagination/__tests__/demo.test.ts
similarity index 100%
rename from components/pagination/__tests__/demo.test.js
rename to components/pagination/__tests__/demo.test.ts
diff --git a/components/pagination/__tests__/index.test.js b/components/pagination/__tests__/index.test.tsx
similarity index 83%
rename from components/pagination/__tests__/index.test.js
rename to components/pagination/__tests__/index.test.tsx
index ba693a2974..5df577cf8b 100644
--- a/components/pagination/__tests__/index.test.js
+++ b/components/pagination/__tests__/index.test.tsx
@@ -1,4 +1,6 @@
 import React from 'react';
+import type { OptionFC } from 'rc-select/lib/Option';
+import type { PaginationProps } from '..';
 import Pagination from '..';
 import mountTest from '../../../tests/shared/mountTest';
 import rtlTest from '../../../tests/shared/rtlTest';
@@ -11,7 +13,7 @@ describe('Pagination', () => {
   rtlTest(Pagination);
 
   it('should pass disabled to prev and next buttons', () => {
-    const itemRender = (current, type, originalElement) => {
+    const itemRender: PaginationProps['itemRender'] = (_, type, originalElement) => {
       if (type === 'prev') {
         return <button type="button">prev</button>;
       }
@@ -23,12 +25,12 @@ describe('Pagination', () => {
     const { container } = render(
       <Pagination defaultCurrent={1} total={50} itemRender={itemRender} />,
     );
-    expect(container.querySelector('button').disabled).toBe(true);
+    expect(container.querySelector('button')?.disabled).toBe(true);
   });
 
   it('should autometically be small when size is not specified', async () => {
     const { container } = render(<Pagination responsive />);
-    expect(container.querySelector('ul').className.includes('ant-pagination-mini')).toBe(true);
+    expect(container.querySelector('ul')?.className.includes('ant-pagination-mini')).toBe(true);
   });
 
   // https://github.com/ant-design/ant-design/issues/24913
@@ -45,7 +47,7 @@ describe('Pagination', () => {
       />,
     );
 
-    fireEvent.mouseDown(container.querySelector('.ant-select-selector'));
+    fireEvent.mouseDown(container.querySelector('.ant-select-selector')!);
 
     expect(container.querySelectorAll('.ant-select-item-option').length).toBe(4);
     fireEvent.click(container.querySelectorAll('.ant-select-item-option')[1]);
@@ -53,9 +55,10 @@ describe('Pagination', () => {
   });
 
   it('should support custom selectComponentClass', () => {
-    const CustomSelect = ({ className, ...props }) => (
-      <Select className={`${className} custom-select`} {...props} />
-    );
+    const CustomSelect: React.FC<{ className?: string }> & { Option: OptionFC } = ({
+      className,
+      ...props
+    }) => <Select className={`${className} custom-select`} {...props} />;
 
     CustomSelect.Option = Select.Option;
 
diff --git a/components/progress/Line.tsx b/components/progress/Line.tsx
index ea6517a1f4..ad9719cfea 100644
--- a/components/progress/Line.tsx
+++ b/components/progress/Line.tsx
@@ -49,7 +49,7 @@ export const sortGradient = (gradients: StringGradients) => {
  *     "100%": "#ffffff"
  *   }
  */
-export const handleGradient = (strokeColor: ProgressGradient, directionConfig: DirectionType) => {
+export const handleGradient = (strokeColor: ProgressGradient, directionConfig?: DirectionType) => {
   const {
     from = presetPrimaryColors.blue,
     to = presetPrimaryColors.blue,
diff --git a/components/progress/__tests__/__snapshots__/demo.test.js.snap b/components/progress/__tests__/__snapshots__/demo.test.ts.snap
similarity index 100%
rename from components/progress/__tests__/__snapshots__/demo.test.js.snap
rename to components/progress/__tests__/__snapshots__/demo.test.ts.snap
diff --git a/components/progress/__tests__/__snapshots__/index.test.js.snap b/components/progress/__tests__/__snapshots__/index.test.tsx.snap
similarity index 100%
rename from components/progress/__tests__/__snapshots__/index.test.js.snap
rename to components/progress/__tests__/__snapshots__/index.test.tsx.snap
diff --git a/components/progress/__tests__/demo.test.js b/components/progress/__tests__/demo.test.ts
similarity index 100%
rename from components/progress/__tests__/demo.test.js
rename to components/progress/__tests__/demo.test.ts
diff --git a/components/progress/__tests__/index.test.js b/components/progress/__tests__/index.test.tsx
similarity index 91%
rename from components/progress/__tests__/index.test.js
rename to components/progress/__tests__/index.test.tsx
index a82b12d3c5..3d6061692a 100644
--- a/components/progress/__tests__/index.test.js
+++ b/components/progress/__tests__/index.test.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import type { ProgressProps } from '..';
 import Progress from '..';
 import mountTest from '../../../tests/shared/mountTest';
 import rtlTest from '../../../tests/shared/rtlTest';
@@ -162,7 +163,9 @@ describe('Progress', () => {
   // https://github.com/ant-design/ant-design/pull/15951#discussion_r273062969
   it('should show success status when status is invalid', () => {
     const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
-    const { container: wrapper } = render(<Progress percent={100} status="invalid" />);
+    const { container: wrapper } = render(
+      <Progress percent={100} status={'invalid' as ProgressProps['status']} />,
+    );
     expect(wrapper.querySelectorAll('.ant-progress-status-success')).toHaveLength(1);
     errorSpy.mockRestore();
   });
@@ -183,21 +186,23 @@ describe('Progress', () => {
     const { container: wrapper, rerender } = render(
       <Progress steps={5} percent={60} strokeColor="#1890ff" />,
     );
-    expect(wrapper.querySelectorAll('.ant-progress-steps-item')[0].style.backgroundColor).toBe(
-      'rgb(24, 144, 255)',
-    );
+    expect(
+      wrapper.querySelectorAll<HTMLDivElement>('.ant-progress-steps-item')[0].style.backgroundColor,
+    ).toBe('rgb(24, 144, 255)');
     rerender(<Progress steps={5} percent={40} strokeColor="#1890ff" />);
-    expect(wrapper.querySelectorAll('.ant-progress-steps-item')[2].style.backgroundColor).toBe('');
-    expect(wrapper.querySelectorAll('.ant-progress-steps-item')[1].style.backgroundColor).toBe(
-      'rgb(24, 144, 255)',
-    );
+    expect(
+      wrapper.querySelectorAll<HTMLDivElement>('.ant-progress-steps-item')[2].style.backgroundColor,
+    ).toBe('');
+    expect(
+      wrapper.querySelectorAll<HTMLDivElement>('.ant-progress-steps-item')[1].style.backgroundColor,
+    ).toBe('rgb(24, 144, 255)');
   });
 
   it('steps should support trailColor', () => {
     const { container: wrapper } = render(<Progress steps={5} percent={20} trailColor="#1890ee" />);
-    expect(wrapper.querySelectorAll('.ant-progress-steps-item')[1].style.backgroundColor).toBe(
-      'rgb(24, 144, 238)',
-    );
+    expect(
+      wrapper.querySelectorAll<HTMLDivElement>('.ant-progress-steps-item')[1].style.backgroundColor,
+    ).toBe('rgb(24, 144, 238)');
   });
 
   it('should display correct step', () => {
@@ -210,8 +215,8 @@ describe('Progress', () => {
   });
 
   it('steps should have default percent 0', () => {
-    const { container: wrapper } = render(<ProgressSteps />);
-    expect(wrapper.firstChild).toMatchSnapshot();
+    const { container } = render(<ProgressSteps steps={0} />);
+    expect(container.firstChild).toMatchSnapshot();
   });
 
   it('should warnning if use `progress` in success', () => {
diff --git a/components/radio/__tests__/__snapshots__/demo.test.js.snap b/components/radio/__tests__/__snapshots__/demo.test.ts.snap
similarity index 100%
rename from components/radio/__tests__/__snapshots__/demo.test.js.snap
rename to components/radio/__tests__/__snapshots__/demo.test.ts.snap
diff --git a/components/radio/__tests__/__snapshots__/group.test.js.snap b/components/radio/__tests__/__snapshots__/group.test.tsx.snap
similarity index 100%
rename from components/radio/__tests__/__snapshots__/group.test.js.snap
rename to components/radio/__tests__/__snapshots__/group.test.tsx.snap
diff --git a/components/radio/__tests__/__snapshots__/radio-button.test.js.snap b/components/radio/__tests__/__snapshots__/radio-button.test.tsx.snap
similarity index 100%
rename from components/radio/__tests__/__snapshots__/radio-button.test.js.snap
rename to components/radio/__tests__/__snapshots__/radio-button.test.tsx.snap
diff --git a/components/radio/__tests__/__snapshots__/radio.test.js.snap b/components/radio/__tests__/__snapshots__/radio.test.tsx.snap
similarity index 100%
rename from components/radio/__tests__/__snapshots__/radio.test.js.snap
rename to components/radio/__tests__/__snapshots__/radio.test.tsx.snap
diff --git a/components/radio/__tests__/demo.test.js b/components/radio/__tests__/demo.test.ts
similarity index 100%
rename from components/radio/__tests__/demo.test.js
rename to components/radio/__tests__/demo.test.ts
diff --git a/components/radio/__tests__/group.test.js b/components/radio/__tests__/group.test.tsx
similarity index 84%
rename from components/radio/__tests__/group.test.js
rename to components/radio/__tests__/group.test.tsx
index a1b9b78fd8..66fbfd8577 100644
--- a/components/radio/__tests__/group.test.js
+++ b/components/radio/__tests__/group.test.tsx
@@ -1,10 +1,11 @@
 import React from 'react';
+import type { RefAttributes } from 'react';
+import type { RadioGroupProps } from '..';
+import { render, fireEvent } from '../../../tests/utils';
 import Radio from '..';
 
-import { render, fireEvent } from '../../../tests/utils';
-
 describe('Radio Group', () => {
-  function createRadioGroup(props) {
+  function createRadioGroup(props?: RadioGroupProps & RefAttributes<HTMLDivElement>) {
     return (
       <Radio.Group {...props}>
         <Radio value="A">A</Radio>
@@ -14,13 +15,12 @@ describe('Radio Group', () => {
     );
   }
 
-  function createRadioGroupByOption(props) {
+  function createRadioGroupByOption(props?: RadioGroupProps & RefAttributes<HTMLDivElement>) {
     const options = [
       { label: 'A', value: 'A' },
       { label: 'B', value: 'B' },
       { label: 'C', value: 'C' },
     ];
-
     return <Radio.Group {...props} options={options} />;
   }
 
@@ -34,10 +34,10 @@ describe('Radio Group', () => {
       </Radio.Group>,
     );
 
-    fireEvent.mouseEnter(container.querySelector('div'));
+    fireEvent.mouseEnter(container.querySelector('div')!);
     expect(onMouseEnter).toHaveBeenCalled();
 
-    fireEvent.mouseLeave(container.querySelector('div'));
+    fireEvent.mouseLeave(container.querySelector('div')!);
     expect(onMouseLeave).toHaveBeenCalled();
   });
 
@@ -66,7 +66,9 @@ describe('Radio Group', () => {
     const onChange = jest.fn();
     const onChangeRadioGroup = jest.fn();
 
-    const RadioGroup = props => (
+    const RadioGroup: React.FC<
+      RadioGroupProps & { onChangeRadioGroup: RadioGroupProps['onChange'] }
+    > = props => (
       <Radio.Group onChange={props.onChangeRadioGroup}>
         <Radio value="A" onChange={props.onChange}>
           A
@@ -95,7 +97,7 @@ describe('Radio Group', () => {
   it('Trigger onChange when both of radioButton and radioGroup exists', () => {
     const onChange = jest.fn();
 
-    const RadioGroup = props => (
+    const RadioGroup: React.FC<RadioGroupProps> = props => (
       <Radio.Group {...props}>
         <Radio.Button value="A">A</Radio.Button>
         <Radio.Button value="B">B</Radio.Button>
@@ -117,7 +119,7 @@ describe('Radio Group', () => {
     const options = [{ label: 'Bamboo', value: 'Bamboo' }];
     const { container } = render(<Radio.Group options={options} onChange={onChange} />);
 
-    fireEvent.click(container.querySelector('input'));
+    fireEvent.click(container.querySelector('input')!);
     expect(onChange).toHaveBeenCalledTimes(1);
   });
 
@@ -153,7 +155,7 @@ describe('Radio Group', () => {
     const GROUP_NAME = 'GROUP_NAME';
     const { container } = render(createRadioGroup({ name: GROUP_NAME }));
 
-    container.querySelectorAll('input[type="radio"]').forEach(el => {
+    container.querySelectorAll<HTMLInputElement>('input[type="radio"]').forEach(el => {
       expect(el.name).toEqual(GROUP_NAME);
     });
   });
@@ -168,16 +170,16 @@ describe('Radio Group', () => {
   });
 
   it('should forward ref', () => {
-    let radioGroupRef;
+    let radioGroupRef: HTMLDivElement;
     const { container } = render(
       createRadioGroupByOption({
-        ref: ref => {
+        ref(ref: HTMLDivElement) {
           radioGroupRef = ref;
         },
       }),
     );
 
-    expect(radioGroupRef).toBe(container.querySelector('.ant-radio-group'));
+    expect(radioGroupRef!).toBe(container.querySelector<HTMLDivElement>('.ant-radio-group'));
   });
 
   it('should support data-* or aria-* props', () => {
@@ -185,10 +187,14 @@ describe('Radio Group', () => {
       createRadioGroup({
         'data-radio-group-id': 'radio-group-id',
         'aria-label': 'radio-group',
-      }),
+      } as RadioGroupProps),
+    );
+    expect((container.firstChild as HTMLDivElement)?.getAttribute('data-radio-group-id')).toBe(
+      'radio-group-id',
+    );
+    expect((container.firstChild as HTMLDivElement)?.getAttribute('aria-label')).toBe(
+      'radio-group',
     );
-    expect(container.firstChild.getAttribute('data-radio-group-id')).toBe('radio-group-id');
-    expect(container.firstChild.getAttribute('aria-label')).toBe('radio-group');
   });
 
   it('Radio type should not be override', () => {
@@ -241,9 +247,9 @@ describe('Radio Group', () => {
     const { container } = render(
       <Radio.Group options={['1', '2', '3']} onBlur={handleBlur} onFocus={handleFocus} />,
     );
-    fireEvent.focus(container.firstChild);
+    fireEvent.focus(container.firstChild!);
     expect(handleFocus).toHaveBeenCalledTimes(1);
-    fireEvent.blur(container.firstChild);
+    fireEvent.blur(container.firstChild!);
     expect(handleBlur).toHaveBeenCalledTimes(1);
   });
 });
diff --git a/components/radio/__tests__/radio-button.test.js b/components/radio/__tests__/radio-button.test.tsx
similarity index 88%
rename from components/radio/__tests__/radio-button.test.js
rename to components/radio/__tests__/radio-button.test.tsx
index 50a1628da9..bfd7497e85 100644
--- a/components/radio/__tests__/radio-button.test.js
+++ b/components/radio/__tests__/radio-button.test.tsx
@@ -1,4 +1,6 @@
+import type { RefAttributes } from 'react';
 import React from 'react';
+import type { RadioGroupProps } from '..';
 import Radio, { Button } from '..';
 import focusTest from '../../../tests/shared/focusTest';
 import mountTest from '../../../tests/shared/mountTest';
@@ -25,16 +27,16 @@ describe('Radio Button', () => {
       <Button onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave} />,
     );
 
-    fireEvent.mouseEnter(container.querySelector('label'));
+    fireEvent.mouseEnter(container.querySelector('label')!);
     expect(onMouseEnter).toHaveBeenCalled();
 
-    fireEvent.mouseLeave(container.querySelector('label'));
+    fireEvent.mouseLeave(container.querySelector('label')!);
     expect(onMouseLeave).toHaveBeenCalled();
   });
 });
 
 describe('Radio Group', () => {
-  function createRadioGroup(props) {
+  function createRadioGroup(props?: RadioGroupProps & RefAttributes<HTMLDivElement>) {
     return (
       <Radio.Group {...props}>
         <Button value="A">A</Button>
@@ -128,7 +130,7 @@ describe('Radio Group', () => {
     const options = [{ label: 'Bamboo', value: 'Bamboo' }];
     const { container } = render(<Radio.Group options={options} onChange={onChange} />);
 
-    fireEvent.click(container.querySelector('input'));
+    fireEvent.click(container.querySelector('input')!);
     expect(onChange).toHaveBeenCalledTimes(1);
   });
 
@@ -152,7 +154,7 @@ describe('Radio Group', () => {
     const GROUP_NAME = 'GROUP_NAME';
     const { container } = render(createRadioGroup({ name: GROUP_NAME }));
 
-    container.querySelectorAll('input[type="radio"]').forEach(el => {
+    container.querySelectorAll<HTMLInputElement>('input[type="radio"]').forEach(el => {
       expect(el.name).toEqual(GROUP_NAME);
     });
   });
@@ -167,16 +169,16 @@ describe('Radio Group', () => {
   });
 
   it('should forward ref', () => {
-    let radioGroupRef;
+    let radioGroupRef: HTMLDivElement;
     const { container } = render(
       createRadioGroup({
-        ref: ref => {
+        ref(ref: HTMLDivElement) {
           radioGroupRef = ref;
         },
       }),
     );
 
-    expect(radioGroupRef).toBe(container.querySelector('.ant-radio-group'));
+    expect(radioGroupRef!).toBe(container.querySelector('.ant-radio-group'));
   });
 
   it('should support data-* or aria-* props', () => {
@@ -184,10 +186,14 @@ describe('Radio Group', () => {
       createRadioGroup({
         'data-radio-group-id': 'radio-group-id',
         'aria-label': 'radio-group',
-      }),
+      } as RadioGroupProps),
+    );
+    expect((container.firstChild as HTMLDivElement)?.getAttribute('data-radio-group-id')).toBe(
+      'radio-group-id',
+    );
+    expect((container.firstChild as HTMLDivElement)?.getAttribute('aria-label')).toBe(
+      'radio-group',
     );
-    expect(container.firstChild.getAttribute('data-radio-group-id')).toBe('radio-group-id');
-    expect(container.firstChild.getAttribute('aria-label')).toBe('radio-group');
   });
 
   it('Radio type should not be override', () => {
diff --git a/components/radio/__tests__/radio.test.js b/components/radio/__tests__/radio.test.tsx
similarity index 88%
rename from components/radio/__tests__/radio.test.js
rename to components/radio/__tests__/radio.test.tsx
index 57259318ab..633f0b50ca 100644
--- a/components/radio/__tests__/radio.test.js
+++ b/components/radio/__tests__/radio.test.tsx
@@ -27,10 +27,10 @@ describe('Radio', () => {
 
     const { container } = render(<Radio onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave} />);
 
-    fireEvent.mouseEnter(container.querySelector('label'));
+    fireEvent.mouseEnter(container.querySelector('label')!);
     expect(onMouseEnter).toHaveBeenCalled();
 
-    fireEvent.mouseLeave(container.querySelector('label'));
+    fireEvent.mouseLeave(container.querySelector('label')!);
     expect(onMouseLeave).toHaveBeenCalled();
   });
 });
diff --git a/components/rate/__tests__/__snapshots__/demo.test.js.snap b/components/rate/__tests__/__snapshots__/demo.test.ts.snap
similarity index 100%
rename from components/rate/__tests__/__snapshots__/demo.test.js.snap
rename to components/rate/__tests__/__snapshots__/demo.test.ts.snap
diff --git a/components/rate/__tests__/__snapshots__/index.test.js.snap b/components/rate/__tests__/__snapshots__/index.test.ts.snap
similarity index 100%
rename from components/rate/__tests__/__snapshots__/index.test.js.snap
rename to components/rate/__tests__/__snapshots__/index.test.ts.snap
diff --git a/components/rate/__tests__/demo.test.js b/components/rate/__tests__/demo.test.ts
similarity index 100%
rename from components/rate/__tests__/demo.test.js
rename to components/rate/__tests__/demo.test.ts
diff --git a/components/rate/__tests__/index.test.js b/components/rate/__tests__/index.test.ts
similarity index 100%
rename from components/rate/__tests__/index.test.js
rename to components/rate/__tests__/index.test.ts
diff --git a/components/select/__tests__/__snapshots__/demo.test.js.snap b/components/select/__tests__/__snapshots__/demo.test.ts.snap
similarity index 100%
rename from components/select/__tests__/__snapshots__/demo.test.js.snap
rename to components/select/__tests__/__snapshots__/demo.test.ts.snap
diff --git a/components/select/__tests__/__snapshots__/index.test.js.snap b/components/select/__tests__/__snapshots__/index.test.tsx.snap
similarity index 99%
rename from components/select/__tests__/__snapshots__/index.test.js.snap
rename to components/select/__tests__/__snapshots__/index.test.tsx.snap
index 04ee7d270e..e10a4157c5 100644
--- a/components/select/__tests__/__snapshots__/index.test.js.snap
+++ b/components/select/__tests__/__snapshots__/index.test.tsx.snap
@@ -63,7 +63,6 @@ exports[`Select Deprecated should ignore mode="combobox" 1`] = `
 exports[`Select Select Custom Icons should support customized icons 1`] = `
 <div
   class="ant-select ant-select-single ant-select-show-arrow"
-  count="10"
 >
   <div
     class="ant-select-selector"
diff --git a/components/select/__tests__/demo.test.js b/components/select/__tests__/demo.test.ts
similarity index 100%
rename from components/select/__tests__/demo.test.js
rename to components/select/__tests__/demo.test.ts
diff --git a/components/select/__tests__/index.test.js b/components/select/__tests__/index.test.tsx
similarity index 80%
rename from components/select/__tests__/index.test.js
rename to components/select/__tests__/index.test.tsx
index 60478f7132..1cd04989dc 100644
--- a/components/select/__tests__/index.test.js
+++ b/components/select/__tests__/index.test.tsx
@@ -1,10 +1,11 @@
 import React from 'react';
+import { CloseOutlined } from '@ant-design/icons';
+import type { SelectProps } from '..';
 import Select from '..';
 import focusTest from '../../../tests/shared/focusTest';
 import mountTest from '../../../tests/shared/mountTest';
 import rtlTest from '../../../tests/shared/rtlTest';
 import { fireEvent, render, act } from '../../../tests/utils';
-import Icon from '../../icon';
 
 const { Option } = Select;
 
@@ -13,8 +14,8 @@ describe('Select', () => {
   mountTest(Select);
   rtlTest(Select);
 
-  function toggleOpen(container) {
-    fireEvent.mouseDown(container.querySelector('.ant-select-selector'));
+  function toggleOpen(container: ReturnType<typeof render>['container']): void {
+    fireEvent.mouseDown(container.querySelector('.ant-select-selector')!);
     act(() => {
       jest.runAllTimers();
     });
@@ -42,14 +43,19 @@ describe('Select', () => {
   });
 
   it('should not have default notFoundContent when mode is combobox', () => {
-    const { container } = render(<Select mode={Select.SECRET_COMBOBOX_MODE_DO_NOT_USE} />);
+    const { container } = render(
+      <Select mode={Select.SECRET_COMBOBOX_MODE_DO_NOT_USE as SelectProps['mode']} />,
+    );
     toggleOpen(container);
     expect(container.querySelector('.ant-empty')).toBeFalsy();
   });
 
   it('should not have notFoundContent when mode is combobox and notFoundContent is set', () => {
     const { container } = render(
-      <Select mode={Select.SECRET_COMBOBOX_MODE_DO_NOT_USE} notFoundContent="not at all" />,
+      <Select
+        mode={Select.SECRET_COMBOBOX_MODE_DO_NOT_USE as SelectProps['mode']}
+        notFoundContent="not at all"
+      />,
     );
     toggleOpen(container);
     expect(container.querySelector('.ant-select-item-option')).toBeFalsy();
@@ -58,9 +64,9 @@ describe('Select', () => {
 
   it('should be controlled by open prop', () => {
     const onDropdownVisibleChange = jest.fn();
-    const TestComponent = () => {
+    const TestComponent: React.FC = () => {
       const [open, setOpen] = React.useState(false);
-      const handleChange = value => {
+      const handleChange: SelectProps['onDropdownVisibleChange'] = value => {
         onDropdownVisibleChange(value);
         setOpen(value);
       };
@@ -91,24 +97,22 @@ describe('Select', () => {
     expect(container.querySelectorAll('.anticon-search').length).toBe(1);
   });
 
-  //
   describe('Select Custom Icons', () => {
     it('should support customized icons', () => {
       const { rerender, asFragment } = render(
         <Select
-          removeIcon={<Icon type="close" />}
-          clearIcon={<Icon type="close" />}
-          menuItemSelectedIcon={<Icon type="close" />}
+          removeIcon={<CloseOutlined />}
+          clearIcon={<CloseOutlined />}
+          menuItemSelectedIcon={<CloseOutlined />}
         >
           <Option value="1">1</Option>
         </Select>,
       );
       rerender(
         <Select
-          count={10}
-          removeIcon={<Icon type="close" />}
-          clearIcon={<Icon type="close" />}
-          menuItemSelectedIcon={<Icon type="close" />}
+          removeIcon={<CloseOutlined />}
+          clearIcon={<CloseOutlined />}
+          menuItemSelectedIcon={<CloseOutlined />}
         >
           <Option value="1">1</Option>
         </Select>,
@@ -123,7 +127,7 @@ describe('Select', () => {
   describe('Deprecated', () => {
     it('should ignore mode="combobox"', () => {
       const { asFragment } = render(
-        <Select mode="combobox">
+        <Select mode={'combobox' as SelectProps['mode']}>
           <Option value="1">1</Option>
         </Select>,
       );
diff --git a/components/slider/__tests__/__snapshots__/demo.test.js.snap b/components/slider/__tests__/__snapshots__/demo.test.ts.snap
similarity index 100%
rename from components/slider/__tests__/__snapshots__/demo.test.js.snap
rename to components/slider/__tests__/__snapshots__/demo.test.ts.snap
diff --git a/components/slider/__tests__/demo.test.js b/components/slider/__tests__/demo.test.ts
similarity index 100%
rename from components/slider/__tests__/demo.test.js
rename to components/slider/__tests__/demo.test.ts
diff --git a/components/space/__tests__/__snapshots__/demo.test.js.snap b/components/space/__tests__/__snapshots__/demo.test.ts.snap
similarity index 100%
rename from components/space/__tests__/__snapshots__/demo.test.js.snap
rename to components/space/__tests__/__snapshots__/demo.test.ts.snap
diff --git a/components/space/__tests__/__snapshots__/index.test.js.snap b/components/space/__tests__/__snapshots__/index.test.tsx.snap
similarity index 100%
rename from components/space/__tests__/__snapshots__/index.test.js.snap
rename to components/space/__tests__/__snapshots__/index.test.tsx.snap
diff --git a/components/space/__tests__/demo.test.js b/components/space/__tests__/demo.test.ts
similarity index 100%
rename from components/space/__tests__/demo.test.js
rename to components/space/__tests__/demo.test.ts
diff --git a/components/space/__tests__/gap.test.js b/components/space/__tests__/gap.test.tsx
similarity index 58%
rename from components/space/__tests__/gap.test.js
rename to components/space/__tests__/gap.test.tsx
index 856462f8ec..34a8fd9562 100644
--- a/components/space/__tests__/gap.test.js
+++ b/components/space/__tests__/gap.test.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import Space from '..';
 import { render } from '../../../tests/utils';
-// eslint-disable-next-line no-unused-vars
 
 jest.mock('../../_util/styleChecker', () => ({
   canUseDocElement: () => true,
@@ -17,8 +16,15 @@ describe('flex gap', () => {
         <span />
       </Space>,
     );
-
-    expect(container.querySelector('div.ant-space').style['column-gap']).toBe('8px');
-    expect(container.querySelector('div.ant-space').style['row-gap']).toBe('8px');
+    expect(
+      container.querySelector<HTMLDivElement>('div.ant-space')?.style[
+        'column-gap' as keyof CSSStyleDeclaration
+      ],
+    ).toBe('8px');
+    expect(
+      container.querySelector<HTMLDivElement>('div.ant-space')?.style[
+        'row-gap' as keyof CSSStyleDeclaration
+      ],
+    ).toBe('8px');
   });
 });
diff --git a/components/space/__tests__/index.test.js b/components/space/__tests__/index.test.tsx
similarity index 84%
rename from components/space/__tests__/index.test.js
rename to components/space/__tests__/index.test.tsx
index 13a4405f58..13a4ebd1e1 100644
--- a/components/space/__tests__/index.test.js
+++ b/components/space/__tests__/index.test.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable no-console */
 import React, { useState } from 'react';
 import Space from '..';
 import mountTest from '../../../tests/shared/mountTest';
@@ -65,8 +66,12 @@ describe('Space', () => {
       </Space>,
     );
 
-    expect(container.querySelector('div.ant-space-item').style.marginRight).toBe('10px');
-    expect(container.querySelectorAll('div.ant-space-item')[1].style.marginRight).toBe('');
+    expect(container.querySelector<HTMLDivElement>('div.ant-space-item')?.style.marginRight).toBe(
+      '10px',
+    );
+    expect(
+      container.querySelectorAll<HTMLDivElement>('div.ant-space-item')[1]?.style.marginRight,
+    ).toBe('');
   });
 
   it('should render width size 0', () => {
@@ -77,7 +82,9 @@ describe('Space', () => {
       </Space>,
     );
 
-    expect(container.querySelector('div.ant-space-item').style.marginRight).toBe('0px');
+    expect(container.querySelector<HTMLDivElement>('div.ant-space-item')?.style.marginRight).toBe(
+      '0px',
+    );
   });
 
   it('should render vertical space width customize size', () => {
@@ -88,8 +95,12 @@ describe('Space', () => {
       </Space>,
     );
 
-    expect(container.querySelector('div.ant-space-item').style.marginBottom).toBe('10px');
-    expect(container.querySelectorAll('div.ant-space-item')[1].style.marginBottom).toBe('');
+    expect(container.querySelector<HTMLDivElement>('div.ant-space-item')?.style.marginBottom).toBe(
+      '10px',
+    );
+    expect(
+      container.querySelectorAll<HTMLDivElement>('div.ant-space-item')[1]?.style.marginBottom,
+    ).toBe('');
   });
 
   it('should render correct with children', () => {
@@ -147,11 +158,11 @@ describe('Space', () => {
 
     expect(container.querySelector('#demo')).toHaveTextContent('1');
 
-    fireEvent.click(container.querySelector('#demo'));
+    fireEvent.click(container.querySelector('#demo')!);
 
     expect(container.querySelector('#demo')).toHaveTextContent('2');
 
-    fireEvent.click(container.querySelector('p'));
+    fireEvent.click(container.querySelector('p')!);
 
     expect(container.querySelector('#demo')).toHaveTextContent('2');
   });
@@ -179,13 +190,11 @@ describe('Space', () => {
         <div />
       </Space>,
     );
-    // eslint-disable-next-line no-console
     expect(console.error).not.toHaveBeenCalledWith(
       expect.stringContaining('Encountered two children with the same key'),
       expect.anything(),
       expect.anything(),
     );
-    // eslint-disable-next-line no-console
-    console.error.mockRestore();
+    (console.error as any).mockRestore();
   });
 });
diff --git a/components/spin/__tests__/__snapshots__/demo.test.js.snap b/components/spin/__tests__/__snapshots__/demo.test.ts.snap
similarity index 100%
rename from components/spin/__tests__/__snapshots__/demo.test.js.snap
rename to components/spin/__tests__/__snapshots__/demo.test.ts.snap
diff --git a/components/spin/__tests__/demo.test.js b/components/spin/__tests__/demo.test.ts
similarity index 100%
rename from components/spin/__tests__/demo.test.js
rename to components/spin/__tests__/demo.test.ts
diff --git a/components/table/__tests__/Table.expand.test.js b/components/table/__tests__/Table.expand.test.tsx
similarity index 95%
rename from components/table/__tests__/Table.expand.test.js
rename to components/table/__tests__/Table.expand.test.tsx
index 3f1283c6aa..136349beeb 100644
--- a/components/table/__tests__/Table.expand.test.js
+++ b/components/table/__tests__/Table.expand.test.tsx
@@ -40,7 +40,7 @@ const data = [
 describe('Table.expand', () => {
   it('click to expand', () => {
     const { container, asFragment } = render(<Table columns={columns} dataSource={data} />);
-    fireEvent.click(container.querySelector('.ant-table-row-expand-icon'));
+    fireEvent.click(container.querySelector('.ant-table-row-expand-icon')!);
     expect(asFragment().firstChild).toMatchSnapshot();
   });
 
@@ -55,10 +55,10 @@ describe('Table.expand', () => {
         }}
       />,
     );
-    fireEvent.click(container.querySelector('.ant-table-row-expand-icon'));
+    fireEvent.click(container.querySelector('.ant-table-row-expand-icon')!);
     expect(container.querySelector('.ant-table-row-expand-icon-expanded')).toBeTruthy();
 
-    fireEvent.click(container.querySelector('.ant-table-row-expand-icon'));
+    fireEvent.click(container.querySelector('.ant-table-row-expand-icon')!);
     expect(container.querySelector('.ant-table-row-expand-icon-collapsed')).toBeTruthy();
   });
 
@@ -78,14 +78,16 @@ describe('Table.expand', () => {
   it('row indent padding should be 0px when indentSize defined as 0', () => {
     const { container } = render(<Table indentSize={0} columns={columns} dataSource={data} />);
 
-    fireEvent.click(container.querySelector('.ant-table-row-expand-icon'));
-    expect(container.querySelector('.indent-level-1').style.paddingLeft).toEqual('0px');
+    fireEvent.click(container.querySelector('.ant-table-row-expand-icon')!);
+    expect(container.querySelector<HTMLElement>('.indent-level-1')?.style.paddingLeft).toEqual(
+      '0px',
+    );
   });
 
   it('has right aria-expanded state', () => {
     const { container } = render(<Table columns={columns} dataSource={data} />);
     expect(container.querySelector('[aria-expanded=false]')).toBeTruthy();
-    fireEvent.click(container.querySelector('.ant-table-row-expand-icon'));
+    fireEvent.click(container.querySelector('.ant-table-row-expand-icon')!);
     expect(container.querySelector('[aria-expanded=true]')).toBeTruthy();
   });
 
diff --git a/components/table/__tests__/Table.filter.test.js b/components/table/__tests__/Table.filter.test.tsx
similarity index 83%
rename from components/table/__tests__/Table.filter.test.js
rename to components/table/__tests__/Table.filter.test.tsx
index 26d78fd6d0..7d1f2b0cf9 100644
--- a/components/table/__tests__/Table.filter.test.js
+++ b/components/table/__tests__/Table.filter.test.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable no-unsafe-optional-chaining */
 /* eslint-disable react/no-multi-comp */
 import React from 'react';
 import Table from '..';
@@ -8,6 +9,9 @@ import Input from '../../input';
 import Menu from '../../menu';
 import Select from '../../select';
 import Tooltip from '../../tooltip';
+import type { SelectProps } from '../../select';
+import type { ColumnGroupType, ColumnType, TableProps } from '..';
+import type { ColumnFilterItem, FilterDropdownProps, FilterValue } from '../interface';
 
 // https://github.com/Semantic-Org/Semantic-UI-React/blob/72c45080e4f20b531fda2e3e430e384083d6766b/test/specs/modules/Dropdown/Dropdown-test.js#L73
 const nativeEvent = { nativeEvent: { stopImmediatePropagation: () => {} } };
@@ -16,8 +20,8 @@ describe('Table.filter', () => {
   window.requestAnimationFrame = callback => window.setTimeout(callback, 16);
   window.cancelAnimationFrame = window.clearTimeout;
 
-  const filterFn = (value, record) => record.name.indexOf(value) !== -1;
-  const column = {
+  const filterFn = (value: any, record: any) => record.name.includes(value);
+  const column: ColumnGroupType<any> | ColumnType<any> = {
     title: 'Name',
     dataIndex: 'name',
     filters: [
@@ -42,25 +46,22 @@ describe('Table.filter', () => {
     { key: 3, name: 'Jerry' },
   ];
 
-  const longData = [];
+  const longData: Record<'key' | 'name', string>[] = [];
   for (let i = 0; i < 100; i += 1) {
-    longData.push({
-      key: i.toString(),
-      name: 'name',
-    });
+    longData.push({ key: i.toString(), name: 'name' });
   }
 
-  function createTable(props) {
+  function createTable(props?: TableProps<any>) {
     return <Table columns={[column]} dataSource={data} pagination={false} {...props} />;
   }
 
-  function renderedNames(container) {
-    const namesList = [];
+  function renderedNames(container: ReturnType<typeof render>['container']) {
+    const namesList: (Node['textContent'] | undefined)[] = [];
     container
-      .querySelector('.ant-table-tbody')
-      .querySelectorAll('tr')
-      .forEach(tr => {
-        namesList.push(tr.querySelector('td').textContent);
+      ?.querySelector('.ant-table-tbody')
+      ?.querySelectorAll('tr')
+      ?.forEach(tr => {
+        namesList.push(tr.querySelector('td')?.textContent);
       });
     return namesList;
   }
@@ -107,7 +108,7 @@ describe('Table.filter', () => {
   // async await 解决 Warning: An update to Item ran an effect, but was not wrapped in act(...).
   it('renders menu correctly', async () => {
     const { container } = render(createTable());
-    fireEvent.click(container.querySelector('span.ant-dropdown-trigger'), nativeEvent);
+    fireEvent.click(container.querySelector('span.ant-dropdown-trigger')!, nativeEvent);
     await waitFor(() =>
       expect(container.querySelector('.ant-table-filter-dropdown')).toMatchSnapshot(),
     );
@@ -126,7 +127,7 @@ describe('Table.filter', () => {
       }),
     );
 
-    fireEvent.click(container.querySelector('span.ant-dropdown-trigger'), nativeEvent);
+    fireEvent.click(container.querySelector('span.ant-dropdown-trigger')!, nativeEvent);
 
     act(() => {
       jest.runAllTimers();
@@ -148,7 +149,7 @@ describe('Table.filter', () => {
         ],
       }),
     );
-    fireEvent.click(container.querySelector('span.ant-dropdown-trigger'), nativeEvent);
+    fireEvent.click(container.querySelector('span.ant-dropdown-trigger')!, nativeEvent);
     await waitFor(() =>
       expect(container.querySelector('.ant-table-filter-dropdown')).toMatchSnapshot(),
     );
@@ -167,15 +168,21 @@ describe('Table.filter', () => {
       }),
     );
 
-    fireEvent.click(container.querySelector('span.ant-dropdown-trigger'), nativeEvent);
+    fireEvent.click(container.querySelector('span.ant-dropdown-trigger')!, nativeEvent);
     await waitFor(() =>
       expect(container.querySelector('.ant-table-filter-dropdown')).toMatchSnapshot(),
     );
   });
 
   it('override custom filter correctly', () => {
-    let renderSelectedKeys = null;
-    const filter = ({ prefixCls, setSelectedKeys, selectedKeys, confirm, clearFilters }) => {
+    let renderSelectedKeys: React.Key[] | null = null;
+    const filter = ({
+      prefixCls,
+      setSelectedKeys,
+      selectedKeys,
+      confirm,
+      clearFilters,
+    }: FilterDropdownProps): React.ReactNode => {
       renderSelectedKeys = selectedKeys;
 
       return (
@@ -183,10 +190,10 @@ describe('Table.filter', () => {
           <span onClick={() => setSelectedKeys([42])} id="setSelectedKeys">
             setSelectedKeys
           </span>
-          <span onClick={() => confirm()} id="confirm">
+          <span onClick={() => confirm?.()} id="confirm">
             Confirm
           </span>
-          <span onClick={() => clearFilters()} id="reset">
+          <span onClick={() => clearFilters?.()} id="reset">
             Reset
           </span>
           <span
@@ -214,36 +221,36 @@ describe('Table.filter', () => {
     );
 
     // check if renderer well
-    fireEvent.click(container.querySelector('span.ant-dropdown-trigger'));
+    fireEvent.click(container.querySelector('span.ant-dropdown-trigger')!);
     expect(container.querySelector('#customFilter')).toMatchSnapshot();
 
     // try to use reset btn
     expect(renderSelectedKeys).toHaveLength(0);
-    fireEvent.click(container.querySelector('#setSelectedKeys'));
-    fireEvent.click(container.querySelector('#confirm'));
+    fireEvent.click(container.querySelector('#setSelectedKeys')!);
+    fireEvent.click(container.querySelector('#confirm')!);
     expect(renderSelectedKeys).toEqual([42]);
 
     // Reset
-    fireEvent.click(container.querySelector('#reset'));
-    fireEvent.click(container.querySelector('#confirm'));
+    fireEvent.click(container.querySelector('#reset')!);
+    fireEvent.click(container.querySelector('#confirm')!);
     expect(renderSelectedKeys).toHaveLength(0);
 
     // try to use confirm btn
-    fireEvent.click(container.querySelector('span.ant-dropdown-trigger'));
-    fireEvent.click(container.querySelector('#setSelectedKeys'));
+    fireEvent.click(container.querySelector('span.ant-dropdown-trigger')!);
+    fireEvent.click(container.querySelector('#setSelectedKeys')!);
     expect(container.querySelector('.ant-dropdown-open')).toBeTruthy();
-    fireEvent.click(container.querySelector('#confirm'));
+    fireEvent.click(container.querySelector('#confirm')!);
     expect(renderSelectedKeys).toEqual([42]);
     expect(container.querySelector('.ant-dropdown-open')).toBeFalsy();
 
     // Simulate onSelect, setSelectedKeys & confirm
-    fireEvent.click(container.querySelector('span.ant-dropdown-trigger'));
-    fireEvent.click(container.querySelector('#simulateOnSelect'));
+    fireEvent.click(container.querySelector('span.ant-dropdown-trigger')!);
+    fireEvent.click(container.querySelector('#simulateOnSelect')!);
     expect(renderSelectedKeys).toEqual([43]);
   });
 
   describe('filterDropdownOpen & filterDropdownVisible', () => {
-    function test(propName) {
+    function test(propName: string) {
       it(`can be controlled by ${propName}`, () => {
         const { container, rerender } = render(
           createTable({
@@ -281,7 +288,7 @@ describe('Table.filter', () => {
       title: 'Name',
       dataIndex: 'name',
       filters: [{ text: 'J', value: 'J' }],
-      onFilter: (value, record) => record.name.includes(value),
+      onFilter: (value: any, record: any) => record.name.includes(value),
     };
 
     const tableProps = {
@@ -296,20 +303,22 @@ describe('Table.filter', () => {
     const { container, rerender } = render(createTable(tableProps));
 
     const checkboxList = container
-      .querySelector('.ant-table-filter-dropdown')
-      .querySelectorAll('input[type="checkbox"]');
-    expect(checkboxList.length).toBeTruthy();
-    checkboxList.forEach(checkbox => {
-      expect(checkbox.checkbox).toBeFalsy();
+      ?.querySelector('.ant-table-filter-dropdown')
+      ?.querySelectorAll<HTMLInputElement>('input[type="checkbox"]');
+    expect(checkboxList?.length).toBeTruthy();
+    checkboxList?.forEach(checkbox => {
+      expect((checkbox as any)?.checkbox).toBeFalsy();
     });
 
     fireEvent.click(
-      container.querySelector('.ant-table-filter-dropdown').querySelector('input[type="checkbox"]'),
+      container
+        .querySelector('.ant-table-filter-dropdown')
+        ?.querySelector('input[type="checkbox"]')!,
     );
     fireEvent.click(
       container
-        .querySelector('.ant-table-filter-dropdown')
-        .querySelector('.ant-table-filter-dropdown-btns .ant-btn-primary'),
+        ?.querySelector('.ant-table-filter-dropdown')
+        ?.querySelector('.ant-table-filter-dropdown-btns .ant-btn-primary')!,
     );
 
     expect(container.querySelectorAll('tbody tr')).toHaveLength(2);
@@ -335,7 +344,7 @@ describe('Table.filter', () => {
         ],
       }),
     );
-    fireEvent.click(container.querySelector('.ant-dropdown-trigger'));
+    fireEvent.click(container.querySelector('.ant-dropdown-trigger')!);
     expect(onFilterDropdownOpenChange).toHaveBeenCalledWith(true);
   });
 
@@ -448,11 +457,11 @@ describe('Table.filter', () => {
         }),
       );
 
-      fireEvent.click(container.querySelector('.ant-dropdown-trigger'));
+      fireEvent.click(container.querySelector('.ant-dropdown-trigger')!);
       expect(
         container
-          .querySelector('.ant-table-filter-dropdown')
-          .querySelectorAll('.ant-checkbox-input')[0].checked,
+          ?.querySelector('.ant-table-filter-dropdown')
+          ?.querySelectorAll<HTMLInputElement>('.ant-checkbox-input')[0].checked,
       ).toEqual(true);
     });
 
@@ -467,12 +476,12 @@ describe('Table.filter', () => {
         ],
       }),
     );
-    fireEvent.click(container.querySelector('.ant-dropdown-trigger'));
+    fireEvent.click(container.querySelector('.ant-dropdown-trigger')!);
 
     expect(
       container
-        .querySelector('.ant-table-filter-dropdown')
-        .querySelectorAll('.ant-checkbox-input')[0].checked,
+        ?.querySelector('.ant-table-filter-dropdown')
+        ?.querySelectorAll<HTMLInputElement>('.ant-checkbox-input')[0]?.checked,
     ).toEqual(false);
   });
 
@@ -488,7 +497,7 @@ describe('Table.filter', () => {
       }),
     );
     expect(container.querySelectorAll('tbody tr').length).toBe(1);
-    expect(container.querySelector('tbody tr').textContent).toBe('Lucy');
+    expect(container.querySelector('tbody tr')?.textContent).toBe('Lucy');
 
     // Should properly ignore further defaultFilteredValue changes
     rerender(
@@ -503,7 +512,7 @@ describe('Table.filter', () => {
     );
 
     expect(container.querySelectorAll('tbody tr').length).toBe(1);
-    expect(container.querySelector('tbody tr').textContent).toBe('Lucy');
+    expect(container.querySelector('tbody tr')?.textContent).toBe('Lucy');
 
     // Should properly be overidden by non-null filteredValue
     rerender(
@@ -518,7 +527,7 @@ describe('Table.filter', () => {
       }),
     );
     expect(container.querySelectorAll('tbody tr').length).toBe(1);
-    expect(container.querySelector('tbody tr').textContent).toBe('Tom');
+    expect(container.querySelector('tbody tr')?.textContent).toBe('Tom');
 
     // Should properly be overidden by a null filteredValue
     rerender(
@@ -539,9 +548,9 @@ describe('Table.filter', () => {
   it('fires change event', () => {
     const handleChange = jest.fn();
     const { container } = render(createTable({ onChange: handleChange }));
-    fireEvent.click(container.querySelector('.ant-dropdown-trigger'));
+    fireEvent.click(container.querySelector('.ant-dropdown-trigger')!);
     fireEvent.click(container.querySelectorAll('.ant-dropdown-menu-item')[0]);
-    fireEvent.click(container.querySelector('.ant-table-filter-dropdown-btns .ant-btn-primary'));
+    fireEvent.click(container.querySelector('.ant-table-filter-dropdown-btns .ant-btn-primary')!);
     expect(handleChange).toHaveBeenCalledWith(
       {},
       { name: ['boy'] },
@@ -556,9 +565,9 @@ describe('Table.filter', () => {
   it('fires pagination change event', async () => {
     const onPaginationChange = jest.fn();
     const { container } = render(createTable({ pagination: { onChange: onPaginationChange } }));
-    fireEvent.click(container.querySelector('.ant-dropdown-trigger'));
+    fireEvent.click(container.querySelector('.ant-dropdown-trigger')!);
     fireEvent.click(container.querySelectorAll('.ant-dropdown-menu-item')[0]);
-    fireEvent.click(container.querySelector('.ant-table-filter-dropdown-btns .ant-btn-primary'));
+    fireEvent.click(container.querySelector('.ant-table-filter-dropdown-btns .ant-btn-primary')!);
     await waitFor(() => expect(onPaginationChange).toHaveBeenCalledWith(1, 10));
   });
 
@@ -566,8 +575,8 @@ describe('Table.filter', () => {
     const handleChange = jest.fn();
     const { container } = render(createTable({ onChange: handleChange }));
 
-    fireEvent.click(container.querySelector('.ant-dropdown-trigger'));
-    fireEvent.click(container.querySelector('.ant-table-filter-dropdown-btns .ant-btn-primary'));
+    fireEvent.click(container.querySelector('.ant-dropdown-trigger')!);
+    fireEvent.click(container.querySelector('.ant-table-filter-dropdown-btns .ant-btn-primary')!);
     await waitFor(() => expect(handleChange).not.toHaveBeenCalled());
   });
 
@@ -584,8 +593,8 @@ describe('Table.filter', () => {
         ],
       }),
     );
-    fireEvent.click(container.querySelector('.ant-dropdown-trigger'));
-    fireEvent.click(container.querySelector('.ant-table-filter-dropdown-btns .ant-btn-primary'));
+    fireEvent.click(container.querySelector('.ant-dropdown-trigger')!);
+    fireEvent.click(container.querySelector('.ant-table-filter-dropdown-btns .ant-btn-primary')!);
     await waitFor(() => expect(handleChange).not.toHaveBeenCalled());
   });
 
@@ -627,7 +636,7 @@ describe('Table.filter', () => {
     expect(renderedNames(container)).toEqual(['Jack', 'Lucy', 'Tom', 'Jerry']);
 
     // Open
-    fireEvent.click(container.querySelector('.ant-table-filter-trigger'));
+    fireEvent.click(container.querySelector('.ant-table-filter-trigger')!);
 
     function getFilterMenu() {
       return container.querySelector('.ant-table-filter-dropdown');
@@ -645,21 +654,21 @@ describe('Table.filter', () => {
 
     // Open Level2
     fireEvent.mouseEnter(
-      getFilterMenu().querySelectorAll('div.ant-dropdown-menu-submenu-title')[0],
+      getFilterMenu()?.querySelectorAll('div.ant-dropdown-menu-submenu-title')[0]!,
     );
     refreshTimer();
 
     // Open Level3
     fireEvent.mouseEnter(
-      getFilterMenu().querySelectorAll('div.ant-dropdown-menu-submenu-title')[1],
+      getFilterMenu()?.querySelectorAll('div.ant-dropdown-menu-submenu-title')[1]!,
     );
     refreshTimer();
 
     // Select Level3 value
-    const items = getFilterMenu().querySelectorAll('li.ant-dropdown-menu-item');
-    fireEvent.click(items[items.length - 1]);
+    const items = getFilterMenu()?.querySelectorAll('li.ant-dropdown-menu-item');
+    fireEvent.click(items?.[items.length - 1]!);
     fireEvent.click(
-      getFilterMenu().querySelector('.ant-table-filter-dropdown-btns .ant-btn-primary'),
+      getFilterMenu()?.querySelector('.ant-table-filter-dropdown-btns .ant-btn-primary')!,
     );
     refreshTimer();
 
@@ -672,8 +681,8 @@ describe('Table.filter', () => {
     expect(renderedNames(container)).toEqual(['Jack']);
 
     // What's this? Is that a coverage case? Or check a crash?
-    const latestItems = getFilterMenu().querySelectorAll('li.ant-dropdown-menu-item');
-    fireEvent.click(latestItems[latestItems.length - 1]);
+    const latestItems = getFilterMenu()?.querySelectorAll('li.ant-dropdown-menu-item');
+    fireEvent.click(latestItems?.[latestItems?.length - 1]!);
   });
 
   describe('should support value types', () => {
@@ -702,20 +711,20 @@ describe('Table.filter', () => {
           }),
         );
 
-        fireEvent.click(container.querySelector('.ant-dropdown-trigger'));
+        fireEvent.click(container.querySelector('.ant-dropdown-trigger')!);
 
         fireEvent.click(container.querySelectorAll('.ant-dropdown-menu-item')[0]);
 
         // This test can be remove if refactor
         fireEvent.click(
-          container.querySelector('.ant-table-filter-dropdown-btns .ant-btn-primary'),
+          container.querySelector('.ant-table-filter-dropdown-btns .ant-btn-primary')!,
         );
 
         await waitFor(() =>
           expect(
             container
-              .querySelector('.ant-table-filter-dropdown')
-              .querySelectorAll('.ant-checkbox-input')[0].checked,
+              ?.querySelector('.ant-table-filter-dropdown')
+              ?.querySelectorAll<HTMLInputElement>('.ant-checkbox-input')[0].checked,
           ).toEqual(true),
         );
 
@@ -734,8 +743,8 @@ describe('Table.filter', () => {
 
         expect(
           container
-            .querySelector('.ant-table-filter-dropdown')
-            .querySelectorAll('.ant-checkbox-input')[0].checked,
+            ?.querySelector('.ant-table-filter-dropdown')
+            ?.querySelectorAll<HTMLInputElement>('.ant-checkbox-input')[0].checked,
         ).toEqual(false);
       });
     });
@@ -744,11 +753,13 @@ describe('Table.filter', () => {
   it('works with JSX in controlled mode', () => {
     const { Column } = Table;
     class App extends React.Component {
-      state = {
+      state: {
+        filters: { name?: ColumnType<any>['filteredValue'] };
+      } = {
         filters: {},
       };
 
-      handleChange = (pagination, filters) => {
+      handleChange: TableProps<any>['onChange'] = (_, filters) => {
         this.setState({ filters });
       };
 
@@ -774,21 +785,21 @@ describe('Table.filter', () => {
 
     const { container } = render(<App />);
 
-    fireEvent.click(container.querySelector('.ant-dropdown-trigger'));
+    fireEvent.click(container.querySelector('.ant-dropdown-trigger')!);
     expect(container.querySelector('.ant-dropdown-open')).toBeTruthy();
 
     fireEvent.click(container.querySelectorAll('.ant-dropdown-menu-item')[0]);
-    fireEvent.click(container.querySelector('.ant-table-filter-dropdown-btns .ant-btn-primary'));
+    fireEvent.click(container.querySelector('.ant-table-filter-dropdown-btns .ant-btn-primary')!);
     expect(renderedNames(container)).toEqual(['Jack']);
     expect(container.querySelector('.ant-dropdown-open')).toBeFalsy();
 
-    fireEvent.click(container.querySelector('.ant-dropdown-trigger'));
-    fireEvent.click(container.querySelector('.ant-table-filter-dropdown-btns .ant-btn-link'));
+    fireEvent.click(container.querySelector('.ant-dropdown-trigger')!);
+    fireEvent.click(container.querySelector('.ant-table-filter-dropdown-btns .ant-btn-link')!);
 
     expect(container.querySelector('.ant-dropdown-open')).toBeTruthy();
     expect(renderedNames(container)).toEqual(['Jack']);
 
-    fireEvent.click(container.querySelector('.ant-table-filter-dropdown-btns .ant-btn-primary'));
+    fireEvent.click(container.querySelector('.ant-table-filter-dropdown-btns .ant-btn-primary')!);
     expect(renderedNames(container)).toEqual(['Jack', 'Lucy', 'Tom', 'Jerry']);
     expect(container.querySelector('.ant-dropdown-open')).toBeFalsy();
   });
@@ -846,16 +857,16 @@ describe('Table.filter', () => {
         onChange: handleChange,
       }),
     );
-    fireEvent.click(container.querySelector('.ant-dropdown-trigger'));
-    fireEvent.click(container.querySelector('.ant-dropdown-menu-item'));
-    fireEvent.click(container.querySelector('.ant-dropdown-trigger'));
+    fireEvent.click(container.querySelector('.ant-dropdown-trigger')!);
+    fireEvent.click(container.querySelector('.ant-dropdown-menu-item')!);
+    fireEvent.click(container.querySelector('.ant-dropdown-trigger')!);
 
     expect(handleChange).toHaveBeenCalled();
     expect(handleChange.mock.calls[0][3].currentDataSource.length).toBe(1);
   });
 
   it('renders custom filter icon correctly', () => {
-    const filterIcon = filtered => (
+    const filterIcon = (filtered: boolean): React.ReactNode => (
       <span className="customize-icon">{filtered ? 'filtered' : 'unfiltered'}</span>
     );
     const { container } = render(
@@ -868,9 +879,9 @@ describe('Table.filter', () => {
         ],
       }),
     );
-    fireEvent.click(container.querySelector('.ant-dropdown-trigger'));
-    fireEvent.click(container.querySelector('.ant-dropdown-menu-item'));
-    fireEvent.click(container.querySelector('.ant-dropdown-trigger'));
+    fireEvent.click(container.querySelector('.ant-dropdown-trigger')!);
+    fireEvent.click(container.querySelector('.ant-dropdown-menu-item')!);
+    fireEvent.click(container.querySelector('.ant-dropdown-trigger')!);
     expect(container.querySelector('.customize-icon')).toMatchSnapshot();
   });
 
@@ -927,7 +938,9 @@ describe('Table.filter', () => {
   // https://github.com/ant-design/ant-design/issues/13028
   it('reset dropdown filter correctly', () => {
     class Demo extends React.Component {
-      state = {};
+      state: {
+        name?: ColumnType<any>['filteredValue'];
+      } = {};
 
       onChange = () => {
         this.setState({ name: '' });
@@ -953,7 +966,7 @@ describe('Table.filter', () => {
                       setSelectedKeys(e.target.value ? [e.target.value] : []);
                     }}
                   />
-                  <Button onClick={confirm}>Confirm</Button>
+                  <Button onClick={() => confirm()}>Confirm</Button>
                 </div>
               ),
             },
@@ -963,18 +976,18 @@ describe('Table.filter', () => {
     }
 
     const { container } = render(<Demo />);
-    fireEvent.click(container.querySelector('.ant-dropdown-trigger'));
-    fireEvent.change(container.querySelector('.ant-input'), { target: { value: 'test' } });
-    expect(container.querySelector('.ant-input').value).toBe('test');
-    fireEvent.click(container.querySelector('.ant-btn'));
-    fireEvent.click(container.querySelector('.ant-dropdown-trigger'));
-    expect(container.querySelector('.ant-input').value).toBe('');
+    fireEvent.click(container.querySelector('.ant-dropdown-trigger')!);
+    fireEvent.change(container.querySelector('.ant-input')!, { target: { value: 'test' } });
+    expect(container.querySelector<HTMLInputElement>('.ant-input')?.value).toBe('test');
+    fireEvent.click(container.querySelector('.ant-btn')!);
+    fireEvent.click(container.querySelector('.ant-dropdown-trigger')!);
+    expect(container.querySelector<HTMLInputElement>('.ant-input')?.value).toBe('');
   });
 
   // https://github.com/ant-design/ant-design/issues/17833
   it('should not trigger onChange when bluring custom filterDropdown', () => {
     const onChange = jest.fn();
-    const filterDropdown = ({ setSelectedKeys }) => (
+    const filterDropdown = ({ setSelectedKeys }: FilterDropdownProps) => (
       <input onChange={e => setSelectedKeys([e.target.value])} />
     );
     const { container } = render(
@@ -990,18 +1003,18 @@ describe('Table.filter', () => {
         ],
       }),
     );
-    fireEvent.click(container.querySelector('.ant-dropdown-trigger'));
-    fireEvent.change(container.querySelector('input'), { target: { value: 'whatevervalue' } });
-    fireEvent.click(container.querySelector('.ant-dropdown-trigger'));
+    fireEvent.click(container.querySelector('.ant-dropdown-trigger')!);
+    fireEvent.change(container.querySelector('input')!, { target: { value: 'whatevervalue' } });
+    fireEvent.click(container.querySelector('.ant-dropdown-trigger')!);
     expect(onChange).not.toHaveBeenCalled();
   });
 
   it('should trigger onChange with correct params if defines custom filterDropdown', () => {
     const onChange = jest.fn();
-    const filterDropdown = ({ setSelectedKeys, confirm }) => (
+    const filterDropdown = ({ setSelectedKeys, confirm }: FilterDropdownProps) => (
       <div>
         <input onChange={e => setSelectedKeys([e.target.value])} />
-        <button className="confirm-btn" type="submit" onClick={confirm}>
+        <button className="confirm-btn" type="submit" onClick={() => confirm()}>
           Confirm
         </button>
       </div>
@@ -1020,9 +1033,9 @@ describe('Table.filter', () => {
       }),
     );
 
-    fireEvent.click(container.querySelector('.ant-dropdown-trigger'));
-    fireEvent.change(container.querySelector('input'), { target: { value: 'test' } });
-    fireEvent.click(container.querySelector('.confirm-btn'));
+    fireEvent.click(container.querySelector('.ant-dropdown-trigger')!);
+    fireEvent.change(container.querySelector('input')!, { target: { value: 'test' } });
+    fireEvent.click(container.querySelector('.confirm-btn')!);
 
     expect(onChange).toHaveBeenCalled();
     onChange.mock.calls.forEach(([, currentFilters]) => {
@@ -1035,9 +1048,9 @@ describe('Table.filter', () => {
     let renderSelectedKeys = null;
     const onChange = jest.fn();
 
-    const filterDropdown = ({ setSelectedKeys, selectedKeys, confirm }) => {
+    const filterDropdown = ({ setSelectedKeys, selectedKeys, confirm }: FilterDropdownProps) => {
       renderSelectedKeys = selectedKeys;
-      const handleChange = selectedValues => {
+      const handleChange: SelectProps['onChange'] = selectedValues => {
         setSelectedKeys(selectedValues);
       };
 
@@ -1065,7 +1078,7 @@ describe('Table.filter', () => {
               },
             ]}
           />
-          <button className="confirm-btn" type="submit" onClick={confirm}>
+          <button className="confirm-btn" type="submit" onClick={() => confirm()}>
             Confirm
           </button>
         </div>
@@ -1076,7 +1089,7 @@ describe('Table.filter', () => {
         value: 2,
         label: 'Closed',
       },
-    ];
+    ] as unknown as ColumnType<any>['filteredValue'];
     const selectedValue = [
       {
         key: 2,
@@ -1106,10 +1119,10 @@ describe('Table.filter', () => {
 
     expect(renderSelectedKeys).toEqual(filteredValue);
 
-    fireEvent.click(container.querySelector('.ant-dropdown-trigger'));
-    fireEvent.mouseDown(container.querySelector('.ant-select-selector'));
-    fireEvent.click(container.querySelector('.ant-select-item-option'));
-    fireEvent.click(container.querySelector('.confirm-btn'));
+    fireEvent.click(container.querySelector('.ant-dropdown-trigger')!);
+    fireEvent.mouseDown(container.querySelector('.ant-select-selector')!);
+    fireEvent.click(container.querySelector('.ant-select-item-option')!);
+    fireEvent.click(container.querySelector('.confirm-btn')!);
     expect(onChange).toHaveBeenCalled();
     onChange.mock.calls.forEach(([, currentFilters]) => {
       const [, val] = Object.entries(currentFilters)[0];
@@ -1121,7 +1134,7 @@ describe('Table.filter', () => {
   it('not crash when dynamic change filter', () => {
     const onChange = jest.fn();
 
-    const Test = ({ filters }) => (
+    const Test: React.FC<{ filters?: ColumnFilterItem[] }> = ({ filters }) => (
       <Table
         onChange={onChange}
         rowKey="name"
@@ -1130,7 +1143,7 @@ describe('Table.filter', () => {
             title: 'Name',
             dataIndex: 'name',
             filters,
-            onFilter: (value, record) => record.name.indexOf(value) === 0,
+            onFilter: (value: any, record: any) => record.name.indexOf(value) === 0,
             sorter: (a, b) => a.name.length - b.name.length,
             sortDirections: ['descend'],
           },
@@ -1155,9 +1168,9 @@ describe('Table.filter', () => {
     );
 
     // Warning: An update to Item ran an effect, but was not wrapped in act(...).
-    fireEvent.click(container.querySelector('.ant-dropdown-trigger'));
-    fireEvent.click(container.querySelector('.ant-dropdown-menu-item'));
-    fireEvent.click(container.querySelector('.ant-table-filter-dropdown-btns .ant-btn-primary'));
+    fireEvent.click(container.querySelector('.ant-dropdown-trigger')!);
+    fireEvent.click(container.querySelector('.ant-dropdown-menu-item')!);
+    fireEvent.click(container.querySelector('.ant-table-filter-dropdown-btns .ant-btn-primary')!);
     expect(onChange).toHaveBeenCalled();
     onChange.mockReset();
     expect(onChange).not.toHaveBeenCalled();
@@ -1172,8 +1185,8 @@ describe('Table.filter', () => {
       />,
     );
 
-    fireEvent.click(container.querySelector('.ant-dropdown-menu-item'));
-    fireEvent.click(container.querySelector('.ant-table-filter-dropdown-btns .ant-btn-primary'));
+    fireEvent.click(container.querySelector('.ant-dropdown-menu-item')!);
+    fireEvent.click(container.querySelector('.ant-table-filter-dropdown-btns .ant-btn-primary')!);
     expect(onChange).toHaveBeenCalled();
   });
 
@@ -1214,23 +1227,13 @@ describe('Table.filter', () => {
 
   it('pass visible prop to filterDropdown', () => {
     const filterDropdownMock = jest.fn().mockReturnValue(<span>test</span>);
-    const filterDropdown = (...args) => filterDropdownMock(...args);
+    const filterDropdown = (...args: any[]) => filterDropdownMock(...args);
 
     const Test = () => (
       <Table
         rowKey="name"
-        columns={[
-          {
-            title: 'Name',
-            dataIndex: 'name',
-            filterDropdown,
-          },
-        ]}
-        dataSource={[
-          {
-            name: 'Jack',
-          },
-        ]}
+        columns={[{ title: 'Name', dataIndex: 'name', filterDropdown }]}
+        dataSource={[{ name: 'Jack' }]}
       />
     );
 
@@ -1244,35 +1247,25 @@ describe('Table.filter', () => {
 
   it('visible prop of filterDropdown changes on click', () => {
     const filterDropdownMock = jest.fn().mockReturnValue(<span>test</span>);
-    const filterDropdown = (...args) => filterDropdownMock(...args);
+    const filterDropdown = (...args: any[]) => filterDropdownMock(...args);
 
-    const Test = () => (
+    const Test: React.FC = () => (
       <Table
         rowKey="name"
-        columns={[
-          {
-            title: 'Name',
-            dataIndex: 'name',
-            filterDropdown,
-          },
-        ]}
-        dataSource={[
-          {
-            name: 'Jack',
-          },
-        ]}
+        columns={[{ title: 'Name', dataIndex: 'name', filterDropdown }]}
+        dataSource={[{ name: 'Jack' }]}
       />
     );
 
     const { container } = render(<Test />);
 
-    fireEvent.click(container.querySelector('.ant-dropdown-trigger'));
+    fireEvent.click(container.querySelector('.ant-dropdown-trigger')!);
     expect(filterDropdownMock).toHaveBeenCalledWith(
       expect.objectContaining({
         visible: true,
       }),
     );
-    fireEvent.click(container.querySelector('.ant-dropdown-trigger'));
+    fireEvent.click(container.querySelector('.ant-dropdown-trigger')!);
     expect(filterDropdownMock).toHaveBeenCalledWith(
       expect.objectContaining({
         visible: false,
@@ -1286,13 +1279,13 @@ describe('Table.filter', () => {
       createTable({
         onChange: handleChange,
         dataSource: longData,
-        pagination: true,
+        pagination: true as TableProps<any>['pagination'],
       }),
     );
     // Warning: An update to Item ran an effect, but was not wrapped in act(...).
-    fireEvent.click(container.querySelector('.ant-dropdown-trigger'));
-    fireEvent.click(container.querySelector('.ant-dropdown-menu-item'));
-    fireEvent.click(container.querySelector('.ant-table-filter-dropdown-btns .ant-btn-primary'));
+    fireEvent.click(container.querySelector('.ant-dropdown-trigger')!);
+    fireEvent.click(container.querySelector('.ant-dropdown-menu-item')!);
+    fireEvent.click(container.querySelector('.ant-table-filter-dropdown-btns .ant-btn-primary')!);
 
     expect(handleChange).toHaveBeenCalledWith(
       {
@@ -1321,11 +1314,11 @@ describe('Table.filter', () => {
       }),
     );
 
-    expect(container.querySelector('.ant-pagination-item-active').textContent).toBe('3');
+    expect(container.querySelector('.ant-pagination-item-active')?.textContent).toBe('3');
     // Warning: An update to Item ran an effect, but was not wrapped in act(...).
-    fireEvent.click(container.querySelector('.ant-dropdown-trigger'));
-    fireEvent.click(container.querySelector('.ant-dropdown-menu-item'));
-    fireEvent.click(container.querySelector('.ant-table-filter-dropdown-btns .ant-btn-primary'));
+    fireEvent.click(container.querySelector('.ant-dropdown-trigger')!);
+    fireEvent.click(container.querySelector('.ant-dropdown-menu-item')!);
+    fireEvent.click(container.querySelector('.ant-table-filter-dropdown-btns .ant-btn-primary')!);
 
     expect(handleChange).toHaveBeenCalledWith(
       {
@@ -1396,12 +1389,10 @@ describe('Table.filter', () => {
     );
 
     // Sort it
-    fireEvent.click(container.querySelector('.ant-table-column-sorters'), nativeEvent);
+    fireEvent.click(container.querySelector('.ant-table-column-sorters')!, nativeEvent);
     expect(onChange).toHaveBeenCalledWith(
       expect.anything(),
-      {
-        gender: null,
-      },
+      { gender: null },
       expect.objectContaining({
         column: {
           dataIndex: 'name',
@@ -1418,9 +1409,9 @@ describe('Table.filter', () => {
     // Filter it
     onChange.mockReset();
     // Warning: An update to Item ran an effect, but was not wrapped in act(...).
-    fireEvent.click(container.querySelector('.ant-dropdown-trigger'), nativeEvent);
-    fireEvent.click(container.querySelector('.ant-dropdown-menu-item'));
-    fireEvent.click(container.querySelector('.ant-table-filter-dropdown-btns .ant-btn-primary'));
+    fireEvent.click(container.querySelector('.ant-dropdown-trigger')!, nativeEvent);
+    fireEvent.click(container.querySelector('.ant-dropdown-menu-item')!);
+    fireEvent.click(container.querySelector('.ant-table-filter-dropdown-btns .ant-btn-primary')!);
 
     expect(onChange).toHaveBeenCalledWith(
       expect.anything(),
@@ -1457,15 +1448,15 @@ describe('Table.filter', () => {
     );
 
     expect(
-      container.querySelector('.ant-table-filter-dropdown-btns .ant-btn-primary').textContent,
+      container.querySelector('.ant-table-filter-dropdown-btns .ant-btn-primary')?.textContent,
     ).toEqual('Bamboo');
     expect(
-      container.querySelector('.ant-table-filter-dropdown-btns .ant-btn-link').textContent,
+      container.querySelector('.ant-table-filter-dropdown-btns .ant-btn-link')?.textContent,
     ).toEqual('Reset');
-    expect(container.querySelector('.ant-table-filter-dropdown-checkall').textContent).toEqual(
+    expect(container.querySelector('.ant-table-filter-dropdown-checkall')?.textContent).toEqual(
       'Select all items',
     );
-    expect(container.querySelector('.ant-input').getAttribute('placeholder')).toEqual(
+    expect(container.querySelector('.ant-input')?.getAttribute('placeholder')).toEqual(
       'Search in filters',
     );
   });
@@ -1483,7 +1474,7 @@ describe('Table.filter', () => {
     );
 
     expect(
-      container.querySelector('.ant-table-filter-trigger').className.includes('active'),
+      container.querySelector('.ant-table-filter-trigger')?.className.includes('active'),
     ).toBeTruthy();
   });
 
@@ -1500,7 +1491,7 @@ describe('Table.filter', () => {
     );
 
     expect(
-      container.querySelector('.ant-table-filter-trigger').className.includes('active'),
+      container.querySelector('.ant-table-filter-trigger')?.className.includes('active'),
     ).toBeFalsy();
   });
 
@@ -1524,14 +1515,14 @@ describe('Table.filter', () => {
             { text: 'Jack', value: 'Jack' },
             { text: 'Lucy', value: 'Lucy' },
           ]}
-          onFilter={(value, record) => record.name.includes(value)}
+          onFilter={(value, record: any) => record.name.includes(value)}
           defaultFilteredValue={['Jack']}
         />
       </Table>,
     );
 
     expect(container.querySelectorAll('tbody tr')).toHaveLength(1);
-    expect(container.querySelector('tbody tr td').textContent).toEqual('Jack');
+    expect(container.querySelector('tbody tr td')?.textContent).toEqual('Jack');
   });
 
   it(`shouldn't keep status when controlled filteredValue isn't change`, () => {
@@ -1546,39 +1537,29 @@ describe('Table.filter', () => {
       onFilter: filterFn,
     };
     const { container } = render(createTable({ columns: [filterControlledColumn] }));
-    fireEvent.click(container.querySelector('.ant-dropdown-trigger'));
-    fireEvent.click(container.querySelector('.ant-dropdown-menu-item'));
-    fireEvent.click(container.querySelector('.ant-table-filter-dropdown-btns .ant-btn-primary')); // close drodown
-    fireEvent.click(container.querySelector('.ant-dropdown-trigger')); // reopen
+    fireEvent.click(container.querySelector('.ant-dropdown-trigger')!);
+    fireEvent.click(container.querySelector('.ant-dropdown-menu-item')!);
+    fireEvent.click(container.querySelector('.ant-table-filter-dropdown-btns .ant-btn-primary')!); // close drodown
+    fireEvent.click(container.querySelector('.ant-dropdown-trigger')!); // reopen
     const checkbox = container
-      .querySelector('.ant-dropdown-menu-item')
-      .querySelector('input[type=checkbox]');
-    expect(checkbox.checked).toEqual(false);
+      ?.querySelector('.ant-dropdown-menu-item')
+      ?.querySelector<HTMLInputElement>('input[type=checkbox]');
+    expect(checkbox?.checked).toEqual(false);
   });
 
   it('should not trigger onChange when filters is empty', () => {
     const onChange = jest.fn();
-    const Test = ({ filters }) => (
+    const Test: React.FC<{ filters?: ColumnFilterItem[] }> = ({ filters }) => (
       <Table
         onChange={onChange}
         rowKey="name"
-        columns={[
-          {
-            title: 'Name',
-            dataIndex: 'name',
-            filters,
-          },
-        ]}
-        dataSource={[
-          {
-            name: 'Jack',
-          },
-        ]}
+        columns={[{ title: 'Name', dataIndex: 'name', filters }]}
+        dataSource={[{ name: 'Jack' }]}
       />
     );
     const { container, unmount } = render(<Test filters={[]} />);
-    fireEvent.click(container.querySelector('.ant-dropdown-trigger'));
-    fireEvent.click(container.querySelector('.ant-table-filter-dropdown-btns .ant-btn-primary'));
+    fireEvent.click(container.querySelector('.ant-dropdown-trigger')!);
+    fireEvent.click(container.querySelector('.ant-table-filter-dropdown-btns .ant-btn-primary')!);
     expect(onChange).not.toHaveBeenCalled();
     onChange.mockReset();
     unmount();
@@ -1590,19 +1571,19 @@ describe('Table.filter', () => {
         title: 'English Score',
         dataIndex: 'english',
         filters: [{ text: '1', value: 1 }],
-        onFilter: record => String(record.english1).includes(String(1)),
+        onFilter: (record: any) => String(record.english1).includes(String(1)),
         children: [
           {
             title: 'English Score1',
             dataIndex: 'english1',
             filters: [{ text: '2', value: 2 }],
-            onFilter: record => String(record.english2).includes(String(2)),
+            onFilter: (record: any) => String(record.english2).includes(String(2)),
           },
           {
             title: 'English Score2',
             dataIndex: 'english2',
             filters: [{ text: '2', value: 3 }],
-            onFilter: record => String(record.english2).includes(String(3)),
+            onFilter: (record: any) => String(record.english2).includes(String(3)),
           },
         ],
       },
@@ -1660,11 +1641,11 @@ describe('Table.filter', () => {
             value: 'Joe',
           },
         ],
-        onFilter: (value, record) => record.name.indexOf(value) === 0,
-        sorter: (a, b) => a.name.length - b.name.length,
+        onFilter: (value: any, record: any) => record.name.indexOf(value) === 0,
+        sorter: (a: any, b: any) => a.name.length - b.name.length,
         sortDirections: ['descend'],
       },
-    ];
+    ] as TableProps<any>['columns'];
     const dataSource = [
       {
         key: '1',
@@ -1683,15 +1664,15 @@ describe('Table.filter', () => {
     const { container } = render(
       <Table onChange={onChange} rowKey="name" columns={columns} dataSource={dataSource} />,
     );
-    fireEvent.click(container.querySelector('.ant-dropdown-trigger'));
-    fireEvent.click(container.querySelector('.ant-dropdown-menu-item'));
-    fireEvent.click(container.querySelector('.ant-table-filter-dropdown-btns .ant-btn-primary'));
+    fireEvent.click(container.querySelector('.ant-dropdown-trigger')!);
+    fireEvent.click(container.querySelector('.ant-dropdown-menu-item')!);
+    fireEvent.click(container.querySelector('.ant-table-filter-dropdown-btns .ant-btn-primary')!);
 
     expect(onChange.mock.calls[0][0].current).toBe(1);
 
-    fireEvent.click(container.querySelector('.ant-dropdown-trigger'));
-    fireEvent.click(container.querySelectorAll('.ant-dropdown-menu-item')[1]);
-    fireEvent.click(container.querySelector('.ant-table-filter-dropdown-btns .ant-btn-primary'));
+    fireEvent.click(container.querySelector('.ant-dropdown-trigger')!);
+    fireEvent.click(container.querySelectorAll('.ant-dropdown-menu-item')[1]!);
+    fireEvent.click(container.querySelector('.ant-table-filter-dropdown-btns .ant-btn-primary')!);
     expect(onChange.mock.calls[1][0].current).toBe(1);
   });
 
@@ -1705,7 +1686,7 @@ describe('Table.filter', () => {
             title: 'Name',
             dataIndex: 'name',
             key: 'name',
-            filteredValue: name,
+            filteredValue: name as unknown as FilterValue,
             filterDropdown: ({ confirm }) => (
               <>
                 <button id="confirm-and-close" type="button" onClick={() => confirm()}>
@@ -1726,13 +1707,13 @@ describe('Table.filter', () => {
       }),
     );
 
-    fireEvent.click(container.querySelector('.ant-dropdown-trigger'));
+    fireEvent.click(container.querySelector('.ant-dropdown-trigger')!);
     expect(onFilterDropdownOpenChange).toHaveBeenCalledTimes(1);
 
-    fireEvent.click(container.querySelector('#confirm-only'));
+    fireEvent.click(container.querySelector('#confirm-only')!);
     expect(onFilterDropdownOpenChange).toHaveBeenCalledTimes(1);
 
-    fireEvent.click(container.querySelector('#confirm-and-close'));
+    fireEvent.click(container.querySelector('#confirm-and-close')!);
     expect(onFilterDropdownOpenChange).toHaveBeenCalledTimes(2);
     expect(onFilterDropdownOpenChange).toHaveBeenLastCalledWith(false);
   });
@@ -1745,7 +1726,7 @@ describe('Table.filter', () => {
         sortedInfo: null,
       };
 
-      handleChange = (pagination, filters, sorter) => {
+      handleChange: TableProps<any>['onChange'] = (_, filters, sorter) => {
         this.setState({
           filteredInfo: filters,
           sortedInfo: sorter,
@@ -1753,9 +1734,7 @@ describe('Table.filter', () => {
       };
 
       render() {
-        let { sortedInfo, filteredInfo } = this.state;
-        sortedInfo = sortedInfo || {};
-        filteredInfo = filteredInfo || {};
+        const { sortedInfo = {}, filteredInfo = {} } = this.state;
         const columns = [
           {
             title: 'Name',
@@ -1765,8 +1744,8 @@ describe('Table.filter', () => {
               { text: 'Joe', value: 'Joe' },
               { text: 'Jim', value: 'Jim' },
             ],
-            filteredValue: filteredInfo.name || null,
-            onFilter: (value, record) => record.name.includes(value),
+            filteredValue: (filteredInfo as any)?.name || null,
+            onFilter: (value: any, record: any) => record.name.includes(value),
             children: [
               {
                 title: 'Age',
@@ -1779,8 +1758,8 @@ describe('Table.filter', () => {
             title: 'Age',
             dataIndex: 'age',
             key: 'age',
-            sorter: (a, b) => a.age - b.age,
-            sortOrder: sortedInfo.columnKey === 'age' && sortedInfo.order,
+            sorter: (a: any, b: any) => a.age - b.age,
+            sortOrder: (sortedInfo as any)?.columnKey === 'age' && (sortedInfo as any)?.order,
             ellipsis: true,
           },
         ];
@@ -1821,13 +1800,13 @@ describe('Table.filter', () => {
 
     const { container } = render(<App />);
 
-    expect(container.querySelector('.ant-table-tbody .ant-table-cell').textContent).toEqual(
+    expect(container.querySelector('.ant-table-tbody .ant-table-cell')?.textContent).toEqual(
       `${32}`,
     );
-    fireEvent.click(container.querySelector('.ant-dropdown-trigger.ant-table-filter-trigger'));
-    fireEvent.click(container.querySelector('.ant-dropdown-menu-item'));
-    fireEvent.click(container.querySelector('.ant-btn.ant-btn-primary.ant-btn-sm'));
-    expect(container.querySelector('.ant-table-tbody .ant-table-cell').textContent).toEqual(
+    fireEvent.click(container.querySelector('.ant-dropdown-trigger.ant-table-filter-trigger')!);
+    fireEvent.click(container.querySelector('.ant-dropdown-menu-item')!);
+    fireEvent.click(container.querySelector('.ant-btn.ant-btn-primary.ant-btn-sm')!);
+    expect(container.querySelector('.ant-table-tbody .ant-table-cell')?.textContent).toEqual(
       `${66}`,
     );
   });
@@ -1845,7 +1824,7 @@ describe('Table.filter', () => {
           ],
         }),
       );
-      fireEvent.click(container.querySelector('span.ant-dropdown-trigger'), nativeEvent);
+      fireEvent.click(container.querySelector('span.ant-dropdown-trigger')!, nativeEvent);
       act(() => {
         jest.runAllTimers();
       });
@@ -1866,34 +1845,29 @@ describe('Table.filter', () => {
           ],
         }),
       );
-      fireEvent.click(container.querySelector('span.ant-dropdown-trigger'), nativeEvent);
+      fireEvent.click(container.querySelector('span.ant-dropdown-trigger')!, nativeEvent);
       act(() => {
         jest.runAllTimers();
       });
       expect(container.querySelectorAll('.ant-table-filter-dropdown-tree').length).toBe(1);
       expect(container.querySelectorAll('.ant-input').length).toBe(1);
-      fireEvent.change(container.querySelector('.ant-input'), { target: { value: '111' } });
+      fireEvent.change(container.querySelector('.ant-input')!, { target: { value: '111' } });
     });
 
     it('supports search input in filter menu', () => {
       jest.spyOn(console, 'error').mockImplementation(() => undefined);
       const { container } = render(
         createTable({
-          columns: [
-            {
-              ...column,
-              filterSearch: true,
-            },
-          ],
+          columns: [{ ...column, filterSearch: true }],
         }),
       );
-      fireEvent.click(container.querySelector('span.ant-dropdown-trigger'), nativeEvent);
+      fireEvent.click(container.querySelector('span.ant-dropdown-trigger')!, nativeEvent);
       act(() => {
         jest.runAllTimers();
       });
       expect(container.querySelectorAll('.ant-table-filter-dropdown-search').length).toBe(1);
       expect(container.querySelectorAll('.ant-input').length).toBe(1);
-      fireEvent.change(container.querySelector('.ant-input'), { target: { value: '111' } });
+      fireEvent.change(container.querySelector('.ant-input')!, { target: { value: '111' } });
     });
 
     it('should skip search when filters[0].text is ReactNode', () => {
@@ -1923,14 +1897,14 @@ describe('Table.filter', () => {
         }),
       );
 
-      fireEvent.click(container.querySelector('span.ant-dropdown-trigger'), nativeEvent);
+      fireEvent.click(container.querySelector('span.ant-dropdown-trigger')!, nativeEvent);
       act(() => {
         jest.runAllTimers();
       });
       expect(container.querySelectorAll('.ant-table-filter-dropdown-search').length).toBe(1);
       expect(container.querySelectorAll('.ant-input').length).toBe(1);
       expect(container.querySelectorAll('li.ant-dropdown-menu-item').length).toBe(3);
-      fireEvent.change(container.querySelector('.ant-input'), { target: { value: '123' } });
+      fireEvent.change(container.querySelector('.ant-input')!, { target: { value: '123' } });
       expect(container.querySelectorAll('li.ant-dropdown-menu-item').length).toBe(2);
     });
 
@@ -1942,32 +1916,23 @@ describe('Table.filter', () => {
             {
               ...column,
               filters: [
-                {
-                  text: '123',
-                  value: '123',
-                },
-                {
-                  text: 123456,
-                  value: '456',
-                },
-                {
-                  text: <span>123</span>,
-                  value: '456',
-                },
+                { text: '123', value: '123' },
+                { text: 123456, value: '456' },
+                { text: <span>123</span>, value: '456' },
               ],
-              filterSearch: (input, record) => record.value.indexOf(input) > -1,
+              filterSearch: (input: any, record: any) => record.value.includes(input),
             },
           ],
         }),
       );
-      fireEvent.click(container.querySelector('span.ant-dropdown-trigger'), nativeEvent);
+      fireEvent.click(container.querySelector('span.ant-dropdown-trigger')!, nativeEvent);
       act(() => {
         jest.runAllTimers();
       });
       expect(container.querySelectorAll('.ant-table-filter-dropdown-search').length).toBe(1);
       expect(container.querySelectorAll('.ant-input').length).toBe(1);
       expect(container.querySelectorAll('li.ant-dropdown-menu-item').length).toBe(3);
-      fireEvent.change(container.querySelector('.ant-input'), { target: { value: '456' } });
+      fireEvent.change(container.querySelector('.ant-input')!, { target: { value: '456' } });
       expect(container.querySelectorAll('li.ant-dropdown-menu-item').length).toBe(2);
     });
 
@@ -1975,31 +1940,25 @@ describe('Table.filter', () => {
       jest.spyOn(console, 'error').mockImplementation(() => undefined);
       const { container } = render(
         createTable({
-          columns: [
-            {
-              ...column,
-              filterMode: 'tree',
-              filterSearch: true,
-            },
-          ],
+          columns: [{ ...column, filterMode: 'tree', filterSearch: true }],
         }),
       );
-      fireEvent.click(container.querySelector('span.ant-dropdown-trigger'), nativeEvent);
+      fireEvent.click(container.querySelector('span.ant-dropdown-trigger')!, nativeEvent);
       act(() => {
         jest.runAllTimers();
       });
       expect(container.querySelectorAll('.ant-table-filter-dropdown-checkall').length).toBe(1);
-      expect(container.querySelector('.ant-table-filter-dropdown-checkall').textContent).toBe(
+      expect(container.querySelector('.ant-table-filter-dropdown-checkall')?.textContent).toBe(
         'Select all items',
       );
       expect(container.querySelectorAll('.ant-tree-checkbox-checked').length).toBe(0);
 
       // fireEvent.change(container.querySelector('.ant-table-filter-dropdown-checkall input'), { target: { checked: true } });
       // 为什么 fireEvent.change 模拟 checkbox 触发会失败
-      fireEvent.click(container.querySelector('.ant-table-filter-dropdown-checkall'));
+      fireEvent.click(container.querySelector('.ant-table-filter-dropdown-checkall')!);
       expect(container.querySelectorAll('.ant-tree-checkbox-checked').length).toBe(5);
 
-      fireEvent.click(container.querySelector('.ant-table-filter-dropdown-checkall'));
+      fireEvent.click(container.querySelector('.ant-table-filter-dropdown-checkall')!);
       expect(container.querySelectorAll('.ant-tree-checkbox-checked').length).toBe(0);
     });
 
@@ -2016,25 +1975,25 @@ describe('Table.filter', () => {
           ],
         }),
       );
-      fireEvent.click(container.querySelector('span.ant-dropdown-trigger'), nativeEvent);
+      fireEvent.click(container.querySelector('span.ant-dropdown-trigger')!, nativeEvent);
       act(() => {
         jest.runAllTimers();
       });
       expect(container.querySelectorAll('.ant-table-filter-dropdown-checkall').length).toBe(1);
-      expect(container.querySelector('.ant-table-filter-dropdown-checkall').textContent).toBe(
+      expect(container.querySelector('.ant-table-filter-dropdown-checkall')?.textContent).toBe(
         'Select all items',
       );
-      fireEvent.click(container.querySelector('.ant-tree-node-content-wrapper'));
+      fireEvent.click(container.querySelector('.ant-tree-node-content-wrapper')!);
 
       expect(
         container
-          .querySelector('.ant-tree-checkbox')
-          .className.includes('ant-tree-checkbox-checked'),
+          ?.querySelector('.ant-tree-checkbox')
+          ?.className.includes('ant-tree-checkbox-checked'),
       ).toBe(true);
       expect(
         container
-          .querySelector('.ant-table-filter-dropdown-checkall .ant-checkbox')
-          .className.includes('ant-checkbox-indeterminate'),
+          ?.querySelector('.ant-table-filter-dropdown-checkall .ant-checkbox')
+          ?.className.includes('ant-checkbox-indeterminate'),
       ).toBe(true);
     });
 
@@ -2054,7 +2013,7 @@ describe('Table.filter', () => {
           ],
         }),
       );
-      fireEvent.click(container.querySelector('span.ant-dropdown-trigger'), nativeEvent);
+      fireEvent.click(container.querySelector('span.ant-dropdown-trigger')!, nativeEvent);
       act(() => {
         jest.runAllTimers();
       });
@@ -2063,8 +2022,8 @@ describe('Table.filter', () => {
 
       expect(
         container
-          .querySelector('.ant-table-filter-dropdown-checkall .ant-checkbox')
-          .className.includes('ant-checkbox-checked'),
+          ?.querySelector('.ant-table-filter-dropdown-checkall .ant-checkbox')
+          ?.className.includes('ant-checkbox-checked'),
       ).toBe(true);
     });
   });
@@ -2073,17 +2032,11 @@ describe('Table.filter', () => {
     jest.spyOn(console, 'error').mockImplementation(() => undefined);
     const { container } = render(
       createTable({
-        columns: [
-          {
-            ...column,
-            filterMode: 'tree',
-            filterMultiple: false,
-          },
-        ],
+        columns: [{ ...column, filterMode: 'tree', filterMultiple: false }],
       }),
     );
 
-    fireEvent.click(container.querySelector('span.ant-dropdown-trigger'), nativeEvent);
+    fireEvent.click(container.querySelector('span.ant-dropdown-trigger')!, nativeEvent);
     act(() => {
       jest.runAllTimers();
     });
@@ -2129,7 +2082,7 @@ describe('Table.filter', () => {
         ],
       }),
     );
-    fireEvent.click(container.querySelector('span.ant-dropdown-trigger'), nativeEvent);
+    fireEvent.click(container.querySelector('span.ant-dropdown-trigger')!, nativeEvent);
     act(() => {
       jest.runAllTimers();
     });
@@ -2186,7 +2139,7 @@ describe('Table.filter', () => {
         ],
       }),
     );
-    fireEvent.click(container.querySelector('span.ant-dropdown-trigger'), nativeEvent);
+    fireEvent.click(container.querySelector('span.ant-dropdown-trigger')!, nativeEvent);
     act(() => {
       jest.runAllTimers();
     });
@@ -2210,15 +2163,15 @@ describe('Table.filter', () => {
         .className.includes('ant-tree-checkbox-checked'),
     ).toBe(true);
 
-    fireEvent.click(container.querySelector('.ant-table-filter-dropdown-btns .ant-btn-primary'));
+    fireEvent.click(container.querySelector('.ant-table-filter-dropdown-btns .ant-btn-primary')!);
     expect(renderedNames(container)).toEqual(['Jack']);
 
     fireEvent.click(container.querySelectorAll('.ant-tree-checkbox')[2]);
-    fireEvent.click(container.querySelector('.ant-table-filter-dropdown-btns .ant-btn-primary'));
+    fireEvent.click(container.querySelector('.ant-table-filter-dropdown-btns .ant-btn-primary')!);
     expect(renderedNames(container)).toEqual(['Jack', 'Lucy', 'Tom', 'Jerry']);
 
     fireEvent.click(container.querySelectorAll('.ant-tree-node-content-wrapper')[2]);
-    fireEvent.click(container.querySelector('.ant-table-filter-dropdown-btns .ant-btn-primary'));
+    fireEvent.click(container.querySelector('.ant-table-filter-dropdown-btns .ant-btn-primary')!);
     expect(renderedNames(container)).toEqual(['Jack']);
   });
 
@@ -2237,7 +2190,13 @@ describe('Table.filter', () => {
     ];
 
     let renderSelectedKeys;
-    const filter = ({ prefixCls, setSelectedKeys, selectedKeys, confirm, clearFilters }) => {
+    const filter = ({
+      prefixCls,
+      setSelectedKeys,
+      selectedKeys,
+      confirm,
+      clearFilters,
+    }: FilterDropdownProps): React.ReactNode => {
       renderSelectedKeys = selectedKeys;
 
       return (
@@ -2246,14 +2205,14 @@ describe('Table.filter', () => {
             <>
               <span
                 onClick={() => {
-                  setSelectedKeys([text]);
+                  setSelectedKeys([text as React.Key]);
                   confirm();
                 }}
                 id={`set${id}`}
               >
                 setSelectedKeys
               </span>
-              <span onClick={() => clearFilters(param)} id={`reset${id}`}>
+              <span onClick={() => (clearFilters as any)?.(param)} id={`reset${id}`}>
                 Reset
               </span>
             </>
@@ -2274,16 +2233,16 @@ describe('Table.filter', () => {
     );
 
     // check if renderer well
-    fireEvent.click(container.querySelector('span.ant-dropdown-trigger'));
+    fireEvent.click(container.querySelector('span.ant-dropdown-trigger')!);
     expect(container.querySelector('#customFilter')).toMatchSnapshot();
     expect(renderSelectedKeys).toHaveLength(0);
 
     filterConfig.forEach(([text, id, , matchNames, visible]) => {
-      fireEvent.click(container.querySelector(`#set${id}`));
+      fireEvent.click(container.querySelector(`#set${id}`)!);
       expect(renderedNames(container)).toEqual([text]);
 
-      fireEvent.click(container.querySelector('span.ant-dropdown-trigger'));
-      fireEvent.click(container.querySelector(`#reset${id}`));
+      fireEvent.click(container.querySelector('span.ant-dropdown-trigger')!);
+      fireEvent.click(container.querySelector(`#reset${id}`)!);
       expect(renderedNames(container)).toEqual(matchNames);
 
       expect(container.querySelector('.ant-dropdown-open'))[visible ? 'toBeTruthy' : 'toBeFalsy']();
@@ -2293,7 +2252,7 @@ describe('Table.filter', () => {
   it('filterDropdown should support filterResetToDefaultFilteredValue', () => {
     jest.spyOn(console, 'error').mockImplementation(() => undefined);
 
-    const columnFilter = {
+    const columnFilter: ColumnGroupType<any> | ColumnType<any> = {
       ...column,
       filterMode: 'tree',
       filterSearch: true,
@@ -2305,15 +2264,15 @@ describe('Table.filter', () => {
         columns: [columnFilter],
       }),
     );
-    fireEvent.click(container.querySelector('span.ant-dropdown-trigger'), nativeEvent);
+    fireEvent.click(container.querySelector('span.ant-dropdown-trigger')!, nativeEvent);
     act(() => {
       jest.runAllTimers();
     });
     expect(container.querySelectorAll('.ant-tree-checkbox-checked').length).toBe(1);
 
-    fireEvent.click(container.querySelector('.ant-table-filter-dropdown-checkall'));
+    fireEvent.click(container.querySelector('.ant-table-filter-dropdown-checkall')!);
     expect(container.querySelectorAll('.ant-tree-checkbox-checked').length).toBe(5);
-    fireEvent.click(container.querySelector('button.ant-btn-link'), nativeEvent);
+    fireEvent.click(container.querySelector('button.ant-btn-link')!, nativeEvent);
     expect(container.querySelectorAll('.ant-tree-checkbox-checked').length).toBe(0);
 
     rerender(
@@ -2327,15 +2286,15 @@ describe('Table.filter', () => {
       }),
     );
 
-    fireEvent.click(container.querySelector('span.ant-dropdown-trigger'), nativeEvent);
+    fireEvent.click(container.querySelector('span.ant-dropdown-trigger')!, nativeEvent);
     act(() => {
       jest.runAllTimers();
     });
-    fireEvent.click(container.querySelector('.ant-table-filter-dropdown-checkall'));
+    fireEvent.click(container.querySelector('.ant-table-filter-dropdown-checkall')!);
     expect(container.querySelectorAll('.ant-tree-checkbox-checked').length).toBe(5);
-    fireEvent.click(container.querySelector('button.ant-btn-link'), nativeEvent);
+    fireEvent.click(container.querySelector('button.ant-btn-link')!, nativeEvent);
     expect(container.querySelectorAll('.ant-tree-checkbox-checked').length).toBe(1);
-    expect(container.querySelector('.ant-tree-checkbox-checked+span').textContent).toBe('Girl');
+    expect(container.querySelector('.ant-tree-checkbox-checked+span')?.textContent).toBe('Girl');
   });
 
   it('filterDropdown should not override customize Menu selectable', () => {
@@ -2365,13 +2324,13 @@ describe('Table.filter', () => {
     );
 
     // Open Filter
-    fireEvent.click(container.querySelector('span.ant-dropdown-trigger'));
+    fireEvent.click(container.querySelector('span.ant-dropdown-trigger')!);
     act(() => {
       jest.runAllTimers();
     });
 
     // Click Item
-    fireEvent.click(container.querySelector('.ant-table-filter-dropdown .ant-dropdown-menu-item'));
+    fireEvent.click(container.querySelector('.ant-table-filter-dropdown .ant-dropdown-menu-item')!);
 
     expect(onSelect).toHaveBeenCalled();
   });
@@ -2404,27 +2363,27 @@ describe('Table.filter', () => {
       createTable({
         columns,
         data: tableData,
-      }),
+      } as TableProps<any>),
     );
     expect(errorSpy).not.toHaveBeenCalled();
     errorSpy.mockReset();
-    columns[0].filteredValue = [];
+    (columns[0] as any).filteredValue = [];
     render(
       createTable({
         columns,
         data: tableData,
-      }),
+      } as TableProps<any>),
     );
     expect(errorSpy).toHaveBeenCalledWith(
       'Warning: [antd: Table] Columns should all contain `filteredValue` or not contain `filteredValue`.',
     );
     errorSpy.mockReset();
-    columns[1].filteredValue = [];
+    (columns[1] as any).filteredValue = [];
     render(
       createTable({
         columns,
         data: tableData,
-      }),
+      } as TableProps<any>),
     );
     expect(errorSpy).not.toHaveBeenCalled();
   });
@@ -2447,13 +2406,14 @@ describe('Table.filter', () => {
       }),
     );
     expect(container.querySelectorAll('tbody tr').length).toBe(1);
-    expect(container.querySelector('tbody tr').textContent).toBe('Jack');
+    expect(container.querySelector('tbody tr')?.textContent).toBe('Jack');
 
     // open filter
 
-    fireEvent.click(container.querySelector('span.ant-dropdown-trigger'));
+    fireEvent.click(container.querySelector('span.ant-dropdown-trigger')!);
     expect(
-      container.querySelector('.ant-table-filter-dropdown-btns .ant-btn-link').disabled,
+      container.querySelector<HTMLLinkElement>('.ant-table-filter-dropdown-btns .ant-btn-link')
+        ?.disabled,
     ).toBeTruthy();
     expect(container.querySelectorAll('li.ant-dropdown-menu-item')[0].textContent).toBe('Jack');
     expect(container.querySelectorAll('li.ant-dropdown-menu-item')[1].textContent).toBe('Lucy');
@@ -2461,22 +2421,26 @@ describe('Table.filter', () => {
     // deselect default
     fireEvent.click(container.querySelectorAll('li.ant-dropdown-menu-item')[0]);
     expect(
-      container.querySelector('.ant-table-filter-dropdown-btns .ant-btn-link').disabled,
+      container.querySelector<HTMLLinkElement>('.ant-table-filter-dropdown-btns .ant-btn-link')
+        ?.disabled,
     ).toBeFalsy();
     // select other one
     fireEvent.click(container.querySelectorAll('li.ant-dropdown-menu-item')[1]);
     expect(
-      container.querySelector('.ant-table-filter-dropdown-btns .ant-btn-link').disabled,
+      container.querySelector<HTMLLinkElement>('.ant-table-filter-dropdown-btns .ant-btn-link')
+        ?.disabled,
     ).toBeFalsy();
     // deselect other one
     fireEvent.click(container.querySelectorAll('li.ant-dropdown-menu-item')[1]);
     expect(
-      container.querySelector('.ant-table-filter-dropdown-btns .ant-btn-link').disabled,
+      container.querySelector<HTMLLinkElement>('.ant-table-filter-dropdown-btns .ant-btn-link')
+        ?.disabled,
     ).toBeFalsy();
     // select default
     fireEvent.click(container.querySelectorAll('li.ant-dropdown-menu-item')[0]);
     expect(
-      container.querySelector('.ant-table-filter-dropdown-btns .ant-btn-link').disabled,
+      container.querySelector<HTMLLinkElement>('.ant-table-filter-dropdown-btns .ant-btn-link')
+        ?.disabled,
     ).toBeTruthy();
   });
 });
diff --git a/components/table/__tests__/Table.order.test.js b/components/table/__tests__/Table.order.test.tsx
similarity index 95%
rename from components/table/__tests__/Table.order.test.js
rename to components/table/__tests__/Table.order.test.tsx
index db3ed54aa6..c01d19fb64 100644
--- a/components/table/__tests__/Table.order.test.js
+++ b/components/table/__tests__/Table.order.test.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import type { TableProps } from '..';
 import Table from '..';
 import { render } from '../../../tests/utils';
 import { resetWarned } from '../../_util/warning';
@@ -31,7 +32,7 @@ describe('Table.order', () => {
     { key: 3, name: 'Jerry' },
   ];
 
-  function createTable(props = {}) {
+  function createTable(props: TableProps<any> = {}) {
     return <Table columns={columns} dataSource={data} {...props} />;
   }
 
diff --git a/components/table/__tests__/Table.pagination.test.js b/components/table/__tests__/Table.pagination.test.tsx
similarity index 83%
rename from components/table/__tests__/Table.pagination.test.js
rename to components/table/__tests__/Table.pagination.test.tsx
index c1cff02e00..70a059d926 100644
--- a/components/table/__tests__/Table.pagination.test.js
+++ b/components/table/__tests__/Table.pagination.test.tsx
@@ -2,6 +2,7 @@
 jest.mock('../../_util/scrollTo');
 
 import React from 'react';
+import type { TablePaginationConfig, TableProps } from '..';
 import Table from '..';
 import { fireEvent, render, act } from '../../../tests/utils';
 import scrollTo from '../../_util/scrollTo';
@@ -22,26 +23,26 @@ describe('Table.pagination', () => {
     { key: 3, name: 'Jerry' },
   ];
 
-  const longData = [];
+  const longData: any[] = [];
   for (let i = 0; i < 100; i += 1) {
     longData.push({ key: i, name: `${i}` });
   }
 
   const pagination = { className: 'my-page', pageSize: 2 };
 
-  function createTable(props) {
+  function createTable(props?: TableProps<any>) {
     return <Table columns={columns} dataSource={data} pagination={pagination} {...props} />;
   }
 
-  function renderedNames(contain) {
+  function renderedNames(container: ReturnType<typeof render>['container']) {
     // --- reserve comment for code review ---
     // return wrapper.find('BodyRow').map(row => row.props().record.name);
-    const namesList = [];
-    contain
+    const namesList: (Node['textContent'] | undefined)[] = [];
+    container
       .querySelector('.ant-table-tbody')
-      .querySelectorAll('tr')
-      .forEach(tr => {
-        namesList.push(tr.querySelector('td').textContent);
+      ?.querySelectorAll('tr')
+      ?.forEach(tr => {
+        namesList.push(tr.querySelector('td')?.textContent);
       });
     return namesList;
   }
@@ -83,7 +84,7 @@ describe('Table.pagination', () => {
     const { container } = render(createTable());
 
     expect(renderedNames(container)).toEqual(['Jack', 'Lucy']);
-    fireEvent.click(container.querySelector('.ant-pagination-next'));
+    fireEvent.click(container.querySelector('.ant-pagination-next')!);
     expect(renderedNames(container)).toEqual(['Tom', 'Jerry']);
   });
 
@@ -97,7 +98,7 @@ describe('Table.pagination', () => {
   it('should not crash when trigger onChange in render', () => {
     function App() {
       const [page, setPage] = React.useState({ current: 1, pageSize: 10 });
-      const onChange = (current, pageSize) => {
+      const onChange: TablePaginationConfig['onChange'] = (current, pageSize) => {
         setPage({ current, pageSize });
       };
       return (
@@ -124,30 +125,32 @@ describe('Table.pagination', () => {
   });
 
   it('should scroll to first row when page change', () => {
-    scrollTo.mockReturnValue(null);
+    (scrollTo as any).mockReturnValue(null);
 
     const { container } = render(
       createTable({ scroll: { y: 20 }, pagination: { showSizeChanger: true, pageSize: 2 } }),
     );
     expect(scrollTo).toHaveBeenCalledTimes(0);
 
-    fireEvent.click(container.querySelector('.ant-pagination-next'));
+    fireEvent.click(container.querySelector('.ant-pagination-next')!);
     expect(scrollTo).toHaveBeenCalledTimes(1);
 
-    fireEvent.mouseDown(container.querySelector('.ant-select-selector'));
+    fireEvent.mouseDown(container.querySelector('.ant-select-selector')!);
     fireEvent.click(container.querySelectorAll('.ant-select-item')[1]);
     expect(scrollTo).toHaveBeenCalledTimes(2);
   });
 
   it('should scroll inside .ant-table-body', () => {
-    scrollTo.mockImplementationOnce((top, { getContainer }) => {
-      expect(top).toBe(0);
-      expect(getContainer().className).toBe('ant-table-body');
-    });
+    (scrollTo as any).mockImplementationOnce(
+      (top: number, { getContainer }: { getContainer: () => HTMLElement }) => {
+        expect(top).toBe(0);
+        expect(getContainer().className).toBe('ant-table-body');
+      },
+    );
     const { container } = render(
       createTable({ scroll: { y: 20 }, pagination: { showSizeChanger: true, pageSize: 2 } }),
     );
-    fireEvent.click(container.querySelector('.ant-pagination-next'));
+    fireEvent.click(container.querySelector('.ant-pagination-next')!);
   });
 
   it('fires change event', () => {
@@ -160,14 +163,10 @@ describe('Table.pagination', () => {
         onChange: handleChange,
       }),
     );
-    fireEvent.click(container.querySelector('.ant-pagination-next'));
+    fireEvent.click(container.querySelector('.ant-pagination-next')!);
 
     expect(handleChange).toHaveBeenCalledWith(
-      {
-        className: 'my-page',
-        current: 2,
-        pageSize: 2,
-      },
+      { className: 'my-page', current: 2, pageSize: 2 },
       {},
       {},
       {
@@ -208,7 +207,7 @@ describe('Table.pagination', () => {
     rerender(createTable({ pagination }));
     expect(container.querySelectorAll('.ant-pagination')).toHaveLength(1);
     expect(container.querySelectorAll('.ant-pagination-item')).toHaveLength(2);
-    fireEvent.click(container.querySelector('.ant-pagination-item-2'));
+    fireEvent.click(container.querySelector('.ant-pagination-item-2')!);
     expect(renderedNames(container)).toEqual(['Tom', 'Jerry']);
 
     rerender(createTable({ pagination: false }));
@@ -223,12 +222,12 @@ describe('Table.pagination', () => {
   // https://github.com/ant-design/ant-design/issues/5259
   it('change to correct page when data source changes', () => {
     const { container, rerender } = render(createTable({ pagination: { pageSize: 1 } }));
-    fireEvent.click(container.querySelector('.ant-pagination-item-3'));
+    fireEvent.click(container.querySelector('.ant-pagination-item-3')!);
     rerender(createTable({ dataSource: [data[0]] }));
     expect(
       container
         .querySelector('.ant-pagination-item-1')
-        .className.includes('ant-pagination-item-active'),
+        ?.className.includes('ant-pagination-item-active'),
     ).toBe(true);
   });
 
@@ -238,17 +237,11 @@ describe('Table.pagination', () => {
     const onShowSizeChange = jest.fn();
     const { container } = render(
       createTable({
-        pagination: {
-          current: 1,
-          pageSize: 10,
-          total: 200,
-          onChange,
-          onShowSizeChange,
-        },
+        pagination: { current: 1, pageSize: 10, total: 200, onChange, onShowSizeChange },
       }),
     );
 
-    fireEvent.mouseDown(container.querySelector('.ant-select-selector'));
+    fireEvent.mouseDown(container.querySelector('.ant-select-selector')!);
     expect(container.querySelectorAll('.ant-select-item-option').length).toBe(4);
     fireEvent.click(container.querySelectorAll('.ant-select-item-option')[1]);
     expect(onChange).toHaveBeenCalledWith(1, 20);
@@ -259,14 +252,14 @@ describe('Table.pagination', () => {
 
     expect(
       container
-        .querySelector('.ant-pagination-item-2')
-        .className.includes('ant-pagination-item-active'),
+        ?.querySelector('.ant-pagination-item-2')
+        ?.className.includes('ant-pagination-item-active'),
     ).toBe(true);
-    fireEvent.click(container.querySelector('.ant-pagination-item-3'));
+    fireEvent.click(container.querySelector('.ant-pagination-item-3')!);
     expect(
       container
-        .querySelector('.ant-pagination-item-2')
-        .className.includes('ant-pagination-item-active'),
+        ?.querySelector('.ant-pagination-item-2')
+        ?.className.includes('ant-pagination-item-active'),
     ).toBe(true);
   });
 
@@ -285,11 +278,11 @@ describe('Table.pagination', () => {
         dataSource: longData,
       }),
     );
-    fireEvent.mouseDown(container.querySelector('.ant-select-selector'));
+    fireEvent.mouseDown(container.querySelector('.ant-select-selector')!);
     expect(container.querySelectorAll('.ant-select-item-option').length).toBe(4);
     fireEvent.click(container.querySelectorAll('.ant-select-item-option')[1]);
     const newPageSize = parseInt(
-      container.querySelectorAll('.ant-select-item-option')[1].textContent,
+      container.querySelectorAll('.ant-select-item-option')?.[1]?.textContent!,
       10,
     );
     expect(onChange).toHaveBeenCalledWith(longData.length / newPageSize, 20);
@@ -312,11 +305,11 @@ describe('Table.pagination', () => {
       }),
     );
 
-    fireEvent.mouseDown(container.querySelector('.ant-select-selector'));
+    fireEvent.mouseDown(container.querySelector('.ant-select-selector')!);
     expect(container.querySelectorAll('.ant-select-item-option').length).toBe(4);
     fireEvent.click(container.querySelectorAll('.ant-select-item-option')[1]);
     const newPageSize = parseInt(
-      container.querySelectorAll('.ant-select-item-option')[1].textContent,
+      container.querySelectorAll('.ant-select-item-option')?.[1]?.textContent!,
       10,
     );
     expect(onChange).toHaveBeenCalledWith(total / newPageSize, 20);
@@ -337,7 +330,7 @@ describe('Table.pagination', () => {
         dataSource: longData,
       }),
     );
-    fireEvent.mouseDown(container.querySelector('.ant-select-selector'));
+    fireEvent.mouseDown(container.querySelector('.ant-select-selector')!);
     expect(container.querySelectorAll('.ant-select-item-option').length).toBe(4);
     fireEvent.click(container.querySelectorAll('.ant-select-item-option')[1]);
     expect(onChange).toHaveBeenCalledWith(4, 20);
@@ -355,58 +348,68 @@ describe('Table.pagination', () => {
         dataSource: longData,
       }),
     );
-    expect(container.querySelector('.ant-pagination-item-active').textContent).toBe('10');
+    expect(container.querySelector('.ant-pagination-item-active')?.textContent).toBe('10');
     rerender(
       createTable({
-        pagination: {
-          current: 10,
-          pageSize: 10,
-          onChange,
-        },
+        pagination: { current: 10, pageSize: 10, onChange },
         dataSource: longData.filter(item => item.key < 60),
       }),
     );
 
-    expect(container.querySelector('.ant-pagination-item-active').textContent).toBe('6');
+    expect(container.querySelector('.ant-pagination-item-active')?.textContent).toBe('6');
   });
 
   it('specify the position of pagination', () => {
     const { container, rerender } = render(createTable({ pagination: { position: ['topLeft'] } }));
-    expect(container.querySelector('.ant-spin-container').children).toHaveLength(2);
+    expect(container.querySelector('.ant-spin-container')?.children).toHaveLength(2);
     expect(
       container
-        .querySelector('.ant-spin-container')
-        .children[0].className.includes('ant-pagination'),
+        ?.querySelector('.ant-spin-container')
+        ?.children[0].className.includes('ant-pagination'),
     ).toBe(true);
 
     rerender(createTable({ pagination: { position: ['bottomRight'] } }));
-    expect(container.querySelector('.ant-spin-container').children).toHaveLength(2);
+    expect(container.querySelector('.ant-spin-container')?.children).toHaveLength(2);
     expect(
       container
-        .querySelector('.ant-spin-container')
-        .children[1].className.includes('ant-pagination'),
+        ?.querySelector('.ant-spin-container')
+        ?.children[1].className.includes('ant-pagination'),
     ).toBe(true);
 
     rerender(createTable({ pagination: { position: ['topLeft', 'bottomRight'] } }));
-    expect(container.querySelector('.ant-spin-container').children).toHaveLength(3);
+    expect(container.querySelector('.ant-spin-container')?.children).toHaveLength(3);
     expect(
       container
-        .querySelector('.ant-spin-container')
-        .children[0].className.includes('ant-pagination'),
+        ?.querySelector('.ant-spin-container')
+        ?.children[0].className.includes('ant-pagination'),
     ).toBe(true);
     expect(
       container
-        .querySelector('.ant-spin-container')
-        .children[2].className.includes('ant-pagination'),
+        ?.querySelector('.ant-spin-container')
+        ?.children[2].className.includes('ant-pagination'),
     ).toBe(true);
 
-    rerender(createTable({ pagination: { position: ['none', 'none'] } }));
+    rerender(
+      createTable({
+        pagination: { position: ['none', 'none'] as unknown as TablePaginationConfig['position'] },
+      }),
+    );
     expect(container.querySelectorAll('.ant-pagination')).toHaveLength(0);
 
-    rerender(createTable({ pagination: { position: ['invalid'] } }));
+    rerender(
+      createTable({
+        pagination: { position: ['invalid'] as unknown as TablePaginationConfig['position'] },
+      }),
+    );
     expect(container.querySelectorAll('.ant-pagination')).toHaveLength(1);
 
-    rerender(createTable({ pagination: { position: ['invalid', 'invalid'] } }));
+    rerender(
+      createTable({
+        pagination: {
+          position: ['invalid', 'invalid'] as unknown as TablePaginationConfig['position'],
+        },
+      }),
+    );
     expect(container.querySelectorAll('.ant-pagination')).toHaveLength(1);
   });
 
@@ -415,7 +418,7 @@ describe('Table.pagination', () => {
    * to `pagination`, since they misunderstand that `pagination` can accept a boolean value.
    */
   it('Accepts pagination as true', () => {
-    const { asFragment } = render(createTable({ pagination: true }));
+    const { asFragment } = render(createTable({ pagination: true } as TableProps<any>));
     expect(asFragment().firstChild).toMatchSnapshot();
   });
 
@@ -437,7 +440,7 @@ describe('Table.pagination', () => {
       data.length,
     );
 
-    fireEvent.click(container.querySelector('.ant-pagination .ant-pagination-item-2'));
+    fireEvent.click(container.querySelector('.ant-pagination .ant-pagination-item-2')!);
     expect(onChange.mock.calls[0][0].current).toBe(2);
     expect(onChange).toHaveBeenCalledWith(
       { current: 2, pageSize: 10, total: 200 },
@@ -475,7 +478,7 @@ describe('Table.pagination', () => {
       }),
     );
 
-    fireEvent.mouseDown(container.querySelector('.ant-select-selector'));
+    fireEvent.mouseDown(container.querySelector('.ant-select-selector')!);
     //  resolve Warning: An update to Align ran an effect, but was not wrapped in act(...)
     act(() => {
       jest.runAllTimers();
@@ -490,12 +493,12 @@ describe('Table.pagination', () => {
 
   it('should support current in pagination', () => {
     const { container } = render(createTable({ pagination: { current: 2, pageSize: 1 } }));
-    expect(container.querySelector('.ant-pagination-item-active').textContent).toBe('2');
+    expect(container.querySelector('.ant-pagination-item-active')?.textContent).toBe('2');
   });
 
   it('should support defaultCurrent in pagination', () => {
     const { container } = render(createTable({ pagination: { defaultCurrent: 2, pageSize: 1 } }));
-    expect(container.querySelector('.ant-pagination-item-active').textContent).toBe('2');
+    expect(container.querySelector('.ant-pagination-item-active')?.textContent).toBe('2');
   });
 
   it('should support defaultPageSize in pagination', () => {
@@ -507,23 +510,29 @@ describe('Table.pagination', () => {
   it('ajax should work with pagination', () => {
     const { container, rerender } = render(createTable({ pagination: { total: 100 } }));
 
-    fireEvent.click(container.querySelector('.ant-pagination-item-2'));
+    fireEvent.click(container.querySelector('.ant-pagination-item-2')!);
     rerender(createTable({ pagination: { current: 2, total: 100 } }));
 
     expect(
       container
-        .querySelector('.ant-pagination-item-2')
-        .className.includes('ant-pagination-item-active'),
+        ?.querySelector('.ant-pagination-item-2')
+        ?.className.includes('ant-pagination-item-active'),
     ).toBeTruthy();
   });
 
   it('pagination should ignore invalidate total', () => {
-    const { container } = render(createTable({ pagination: { total: null } }));
+    const { container } = render(
+      createTable({ pagination: { total: null } as unknown as TableProps<any>['pagination'] }),
+    );
     expect(container.querySelectorAll('.ant-pagination-item-1').length).toBeTruthy();
   });
 
   it('renders pagination topLeft and bottomRight', () => {
-    const { asFragment } = render(createTable({ pagination: ['topLeft', 'bottomRight'] }));
+    const { asFragment } = render(
+      createTable({
+        pagination: ['topLeft', 'bottomRight'] as unknown as TableProps<any>['pagination'],
+      }),
+    );
     expect(asFragment().firstChild).toMatchSnapshot();
   });
 
@@ -538,7 +547,7 @@ describe('Table.pagination', () => {
         onChange,
       }),
     );
-    fireEvent.mouseDown(container.querySelector('.ant-select-selector'));
+    fireEvent.mouseDown(container.querySelector('.ant-select-selector')!);
     fireEvent.click(container.querySelectorAll('.ant-select-item-option')[2]);
     expect(onChange).toHaveBeenCalledTimes(1);
   });
@@ -578,32 +587,30 @@ describe('Table.pagination', () => {
       position: ['topLeft', 'bottomLeft'],
     };
     const { container, rerender } = render(
-      createTable({
-        pagination: paginationProp,
-      }),
+      createTable({ pagination: paginationProp } as TableProps<any>),
     );
     rerender(
       createTable({
         dataSource: data.slice(total - 1),
         pagination: { ...paginationProp, total: total - 1 },
-      }),
+      } as TableProps<any>),
     );
 
     expect(container.querySelectorAll('.ant-pagination')).toHaveLength(2);
   });
 
   it('showTotal should hide when removed', () => {
-    const Demo = () => {
-      const [p, setP] = React.useState({
+    const dataProp = { data: [] } as any;
+    const Demo: React.FC = () => {
+      const [p, setP] = React.useState<TablePaginationConfig>({
         showTotal: t => `>${t}<`,
         total: 200,
         current: 1,
         pageSize: 10,
       });
-
       return (
         <Table
-          data={[]}
+          {...dataProp}
           columns={[]}
           pagination={p}
           onChange={pg => {
@@ -617,17 +624,18 @@ describe('Table.pagination', () => {
     };
 
     const { container } = render(<Demo />);
-    expect(container.querySelector('.ant-pagination-total-text').textContent).toEqual('>200<');
+    expect(container.querySelector('.ant-pagination-total-text')?.textContent).toEqual('>200<');
 
     // Should hide
-    fireEvent.click(container.querySelector('.ant-pagination-item-2'));
+    fireEvent.click(container.querySelector('.ant-pagination-item-2')!);
     expect(container.querySelectorAll('.ant-pagination-total-text')).toHaveLength(0);
   });
 
   it('should preserve table pagination className', () => {
+    const dataProp = { data: [] } as any;
     const { container } = render(
       <Table
-        data={[]}
+        {...dataProp}
         columns={[]}
         pagination={{
           className: 'pagination',
@@ -637,7 +645,7 @@ describe('Table.pagination', () => {
         }}
       />,
     );
-    expect(container.querySelector('.ant-pagination').className).toEqual(
+    expect(container.querySelector('.ant-pagination')?.className).toEqual(
       'ant-pagination ant-table-pagination ant-table-pagination-right pagination',
     );
   });
diff --git a/components/table/__tests__/Table.rowSelection.test.js b/components/table/__tests__/Table.rowSelection.test.tsx
similarity index 90%
rename from components/table/__tests__/Table.rowSelection.test.js
rename to components/table/__tests__/Table.rowSelection.test.tsx
index f1c547257f..578403fc01 100644
--- a/components/table/__tests__/Table.rowSelection.test.js
+++ b/components/table/__tests__/Table.rowSelection.test.tsx
@@ -1,8 +1,10 @@
 import React from 'react';
+import type { TableProps } from '..';
 import Table from '..';
 import { fireEvent, render, act } from '../../../tests/utils';
 import ConfigProvider from '../../config-provider';
 import { resetWarned } from '../../_util/warning';
+import type { TableRowSelection } from '../interface';
 
 describe('Table.rowSelection', () => {
   window.requestAnimationFrame = callback => window.setTimeout(callback, 16);
@@ -32,29 +34,29 @@ describe('Table.rowSelection', () => {
     { key: 3, name: 'Jerry' },
   ];
 
-  function createTable(props = {}) {
+  function createTable(props: TableProps<any> = {}) {
     return <Table columns={columns} dataSource={data} rowSelection={{}} {...props} />;
   }
 
-  function renderedNames(contain) {
-    const namesList = [];
-    contain
-      .querySelector('.ant-table-tbody')
-      .querySelectorAll('tr')
-      .forEach(tr => {
-        namesList.push(tr.querySelectorAll('td')[1].textContent);
+  function renderedNames(container: ReturnType<typeof render>['container']) {
+    const namesList: Node['textContent'][] = [];
+    container
+      ?.querySelector('.ant-table-tbody')
+      ?.querySelectorAll('tr')
+      ?.forEach(tr => {
+        namesList.push(tr?.querySelectorAll('td')?.[1]?.textContent);
       });
     return namesList;
   }
 
-  function getSelections(container) {
-    const keys = [];
+  function getSelections(container: ReturnType<typeof render>['container']) {
+    const keys: React.Key[] = [];
     container.querySelectorAll('.ant-table-tbody tr').forEach(row => {
       const key = row.getAttribute('data-row-key');
-      if (row.querySelector('input').checked) {
+      if (row.querySelector('input')?.checked) {
         if (isNaN(Number(key))) {
           // rowKey
-          keys.push(key);
+          keys.push(key!);
         } else {
           keys.push(Number(key));
         }
@@ -63,14 +65,14 @@ describe('Table.rowSelection', () => {
     return keys;
   }
 
-  function getIndeterminateSelection(container) {
-    const keys = [];
+  function getIndeterminateSelection(container: ReturnType<typeof render>['container']) {
+    const keys: React.Key[] = [];
     container.querySelectorAll('.ant-table-tbody tr').forEach(row => {
       const key = row.getAttribute('data-row-key');
       if (row.querySelector('.ant-checkbox-indeterminate')) {
         if (isNaN(Number(key))) {
           // rowKey
-          keys.push(key);
+          keys.push(key!);
         } else {
           keys.push(Number(key));
         }
@@ -122,7 +124,7 @@ describe('Table.rowSelection', () => {
 
   it('pass getCheckboxProps to checkbox', () => {
     const rowSelection = {
-      getCheckboxProps: record => ({
+      getCheckboxProps: (record: any) => ({
         disabled: record.name === 'Lucy',
         indeterminate: record.name === 'Tom',
         name: record.name,
@@ -130,7 +132,7 @@ describe('Table.rowSelection', () => {
     };
 
     const { container } = render(createTable({ rowSelection }));
-    const checkboxes = container.querySelectorAll('input[type="checkbox"]');
+    const checkboxes = container.querySelectorAll<HTMLInputElement>('input[type="checkbox"]');
 
     expect(checkboxes[1].disabled).toBe(false);
     expect(checkboxes[1].name).toEqual(data[0].name);
@@ -141,7 +143,7 @@ describe('Table.rowSelection', () => {
   });
 
   it("make getCheckboxProps's `indeterminate` override selectedRowKeys' effect", () => {
-    const rowSelection = {
+    const rowSelection: TableProps<any>['rowSelection'] = {
       getCheckboxProps: record => ({
         disabled: record.name === 'Lucy',
         indeterminate: record.name === 'Tom',
@@ -158,21 +160,21 @@ describe('Table.rowSelection', () => {
     const { container } = render(createTable({ pagination: { pageSize: 2 } }));
 
     const pagers = container.querySelectorAll('.ant-pagination-item');
-    const checkboxAll = container.querySelector('input[type="checkbox"]');
+    const checkboxAll = container.querySelector<HTMLInputElement>('input[type="checkbox"]');
 
-    const objectContaining = {};
-    fireEvent.click(checkboxAll);
-    objectContaining.checked = checkboxAll.checked; // true
+    const objectContaining: { checked?: boolean; indeterminate?: boolean } = {};
+    fireEvent.click(checkboxAll!);
+    objectContaining.checked = checkboxAll?.checked; // true
     objectContaining.indeterminate = getIndeterminateSelection(container).length > 0; // false
     expect.objectContaining(objectContaining);
 
     fireEvent.click(pagers[1]);
-    objectContaining.checked = checkboxAll.checked; // false
+    objectContaining.checked = checkboxAll?.checked; // false
     objectContaining.indeterminate = getIndeterminateSelection(container).length > 0; // false
     expect.objectContaining(objectContaining);
 
     fireEvent.click(pagers[0]);
-    objectContaining.checked = checkboxAll.checked; // true
+    objectContaining.checked = checkboxAll?.checked; // true
     objectContaining.indeterminate = getIndeterminateSelection(container).length > 0; // false
     expect.objectContaining(objectContaining);
   });
@@ -184,7 +186,7 @@ describe('Table.rowSelection', () => {
       getCheckboxProps: record => ({
         defaultChecked: record.key === 0,
       }),
-    };
+    } as TableRowSelection<any>;
 
     render(createTable({ rowSelection }));
 
@@ -204,7 +206,7 @@ describe('Table.rowSelection', () => {
   });
 
   it('fires change & select events', () => {
-    const order = [];
+    const order: string[] = [];
     const handleChange = jest.fn().mockImplementation(() => {
       order.push('onChange');
     });
@@ -231,7 +233,7 @@ describe('Table.rowSelection', () => {
   });
 
   it('fires selectMulti event', () => {
-    const order = [];
+    const order: string[] = [];
     const handleSelectMulti = jest.fn().mockImplementation(() => {
       order.push('onSelectMultiple');
     });
@@ -302,7 +304,7 @@ describe('Table.rowSelection', () => {
           selections: [Table.SELECTION_NONE],
           onChange: keys => onChange(keys),
         },
-      }),
+      } as TableProps<any>),
     );
 
     const last = () => {
@@ -324,14 +326,14 @@ describe('Table.rowSelection', () => {
       shiftKey: true,
     });
     expect(onChange).toHaveBeenLastCalledWith([3, 0, 1, 2]);
-    fireEvent.click(allElement());
+    fireEvent.click(allElement()!);
     expect(onChange).toHaveBeenLastCalledWith([]);
 
     // Reset last select key when select all
     fireEvent.click(last());
     expect(onChange).toHaveBeenLastCalledWith([3]);
-    fireEvent.click(allElement());
-    fireEvent.click(allElement());
+    fireEvent.click(allElement()!);
+    fireEvent.click(allElement()!);
     expect(onChange).toHaveBeenLastCalledWith([]);
     fireEvent.click(first(), {
       shiftKey: true,
@@ -349,11 +351,11 @@ describe('Table.rowSelection', () => {
     expect(onChange).toHaveBeenLastCalledWith([3, 0]);
 
     // Reset last select key when bulk operations
-    fireEvent.mouseEnter(container.querySelector('.ant-dropdown-trigger'));
+    fireEvent.mouseEnter(container.querySelector('.ant-dropdown-trigger')!);
     act(() => {
       jest.runAllTimers();
     });
-    fireEvent.click(baseElement.querySelector('li.ant-dropdown-menu-item'));
+    fireEvent.click(baseElement.querySelector('li.ant-dropdown-menu-item')!);
     expect(onChange).toHaveBeenLastCalledWith([]);
     fireEvent.click(first(), {
       shiftKey: true,
@@ -364,7 +366,7 @@ describe('Table.rowSelection', () => {
   });
 
   it('fires selectAll event', () => {
-    const order = [];
+    const order: string[] = [];
     const handleSelectAll = jest.fn().mockImplementation(() => {
       order.push('onSelectAll');
     });
@@ -379,12 +381,12 @@ describe('Table.rowSelection', () => {
 
     const checkAll = container.querySelector('input[type="checkbox"]');
 
-    fireEvent.click(checkAll);
+    fireEvent.click(checkAll!);
     expect(handleSelectAll).toHaveBeenCalledWith(true, data, data);
 
     expect(order).toEqual(['onSelectAll', 'onChange']);
 
-    fireEvent.click(checkAll);
+    fireEvent.click(checkAll!);
     expect(handleSelectAll).toHaveBeenCalledWith(false, [], data);
   });
 
@@ -398,7 +400,7 @@ describe('Table.rowSelection', () => {
     const { container } = render(createTable({ rowSelection }));
 
     // Open
-    fireEvent.mouseEnter(container.querySelector('.ant-dropdown-trigger'));
+    fireEvent.mouseEnter(container.querySelector('.ant-dropdown-trigger')!);
     act(() => {
       jest.runAllTimers();
     });
@@ -414,7 +416,7 @@ describe('Table.rowSelection', () => {
       selections: true,
     };
     const { container } = render(createTable({ rowSelection }));
-    fireEvent.mouseEnter(container.querySelector('.ant-dropdown-trigger'));
+    fireEvent.mouseEnter(container.querySelector('.ant-dropdown-trigger')!);
     act(() => {
       jest.runAllTimers();
     });
@@ -425,7 +427,7 @@ describe('Table.rowSelection', () => {
   it('fires selectInvert event', () => {
     jest.useFakeTimers();
 
-    const order = [];
+    const order: string[] = [];
     const handleSelectInvert = jest.fn().mockImplementation(() => {
       order.push('onSelectInvert');
     });
@@ -441,7 +443,7 @@ describe('Table.rowSelection', () => {
 
     fireEvent.click(container.querySelectorAll('.ant-checkbox')[1]);
     // Open
-    fireEvent.mouseEnter(container.querySelector('.ant-dropdown-trigger'));
+    fireEvent.mouseEnter(container.querySelector('.ant-dropdown-trigger')!);
 
     act(() => {
       jest.runAllTimers();
@@ -457,7 +459,7 @@ describe('Table.rowSelection', () => {
 
   it('fires selectNone event', () => {
     jest.useFakeTimers();
-    const order = [];
+    const order: string[] = [];
     const handleChange = jest.fn().mockImplementation(() => {
       order.push('onChange');
     });
@@ -473,7 +475,7 @@ describe('Table.rowSelection', () => {
 
     fireEvent.click(container.querySelectorAll('.ant-checkbox')[1]);
     // Open
-    fireEvent.mouseEnter(container.querySelector('.ant-dropdown-trigger'));
+    fireEvent.mouseEnter(container.querySelector('.ant-dropdown-trigger')!);
     act(() => {
       jest.runAllTimers();
     });
@@ -507,7 +509,7 @@ describe('Table.rowSelection', () => {
     const { container } = render(createTable({ rowSelection }));
 
     // Open
-    fireEvent.mouseEnter(container.querySelector('.ant-dropdown-trigger'));
+    fireEvent.mouseEnter(container.querySelector('.ant-dropdown-trigger')!);
     act(() => {
       jest.runAllTimers();
     });
@@ -530,7 +532,7 @@ describe('Table.rowSelection', () => {
       { key: 2, name: 'Tom' },
     ];
 
-    const getCheckboxProps = record => record;
+    const getCheckboxProps = (record: any) => record;
 
     it('SELECTION_ALL', () => {
       jest.useFakeTimers();
@@ -547,13 +549,13 @@ describe('Table.rowSelection', () => {
         }),
       );
 
-      fireEvent.mouseEnter(container.querySelector('.ant-dropdown-trigger'));
+      fireEvent.mouseEnter(container.querySelector('.ant-dropdown-trigger')!);
 
       act(() => {
         jest.runAllTimers();
       });
 
-      fireEvent.click(container.querySelector('li.ant-dropdown-menu-item'));
+      fireEvent.click(container.querySelector('li.ant-dropdown-menu-item')!);
       expect(onChange).toHaveBeenCalledWith([0, 2], expect.anything(), { type: 'all' });
     });
 
@@ -572,13 +574,13 @@ describe('Table.rowSelection', () => {
         }),
       );
 
-      fireEvent.mouseEnter(container.querySelector('.ant-dropdown-trigger'));
+      fireEvent.mouseEnter(container.querySelector('.ant-dropdown-trigger')!);
 
       act(() => {
         jest.runAllTimers();
       });
 
-      fireEvent.click(container.querySelector('li.ant-dropdown-menu-item'));
+      fireEvent.click(container.querySelector('li.ant-dropdown-menu-item')!);
 
       expect(onChange).toHaveBeenCalledWith([0], expect.anything(), { type: 'invert' });
     });
@@ -598,13 +600,13 @@ describe('Table.rowSelection', () => {
         }),
       );
 
-      fireEvent.mouseEnter(container.querySelector('.ant-dropdown-trigger'));
+      fireEvent.mouseEnter(container.querySelector('.ant-dropdown-trigger')!);
 
       act(() => {
         jest.runAllTimers();
       });
 
-      fireEvent.click(container.querySelector('li.ant-dropdown-menu-item'));
+      fireEvent.click(container.querySelector('li.ant-dropdown-menu-item')!);
 
       expect(onChange).toHaveBeenCalledWith([1], expect.anything(), { type: 'none' });
     });
@@ -639,7 +641,7 @@ describe('Table.rowSelection', () => {
     const { container } = render(createTable({ rowSelection }));
 
     // Open
-    fireEvent.mouseEnter(container.querySelector('.ant-dropdown-trigger'));
+    fireEvent.mouseEnter(container.querySelector('.ant-dropdown-trigger')!);
     act(() => {
       jest.runAllTimers();
     });
@@ -656,7 +658,7 @@ describe('Table.rowSelection', () => {
 
   // https://github.com/ant-design/ant-design/issues/4245
   it('handles disabled checkbox correctly when dataSource changes', () => {
-    const rowSelection = {
+    const rowSelection: TableProps<any>['rowSelection'] = {
       getCheckboxProps: record => ({ disabled: record.disabled }),
     };
     const { container, rerender } = render(createTable({ rowSelection }));
@@ -703,7 +705,7 @@ describe('Table.rowSelection', () => {
 
   // https://github.com/ant-design/ant-design/issues/4779
   it('should not switch pagination when select record', () => {
-    const newData = [];
+    const newData: Record<'key' | 'name', string>[] = [];
     for (let i = 0; i < 20; i += 1) {
       newData.push({
         key: i.toString(),
@@ -717,7 +719,7 @@ describe('Table.rowSelection', () => {
       }),
     );
     fireEvent.click(container.querySelectorAll('.ant-pagination-item')[1]); // switch to second page
-    fireEvent.click(container.querySelector('.ant-checkbox'));
+    fireEvent.click(container.querySelector('.ant-checkbox')!);
 
     expect(renderedNames(container)).toEqual([
       '10',
@@ -818,7 +820,7 @@ describe('Table.rowSelection', () => {
     const checkboxs = container.querySelectorAll('.ant-checkbox');
     expect(checkboxs.length).toBe(5);
     checkboxs.forEach(checkbox => {
-      expect(checkbox.querySelector('input').checked).toBe(true);
+      expect(checkbox.querySelector('input')?.checked).toBe(true);
       expect(checkbox.className.includes('ant-checkbox-indeterminate')).toBe(false);
     });
 
@@ -834,7 +836,7 @@ describe('Table.rowSelection', () => {
 
     expect(container.querySelectorAll('.ant-checkbox').length).toBe(4);
     container.querySelectorAll('.ant-checkbox').forEach(checkbox => {
-      expect(checkbox.querySelector('input').checked).toBe(true);
+      expect(checkbox.querySelector('input')?.checked).toBe(true);
       expect(checkbox.className.includes('ant-checkbox-indeterminate')).toBe(false);
     });
   });
@@ -842,15 +844,9 @@ describe('Table.rowSelection', () => {
   // https://github.com/ant-design/ant-design/issues/11042
   it('add columnTitle for rowSelection', () => {
     const { container, rerender } = render(
-      <Table
-        columns={columns}
-        dataSource={data}
-        rowSelection={{
-          columnTitle: '多选',
-        }}
-      />,
+      <Table columns={columns} dataSource={data} rowSelection={{ columnTitle: '多选' }} />,
     );
-    expect(container.querySelector('thead tr th').textContent).toBe('多选');
+    expect(container.querySelector('thead tr th')?.textContent).toBe('多选');
     rerender(
       <Table
         columns={columns}
@@ -861,7 +857,7 @@ describe('Table.rowSelection', () => {
         }}
       />,
     );
-    expect(container.querySelector('thead tr th').textContent).toBe('单选');
+    expect(container.querySelector('thead tr th')?.textContent).toBe('单选');
   });
 
   // https://github.com/ant-design/ant-design/issues/11384
@@ -881,7 +877,7 @@ describe('Table.rowSelection', () => {
           },
         ],
         filterDropdownOpen: true,
-        onFilter: (value, record) => record.name.indexOf(value) === 0,
+        onFilter: (value: any, record: any) => record.name.indexOf(value) === 0,
       },
     ];
 
@@ -894,7 +890,7 @@ describe('Table.rowSelection', () => {
       <Table columns={filterColumns} dataSource={data} rowSelection={rowSelection} />,
     );
 
-    function clickFilter(indexList) {
+    function clickFilter(indexList: number[]) {
       indexList.forEach(index => {
         // wrapper.find('.ant-dropdown-menu-item .ant-checkbox-wrapper').at(index).simulate('click');
         fireEvent.click(
@@ -902,7 +898,7 @@ describe('Table.rowSelection', () => {
         );
       });
       // wrapper.find('.ant-table-filter-dropdown-btns .ant-btn-primary').simulate('click');
-      fireEvent.click(container.querySelector('.ant-table-filter-dropdown-btns .ant-btn-primary'));
+      fireEvent.click(container.querySelector('.ant-table-filter-dropdown-btns .ant-btn-primary')!);
     }
 
     function clickItem() {
@@ -959,7 +955,7 @@ describe('Table.rowSelection', () => {
       <Table columns={columns} dataSource={newDatas} childrenColumnName="test" rowSelection={{}} />,
     );
     const checkboxes = container.querySelectorAll('input');
-    const objectContaining = {};
+    const objectContaining: { checked?: boolean; indeterminate?: boolean } = {};
     fireEvent.click(checkboxes[1]);
     objectContaining.checked = checkboxes[0].checked; // false
     objectContaining.indeterminate = getIndeterminateSelection(container).length > 0; // true
@@ -1033,7 +1029,7 @@ describe('Table.rowSelection', () => {
       <Table
         columns={columns}
         dataSource={dataSource}
-        rowSelection={null}
+        rowSelection={null as unknown as TableRowSelection<any>}
         expandedRowRender={() => null}
         rowKey="id"
       />,
@@ -1053,15 +1049,17 @@ describe('Table.rowSelection', () => {
     const { container } = render(
       createTable({
         rowSelection: {
-          getCheckboxProps: () => ({
-            disabled: true,
-          }),
+          getCheckboxProps: () => ({ disabled: true }),
         },
       }),
     );
 
-    expect(container.querySelector('thead .ant-checkbox-input').disabled).toBeTruthy();
-    expect(container.querySelector('thead .ant-checkbox-input').checked).toBeFalsy();
+    expect(
+      container.querySelector<HTMLInputElement>('thead .ant-checkbox-input')?.disabled,
+    ).toBeTruthy();
+    expect(
+      container.querySelector<HTMLInputElement>('thead .ant-checkbox-input')?.checked,
+    ).toBeFalsy();
   });
 
   it('should make select all checked when each item is checked and disabled', () => {
@@ -1076,8 +1074,12 @@ describe('Table.rowSelection', () => {
       }),
     );
 
-    expect(container.querySelector('thead .ant-checkbox-input').disabled).toBeTruthy();
-    expect(container.querySelector('thead .ant-checkbox-input').checked).toBeTruthy();
+    expect(
+      container.querySelector<HTMLInputElement>('thead .ant-checkbox-input')?.disabled,
+    ).toBeTruthy();
+    expect(
+      container.querySelector<HTMLInputElement>('thead .ant-checkbox-input')?.checked,
+    ).toBeTruthy();
   });
 
   it('should make select all indeterminated when each item is disabled and some item is checked', () => {
@@ -1092,8 +1094,12 @@ describe('Table.rowSelection', () => {
       }),
     );
 
-    expect(container.querySelector('thead .ant-checkbox-input').disabled).toBeTruthy();
-    expect(container.querySelector('thead .ant-checkbox-input').checked).toBeFalsy();
+    expect(
+      container.querySelector<HTMLInputElement>('thead .ant-checkbox-input')?.disabled,
+    ).toBeTruthy();
+    expect(
+      container.querySelector<HTMLInputElement>('thead .ant-checkbox-input')?.checked,
+    ).toBeFalsy();
     expect(
       container.querySelector('thead .ant-checkbox-indeterminate.ant-checkbox-disabled'),
     ).toBeTruthy();
@@ -1111,8 +1117,12 @@ describe('Table.rowSelection', () => {
       }),
     );
 
-    expect(container.querySelector('thead .ant-checkbox-input').disabled).toBeFalsy();
-    expect(container.querySelector('thead .ant-checkbox-input').checked).toBeTruthy();
+    expect(
+      container.querySelector<HTMLInputElement>('thead .ant-checkbox-input')?.disabled,
+    ).toBeFalsy();
+    expect(
+      container.querySelector<HTMLInputElement>('thead .ant-checkbox-input')?.checked,
+    ).toBeTruthy();
   });
 
   it('should not make select all checked when some item is checked and disabled', () => {
@@ -1127,8 +1137,12 @@ describe('Table.rowSelection', () => {
       }),
     );
 
-    expect(container.querySelector('thead .ant-checkbox-input').disabled).toBeFalsy();
-    expect(container.querySelector('thead .ant-checkbox-input').checked).toBeFalsy();
+    expect(
+      container.querySelector<HTMLInputElement>('thead .ant-checkbox-input')?.disabled,
+    ).toBeFalsy();
+    expect(
+      container.querySelector<HTMLInputElement>('thead .ant-checkbox-input')?.checked,
+    ).toBeFalsy();
     expect(container.querySelector('thead .ant-checkbox-indeterminate')).toBeTruthy();
   });
 
@@ -1160,7 +1174,7 @@ describe('Table.rowSelection', () => {
       }),
     );
     jest.useFakeTimers();
-    fireEvent.mouseEnter(container.querySelector('.ant-dropdown-trigger'));
+    fireEvent.mouseEnter(container.querySelector('.ant-dropdown-trigger')!);
     act(() => {
       jest.runAllTimers();
     });
@@ -1173,14 +1187,14 @@ describe('Table.rowSelection', () => {
       selections: true,
     };
     const { container } = render(
-      <ConfigProvider getPopupContainer={node => node.parentNode}>
+      <ConfigProvider getPopupContainer={node => node?.parentNode as HTMLElement}>
         {createTable({
           rowSelection,
         })}
       </ConfigProvider>,
     );
     jest.useFakeTimers();
-    fireEvent.mouseEnter(container.querySelector('.ant-dropdown-trigger'));
+    fireEvent.mouseEnter(container.querySelector('.ant-dropdown-trigger')!);
     act(() => {
       jest.runAllTimers();
     });
@@ -1542,12 +1556,12 @@ describe('Table.rowSelection', () => {
         />,
       );
 
-      fireEvent.click(container.querySelector('tbody input'));
+      fireEvent.click(container.querySelector('tbody input')!);
       expect(onChange).toHaveBeenCalledWith(['light'], [{ name: 'light' }], { type: 'single' });
       rerender(
         <Table dataSource={[{ name: 'bamboo' }]} rowSelection={{ onChange }} rowKey="name" />,
       );
-      fireEvent.click(container.querySelector('tbody input'));
+      fireEvent.click(container.querySelector('tbody input')!);
       expect(onChange).toHaveBeenCalledWith(['bamboo'], [{ name: 'bamboo' }], { type: 'single' });
     });
 
@@ -1561,7 +1575,7 @@ describe('Table.rowSelection', () => {
         />,
       );
 
-      fireEvent.click(container.querySelector('tbody input'));
+      fireEvent.click(container.querySelector('tbody input')!);
       expect(onChange).toHaveBeenCalledWith(['light'], [{ name: 'light' }], { type: 'single' });
 
       rerender(
@@ -1571,7 +1585,7 @@ describe('Table.rowSelection', () => {
           rowKey="name"
         />,
       );
-      fireEvent.click(container.querySelector('tbody input'));
+      fireEvent.click(container.querySelector('tbody input')!);
       expect(onChange).toHaveBeenCalledWith(
         ['light', 'bamboo'],
         [{ name: 'light' }, { name: 'bamboo' }],
@@ -1598,7 +1612,7 @@ describe('Table.rowSelection', () => {
         />,
       );
 
-      fireEvent.click(container.querySelector('tbody input'));
+      fireEvent.click(container.querySelector('tbody input')!);
       expect(onChange).toHaveBeenCalledWith(['Jack'], [{ name: 'Jack' }], { type: 'single' });
     });
 
@@ -1620,7 +1634,7 @@ describe('Table.rowSelection', () => {
         />,
       );
 
-      fireEvent.click(container.querySelector('tbody input'));
+      fireEvent.click(container.querySelector('tbody input')!);
       expect(onChange).toHaveBeenCalledWith(['Jack'], [{ name: 'Jack' }], { type: 'single' });
     });
 
@@ -1652,16 +1666,10 @@ describe('Table.rowSelection', () => {
           dataSource={dataSource.slice(2, 4)}
           rowSelection={rowSelection}
           rowKey="name"
-          columns={[
-            {
-              title: 'Name',
-              dataIndex: 'name',
-              key: 'name',
-            },
-          ]}
+          columns={[{ title: 'Name', dataIndex: 'name', key: 'name' }]}
         />,
       );
-      fireEvent.click(container.querySelector('tbody input'));
+      fireEvent.click(container.querySelector('tbody input')!);
       expect(onChange).toHaveBeenCalledWith(
         ['Jack', 'Lucy'],
         [{ name: 'Jack' }, { name: 'Lucy' }],
diff --git a/components/table/__tests__/Table.sorter.test.js b/components/table/__tests__/Table.sorter.test.tsx
similarity index 70%
rename from components/table/__tests__/Table.sorter.test.js
rename to components/table/__tests__/Table.sorter.test.tsx
index d819c4f9ed..2509419833 100644
--- a/components/table/__tests__/Table.sorter.test.js
+++ b/components/table/__tests__/Table.sorter.test.tsx
@@ -1,12 +1,15 @@
 /* eslint-disable react/no-multi-comp */
 import React from 'react';
+import type { ColumnType, TableProps } from '..';
 import Table from '..';
 import { act, fireEvent, render } from '../../../tests/utils';
+import type { ColumnsType, SortOrder } from '../interface';
 
 describe('Table.sorter', () => {
-  const sorterFn = (a, b) => a.name[0].charCodeAt() - b.name[0].charCodeAt();
+  const sorterFn: ColumnType<any>['sorter'] = (a, b) =>
+    a.name[0].charCodeAt() - b.name[0].charCodeAt();
 
-  const column = {
+  const column: ColumnType<any> = {
     title: 'Name',
     dataIndex: 'name',
     key: 'name',
@@ -20,15 +23,10 @@ describe('Table.sorter', () => {
     { key: 3, name: 'Jerry' },
   ];
 
-  function createTable(tableProps = {}, columnProps = {}) {
+  function createTable(tableProps: TableProps<any> = {}, columnProps = {}) {
     return (
       <Table
-        columns={[
-          {
-            ...column,
-            ...columnProps,
-          },
-        ]}
+        columns={[{ ...column, ...columnProps }]}
         dataSource={data}
         pagination={false}
         {...tableProps}
@@ -36,13 +34,13 @@ describe('Table.sorter', () => {
     );
   }
 
-  function renderedNames(contain) {
-    const namesList = [];
-    contain
-      .querySelector('.ant-table-tbody')
-      .querySelectorAll('tr')
-      .forEach(tr => {
-        namesList.push(tr.querySelector('td').textContent);
+  function renderedNames(container: ReturnType<typeof render>['container']) {
+    const namesList: (Node['textContent'] | undefined)[] = [];
+    container
+      ?.querySelector('.ant-table-tbody')
+      ?.querySelectorAll('tr')
+      ?.forEach(tr => {
+        namesList.push(tr.querySelector('td')?.textContent);
       });
     return namesList;
   }
@@ -53,55 +51,34 @@ describe('Table.sorter', () => {
   });
 
   it('default sort order ascend', () => {
-    const { container } = render(
-      createTable(
-        {},
-        {
-          defaultSortOrder: 'ascend',
-        },
-      ),
-    );
+    const { container } = render(createTable({}, { defaultSortOrder: 'ascend' }));
 
     expect(renderedNames(container)).toEqual(['Jack', 'Jerry', 'Lucy', 'Tom']);
   });
 
   it('default sort order descend', () => {
-    const { container } = render(
-      createTable(
-        {},
-        {
-          defaultSortOrder: 'descend',
-        },
-      ),
-    );
+    const { container } = render(createTable({}, { defaultSortOrder: 'descend' }));
 
     expect(renderedNames(container)).toEqual(['Tom', 'Lucy', 'Jack', 'Jerry']);
-    expect(container.querySelector('th').getAttribute('aria-sort')).toEqual('descending');
+    expect(container.querySelector('th')?.getAttribute('aria-sort')).toEqual('descending');
   });
 
   it('should change aria-sort when default sort order is set to descend', () => {
     const { container } = render(
-      createTable(
-        {
-          sortDirections: ['descend', 'ascend'],
-        },
-        {
-          defaultSortOrder: 'descend',
-        },
-      ),
+      createTable({ sortDirections: ['descend', 'ascend'] }, { defaultSortOrder: 'descend' }),
     );
 
     const getNameColumn = () => container.querySelector('th');
 
     // Test that it cycles through the order of sortDirections
     expect(renderedNames(container)).toEqual(['Tom', 'Lucy', 'Jack', 'Jerry']);
-    expect(getNameColumn().getAttribute('aria-sort')).toEqual('descending');
+    expect(getNameColumn()?.getAttribute('aria-sort')).toEqual('descending');
 
-    fireEvent.click(container.querySelector('.ant-table-column-sorters'));
-    expect(getNameColumn().getAttribute('aria-sort')).toEqual('ascending');
+    fireEvent.click(container.querySelector('.ant-table-column-sorters')!);
+    expect(getNameColumn()?.getAttribute('aria-sort')).toEqual('ascending');
 
-    fireEvent.click(container.querySelector('.ant-table-column-sorters'));
-    expect(getNameColumn().getAttribute('aria-sort')).toEqual(null);
+    fireEvent.click(container.querySelector('.ant-table-column-sorters')!);
+    expect(getNameColumn()?.getAttribute('aria-sort')).toEqual(null);
   });
 
   it('should have aria-lable if the column is sortable and is not sorted', () => {
@@ -119,16 +96,16 @@ describe('Table.sorter', () => {
     const getNameColumn = () => container.querySelector('th');
 
     expect(renderedNames(container)).toEqual(['Tom', 'Lucy', 'Jack', 'Jerry']);
-    expect(getNameColumn().getAttribute('aria-sort')).toEqual('descending');
-    expect(getNameColumn().getAttribute('aria-label')).toEqual(null);
+    expect(getNameColumn()?.getAttribute('aria-sort')).toEqual('descending');
+    expect(getNameColumn()?.getAttribute('aria-label')).toEqual(null);
 
-    fireEvent.click(container.querySelector('.ant-table-column-sorters'));
-    expect(getNameColumn().getAttribute('aria-sort')).toEqual('ascending');
-    expect(getNameColumn().getAttribute('aria-label')).toEqual(null);
+    fireEvent.click(container.querySelector('.ant-table-column-sorters')!);
+    expect(getNameColumn()?.getAttribute('aria-sort')).toEqual('ascending');
+    expect(getNameColumn()?.getAttribute('aria-label')).toEqual(null);
 
-    fireEvent.click(container.querySelector('.ant-table-column-sorters'));
-    expect(getNameColumn().getAttribute('aria-sort')).toEqual(null);
-    expect(getNameColumn().getAttribute('aria-label')).toEqual('Name sortable');
+    fireEvent.click(container.querySelector('.ant-table-column-sorters')!);
+    expect(getNameColumn()?.getAttribute('aria-sort')).toEqual(null);
+    expect(getNameColumn()?.getAttribute('aria-label')).toEqual('Name sortable');
   });
 
   it('sort records', () => {
@@ -137,28 +114,28 @@ describe('Table.sorter', () => {
 
     // first assert default state
     expect(renderedNames(container)).toEqual(['Jack', 'Lucy', 'Tom', 'Jerry']);
-    expect(getNameColumn().getAttribute('aria-sort')).toEqual(null);
+    expect(getNameColumn()?.getAttribute('aria-sort')).toEqual(null);
 
     // ascend
-    fireEvent.click(container.querySelector('.ant-table-column-sorters'));
+    fireEvent.click(container.querySelector('.ant-table-column-sorters')!);
     expect(renderedNames(container)).toEqual(['Jack', 'Jerry', 'Lucy', 'Tom']);
-    expect(getNameColumn().getAttribute('aria-sort')).toEqual('ascending');
+    expect(getNameColumn()?.getAttribute('aria-sort')).toEqual('ascending');
 
     // descend
-    fireEvent.click(container.querySelector('.ant-table-column-sorters'));
+    fireEvent.click(container.querySelector('.ant-table-column-sorters')!);
     expect(renderedNames(container)).toEqual(['Tom', 'Lucy', 'Jack', 'Jerry']);
-    expect(getNameColumn().getAttribute('aria-sort')).toEqual('descending');
+    expect(getNameColumn()?.getAttribute('aria-sort')).toEqual('descending');
   });
 
   it('sort records with keydown', () => {
     const { container } = render(createTable());
 
     // ascend
-    fireEvent.keyDown(container.querySelector('.ant-table-column-sorters'), { keyCode: 13 });
+    fireEvent.keyDown(container.querySelector('.ant-table-column-sorters')!, { keyCode: 13 });
     expect(renderedNames(container)).toEqual(['Jack', 'Jerry', 'Lucy', 'Tom']);
 
     // descend
-    fireEvent.keyDown(container.querySelector('.ant-table-column-sorters'), { keyCode: 13 });
+    fireEvent.keyDown(container.querySelector('.ant-table-column-sorters')!, { keyCode: 13 });
     expect(renderedNames(container)).toEqual(['Tom', 'Lucy', 'Jack', 'Jerry']);
   });
 
@@ -199,20 +176,20 @@ describe('Table.sorter', () => {
   });
 
   it('provides sortOrder in the sorterFn', () => {
-    let actualSortOrder;
+    let actualSortOrder: SortOrder;
     render(
       createTable(
         {},
         {
           sortOrder: 'ascend',
-          sorter: (a, b, sortOrder) => {
+          sorter: (a: any, b: any, sortOrder: SortOrder) => {
             actualSortOrder = sortOrder;
             return sorterFn(a, b);
           },
         },
       ),
     );
-    expect(actualSortOrder).toEqual('ascend');
+    expect(actualSortOrder!).toEqual('ascend');
   });
 
   it('can update column sortOrder', () => {
@@ -235,21 +212,21 @@ describe('Table.sorter', () => {
     const { container } = render(createTable({ onChange: handleChange }));
 
     // ascent
-    fireEvent.click(container.querySelector('.ant-table-column-sorters'));
+    fireEvent.click(container.querySelector('.ant-table-column-sorters')!);
     const sorter1 = handleChange.mock.calls[0][2];
     expect(sorter1.column.dataIndex).toBe('name');
     expect(sorter1.order).toBe('ascend');
     expect(sorter1.field).toBe('name');
     expect(sorter1.columnKey).toBe('name');
 
-    fireEvent.click(container.querySelector('.ant-table-column-sorters'));
+    fireEvent.click(container.querySelector('.ant-table-column-sorters')!);
     const sorter2 = handleChange.mock.calls[1][2];
     expect(sorter2.column.dataIndex).toBe('name');
     expect(sorter2.order).toBe('descend');
     expect(sorter2.field).toBe('name');
     expect(sorter2.columnKey).toBe('name');
 
-    fireEvent.click(container.querySelector('.ant-table-column-sorters'));
+    fireEvent.click(container.querySelector('.ant-table-column-sorters')!);
     const sorter3 = handleChange.mock.calls[2][2];
     expect(sorter3.column).toBe(undefined);
     expect(sorter3.order).toBe(undefined);
@@ -263,33 +240,33 @@ describe('Table.sorter', () => {
     const { container, rerender } = render(createTable());
 
     // default show sorter tooltip
-    fireEvent.mouseEnter(container.querySelector('.ant-table-column-sorters'));
+    fireEvent.mouseEnter(container.querySelector('.ant-table-column-sorters')!);
     act(() => {
       jest.runAllTimers();
     });
 
     expect(container.querySelector('.ant-tooltip-open')).toBeTruthy();
-    fireEvent.mouseOut(container.querySelector('.ant-table-column-sorters'));
+    fireEvent.mouseOut(container.querySelector('.ant-table-column-sorters')!);
 
     // set table props showSorterTooltip is false
     rerender(createTable({ showSorterTooltip: false }));
-    fireEvent.mouseEnter(container.querySelector('.ant-table-column-sorters'));
+    fireEvent.mouseEnter(container.querySelector('.ant-table-column-sorters')!);
     act(() => {
       jest.runAllTimers();
     });
     expect(container.querySelector('.ant-tooltip-open')).toBeFalsy();
-    fireEvent.mouseOut(container.querySelector('.ant-table-column-sorters'));
+    fireEvent.mouseOut(container.querySelector('.ant-table-column-sorters')!);
 
     // set table props showSorterTooltip is false, column showSorterTooltip is true
     rerender(
       createTable({ showSorterTooltip: true, columns: [{ ...column, showSorterTooltip: true }] }),
     );
-    fireEvent.mouseEnter(container.querySelector('.ant-table-column-sorters'));
+    fireEvent.mouseEnter(container.querySelector('.ant-table-column-sorters')!);
     act(() => {
       jest.runAllTimers();
     });
     expect(container.querySelector('.ant-tooltip-open')).toBeTruthy();
-    fireEvent.mouseOut(container.querySelector('.ant-table-column-sorters'));
+    fireEvent.mouseOut(container.querySelector('.ant-table-column-sorters')!);
 
     // set table props showSorterTooltip is true, column showSorterTooltip is false
     rerender(
@@ -298,12 +275,12 @@ describe('Table.sorter', () => {
         columns: [{ ...column, showSorterTooltip: false }],
       }),
     );
-    fireEvent.mouseEnter(container.querySelector('.ant-table-column-sorters'));
+    fireEvent.mouseEnter(container.querySelector('.ant-table-column-sorters')!);
     act(() => {
       jest.runAllTimers();
     });
     expect(container.querySelector('.ant-tooltip-open')).toBeFalsy();
-    fireEvent.mouseOut(container.querySelector('.ant-table-column-sorters'));
+    fireEvent.mouseOut(container.querySelector('.ant-table-column-sorters')!);
   });
 
   it('should show correct tooltip when showSorterTooltip is an object', () => {
@@ -313,12 +290,12 @@ describe('Table.sorter', () => {
       createTable({ showSorterTooltip: { placement: 'bottom', title: 'static title' } }),
     );
 
-    fireEvent.mouseEnter(container.querySelector('.ant-table-column-sorters'));
+    fireEvent.mouseEnter(container.querySelector('.ant-table-column-sorters')!);
     act(() => {
       jest.runAllTimers();
     });
     expect(container.querySelector('.ant-tooltip-open')).toBeTruthy();
-    fireEvent.mouseOut(container.querySelector('.ant-table-column-sorters'));
+    fireEvent.mouseOut(container.querySelector('.ant-table-column-sorters')!);
 
     // Root to false
     rerender(createTable({ showSorterTooltip: false }));
@@ -334,12 +311,12 @@ describe('Table.sorter', () => {
         columns: [{ ...column, showSorterTooltip: true }],
       }),
     );
-    fireEvent.mouseEnter(container.querySelector('.ant-table-column-sorters'));
+    fireEvent.mouseEnter(container.querySelector('.ant-table-column-sorters')!);
     act(() => {
       jest.runAllTimers();
     });
     expect(container.querySelector('.ant-tooltip-open')).toBeTruthy();
-    fireEvent.mouseOut(container.querySelector('.ant-table-column-sorters'));
+    fireEvent.mouseOut(container.querySelector('.ant-table-column-sorters')!);
 
     // Column to false
     rerender(
@@ -388,14 +365,10 @@ describe('Table.sorter', () => {
 
   // https://github.com/ant-design/ant-design/issues/11246#issuecomment-405009167
   it('Allow column title as render props with sortOrder argument', () => {
-    const title = ({ sortOrder }) => <div className="custom-title">{sortOrder}</div>;
-    const columns = [
-      {
-        title,
-        key: 'group',
-        sorter: true,
-      },
-    ];
+    const title = ({ sortOrder }: { sortOrder: SortOrder }) => (
+      <div className="custom-title">{sortOrder}</div>
+    );
+    const columns = [{ title, key: 'group', sorter: true }];
     const testData = [
       { key: 0, name: 'Jack', age: 11 },
       { key: 1, name: 'Lucy', age: 20 },
@@ -403,26 +376,18 @@ describe('Table.sorter', () => {
       { key: 3, name: 'Jerry', age: 22 },
     ];
     const { container } = render(<Table columns={columns} dataSource={testData} />);
-    expect(container.querySelector('.custom-title').textContent).toEqual('');
-    fireEvent.click(container.querySelector('.ant-table-column-sorters'));
-    expect(container.querySelector('.custom-title').textContent).toEqual('ascend');
-    fireEvent.click(container.querySelector('.ant-table-column-sorters'));
-    expect(container.querySelector('.custom-title').textContent).toEqual('descend');
+    expect(container.querySelector('.custom-title')?.textContent).toEqual('');
+    fireEvent.click(container.querySelector('.ant-table-column-sorters')!);
+    expect(container.querySelector('.custom-title')?.textContent).toEqual('ascend');
+    fireEvent.click(container.querySelector('.ant-table-column-sorters')!);
+    expect(container.querySelector('.custom-title')?.textContent).toEqual('descend');
   });
 
   // https://github.com/ant-design/ant-design/pull/12264#discussion_r218053034
   it('should sort from beginning state when toggle from different columns', () => {
     const columns = [
-      {
-        title: 'name',
-        dataIndex: 'name',
-        sorter: true,
-      },
-      {
-        title: 'age',
-        dataIndex: 'age',
-        sorter: true,
-      },
+      { title: 'name', dataIndex: 'name', sorter: true },
+      { title: 'age', dataIndex: 'age', sorter: true },
     ];
     const testData = [
       { key: 0, name: 'Jack', age: 11 },
@@ -432,23 +397,27 @@ describe('Table.sorter', () => {
     ];
     const { container } = render(<Table columns={columns} dataSource={testData} />);
 
-    const getNameColumn = () => container.querySelectorAll('.ant-table-column-has-sorters')[0];
-    const getAgeColumn = () => container.querySelectorAll('.ant-table-column-has-sorters')[1];
-    const getNameIcon = name => getNameColumn().querySelector(`.ant-table-column-sorter-${name}`);
-    const getAgeIcon = name => getAgeColumn().querySelector(`.ant-table-column-sorter-${name}`);
+    const getNameColumn = () =>
+      container.querySelectorAll<HTMLElement>('.ant-table-column-has-sorters')[0];
+    const getAgeColumn = () =>
+      container.querySelectorAll<HTMLElement>('.ant-table-column-has-sorters')[1];
+    const getNameIcon = (name: string) =>
+      getNameColumn()?.querySelector(`.ant-table-column-sorter-${name}`);
+    const getAgeIcon = (name: string) =>
+      getAgeColumn().querySelector(`.ant-table-column-sorter-${name}`);
 
     // sort name
-    fireEvent.click(getNameColumn());
-    expect(getNameIcon('up').className.includes('active')).toBeTruthy();
-    expect(getNameColumn().getAttribute('aria-sort')).toEqual('ascending');
-    expect(getAgeIcon('up').className.includes('active')).toBeFalsy();
+    fireEvent.click(getNameColumn()!);
+    expect(getNameIcon('up')?.className.includes('active')).toBeTruthy();
+    expect(getNameColumn()?.getAttribute('aria-sort')).toEqual('ascending');
+    expect(getAgeIcon('up')?.className.includes('active')).toBeFalsy();
     expect(getAgeColumn().getAttribute('aria-sort')).toEqual(null);
 
     // sort age
     fireEvent.click(getAgeColumn());
-    expect(getNameIcon('up').className.includes('active')).toBeFalsy();
-    expect(getNameColumn().getAttribute('aria-sort')).toEqual(null);
-    expect(getAgeIcon('up').className.includes('active')).toBeTruthy();
+    expect(getNameIcon('up')?.className.includes('active')).toBeFalsy();
+    expect(getNameColumn()?.getAttribute('aria-sort')).toEqual(null);
+    expect(getAgeIcon('up')?.className.includes('active')).toBeTruthy();
     expect(getAgeColumn().getAttribute('aria-sort')).toEqual('ascending');
   });
 
@@ -461,22 +430,14 @@ describe('Table.sorter', () => {
       { key: 3, name: 'Jerry', age: 22 },
     ];
     class TableTest extends React.Component {
-      state = {
-        pagination: {},
-      };
+      state = { pagination: {} };
 
-      onChange = pagination => {
+      onChange: TableProps<any>['onChange'] = pagination => {
         this.setState({ pagination });
       };
 
       render() {
-        const columns = [
-          {
-            title: 'name',
-            dataIndex: 'name',
-            sorter: true,
-          },
-        ];
+        const columns = [{ title: 'name', dataIndex: 'name', sorter: true }];
         const { pagination } = this.state;
         return (
           <Table
@@ -492,28 +453,29 @@ describe('Table.sorter', () => {
     const { container } = render(<TableTest />);
 
     const getNameColumn = () => container.querySelector('th');
-    const getIcon = name => getNameColumn().querySelector(`.ant-table-column-sorter-${name}`);
+    const getIcon = (name: string) =>
+      getNameColumn()?.querySelector(`.ant-table-column-sorter-${name}`);
 
-    expect(getIcon('up').className.includes('active')).toBeFalsy();
-    expect(getIcon('down').className.includes('active')).toBeFalsy();
+    expect(getIcon('up')?.className.includes('active')).toBeFalsy();
+    expect(getIcon('down')?.className.includes('active')).toBeFalsy();
 
     // sort name
-    fireEvent.click(getNameColumn());
-    expect(getIcon('up').className.includes('active')).toBeTruthy();
-    expect(getIcon('down').className.includes('active')).toBeFalsy();
-    expect(getNameColumn().getAttribute('aria-sort')).toEqual('ascending');
+    fireEvent.click(getNameColumn()!);
+    expect(getIcon('up')?.className.includes('active')).toBeTruthy();
+    expect(getIcon('down')?.className.includes('active')).toBeFalsy();
+    expect(getNameColumn()?.getAttribute('aria-sort')).toEqual('ascending');
 
     // sort name
-    fireEvent.click(getNameColumn());
-    expect(getIcon('up').className.includes('active')).toBeFalsy();
-    expect(getIcon('down').className.includes('active')).toBeTruthy();
-    expect(getNameColumn().getAttribute('aria-sort')).toEqual('descending');
+    fireEvent.click(getNameColumn()!);
+    expect(getIcon('up')?.className.includes('active')).toBeFalsy();
+    expect(getIcon('down')?.className.includes('active')).toBeTruthy();
+    expect(getNameColumn()?.getAttribute('aria-sort')).toEqual('descending');
 
     // sort name
-    fireEvent.click(getNameColumn());
-    expect(getIcon('up').className.includes('active')).toBeFalsy();
-    expect(getIcon('down').className.includes('active')).toBeFalsy();
-    expect(getNameColumn().getAttribute('aria-sort')).toEqual(null);
+    fireEvent.click(getNameColumn()!);
+    expect(getIcon('up')?.className.includes('active')).toBeFalsy();
+    expect(getIcon('down')?.className.includes('active')).toBeFalsy();
+    expect(getNameColumn()?.getAttribute('aria-sort')).toEqual(null);
   });
 
   // https://github.com/ant-design/ant-design/issues/12737
@@ -530,7 +492,7 @@ describe('Table.sorter', () => {
         pagination: {},
       };
 
-      onChange = pagination => {
+      onChange: TableProps<any>['onChange'] = pagination => {
         this.setState({ pagination });
       };
 
@@ -540,10 +502,10 @@ describe('Table.sorter', () => {
             title: 'name',
             dataIndex: 'name',
             sorter: true,
-            render: text => text,
+            render: (text: string) => text,
             array: ['1', '2', 3],
           },
-        ];
+        ] as unknown as TableProps<any>['columns'];
         const { pagination } = this.state;
         return (
           <Table
@@ -559,28 +521,29 @@ describe('Table.sorter', () => {
     const { container } = render(<TableTest />);
 
     const getNameColumn = () => container.querySelector('th');
-    const getIcon = name => getNameColumn().querySelector(`.ant-table-column-sorter-${name}`);
+    const getIcon = (name: string) =>
+      getNameColumn()?.querySelector(`.ant-table-column-sorter-${name}`);
 
-    expect(getIcon('up').className.includes('active')).toBeFalsy();
-    expect(getIcon('down').className.includes('active')).toBeFalsy();
+    expect(getIcon('up')?.className.includes('active')).toBeFalsy();
+    expect(getIcon('down')?.className.includes('active')).toBeFalsy();
 
     // sort name
-    fireEvent.click(getNameColumn());
-    expect(getIcon('up').className.includes('active')).toBeTruthy();
-    expect(getIcon('down').className.includes('active')).toBeFalsy();
-    expect(getNameColumn().getAttribute('aria-sort')).toEqual('ascending');
+    fireEvent.click(getNameColumn()!);
+    expect(getIcon('up')?.className.includes('active')).toBeTruthy();
+    expect(getIcon('down')?.className.includes('active')).toBeFalsy();
+    expect(getNameColumn()?.getAttribute('aria-sort')).toEqual('ascending');
 
     // sort name
-    fireEvent.click(getNameColumn());
-    expect(getIcon('up').className.includes('active')).toBeFalsy();
-    expect(getIcon('down').className.includes('active')).toBeTruthy();
-    expect(getNameColumn().getAttribute('aria-sort')).toEqual('descending');
+    fireEvent.click(getNameColumn()!);
+    expect(getIcon('up')?.className.includes('active')).toBeFalsy();
+    expect(getIcon('down')?.className.includes('active')).toBeTruthy();
+    expect(getNameColumn()?.getAttribute('aria-sort')).toEqual('descending');
 
     // sort name
-    fireEvent.click(getNameColumn());
-    expect(getIcon('up').className.includes('active')).toBeFalsy();
-    expect(getIcon('down').className.includes('active')).toBeFalsy();
-    expect(getNameColumn().getAttribute('aria-sort')).toEqual(null);
+    fireEvent.click(getNameColumn()!);
+    expect(getIcon('up')?.className.includes('active')).toBeFalsy();
+    expect(getIcon('down')?.className.includes('active')).toBeFalsy();
+    expect(getNameColumn()?.getAttribute('aria-sort')).toEqual(null);
   });
 
   // https://github.com/ant-design/ant-design/issues/12870
@@ -596,7 +559,7 @@ describe('Table.sorter', () => {
         pagination: {},
       };
 
-      onChange = pagination => {
+      onChange: TableProps<any>['onChange'] = pagination => {
         this.setState({ pagination });
       };
 
@@ -627,66 +590,62 @@ describe('Table.sorter', () => {
     const { container } = render(<TableTest />);
     const getNameColumn = () => container.querySelector('th');
     expect(
-      getNameColumn().querySelector('.ant-table-column-sorter-up').className.includes('active'),
+      getNameColumn()?.querySelector('.ant-table-column-sorter-up')?.className.includes('active'),
     ).toBeFalsy();
     expect(
-      getNameColumn().querySelector('.ant-table-column-sorter-down').className.includes('active'),
+      getNameColumn()?.querySelector('.ant-table-column-sorter-down')?.className.includes('active'),
     ).toBeFalsy();
-    expect(getNameColumn().getAttribute('aria-sort')).toEqual(null);
+    expect(getNameColumn()?.getAttribute('aria-sort')).toEqual(null);
 
     // sort name
-    fireEvent.click(getNameColumn());
+    fireEvent.click(getNameColumn()!);
     expect(
-      getNameColumn().querySelector('.ant-table-column-sorter-up').className.includes('active'),
+      getNameColumn()?.querySelector('.ant-table-column-sorter-up')?.className.includes('active'),
     ).toBeTruthy();
     expect(
-      getNameColumn().querySelector('.ant-table-column-sorter-down').className.includes('active'),
+      getNameColumn()?.querySelector('.ant-table-column-sorter-down')?.className.includes('active'),
     ).toBeFalsy();
-    expect(getNameColumn().getAttribute('aria-sort')).toEqual('ascending');
+    expect(getNameColumn()?.getAttribute('aria-sort')).toEqual('ascending');
 
     // sort name
-    fireEvent.click(getNameColumn());
+    fireEvent.click(getNameColumn()!);
     expect(
-      getNameColumn().querySelector('.ant-table-column-sorter-up').className.includes('active'),
+      getNameColumn()?.querySelector('.ant-table-column-sorter-up')?.className.includes('active'),
     ).toBeFalsy();
     expect(
-      getNameColumn().querySelector('.ant-table-column-sorter-down').className.includes('active'),
+      getNameColumn()?.querySelector('.ant-table-column-sorter-down')?.className.includes('active'),
     ).toBeTruthy();
-    expect(getNameColumn().getAttribute('aria-sort')).toEqual('descending');
+    expect(getNameColumn()?.getAttribute('aria-sort')).toEqual('descending');
 
     // sort name
-    fireEvent.click(getNameColumn());
+    fireEvent.click(getNameColumn()!);
     expect(
-      getNameColumn().querySelector('.ant-table-column-sorter-up').className.includes('active'),
+      getNameColumn()?.querySelector('.ant-table-column-sorter-up')?.className.includes('active'),
     ).toBeFalsy();
     expect(
-      getNameColumn().querySelector('.ant-table-column-sorter-down').className.includes('active'),
+      getNameColumn()?.querySelector('.ant-table-column-sorter-down')?.className.includes('active'),
     ).toBeFalsy();
-    expect(getNameColumn().getAttribute('aria-sort')).toEqual(null);
+    expect(getNameColumn()?.getAttribute('aria-sort')).toEqual(null);
   });
 
   it('should first sort by descend, then ascend, then cancel sort', () => {
-    const { container } = render(
-      createTable({
-        sortDirections: ['descend', 'ascend'],
-      }),
-    );
+    const { container } = render(createTable({ sortDirections: ['descend', 'ascend'] }));
     const getNameColumn = () => container.querySelector('th');
 
     // descend
-    fireEvent.click(getNameColumn());
+    fireEvent.click(getNameColumn()!);
     expect(renderedNames(container)).toEqual(['Tom', 'Lucy', 'Jack', 'Jerry']);
-    expect(getNameColumn().getAttribute('aria-sort')).toEqual('descending');
+    expect(getNameColumn()?.getAttribute('aria-sort')).toEqual('descending');
 
     // ascend
-    fireEvent.click(getNameColumn());
+    fireEvent.click(getNameColumn()!);
     expect(renderedNames(container)).toEqual(['Jack', 'Jerry', 'Lucy', 'Tom']);
-    expect(getNameColumn().getAttribute('aria-sort')).toEqual('ascending');
+    expect(getNameColumn()?.getAttribute('aria-sort')).toEqual('ascending');
 
     // cancel sort
-    fireEvent.click(getNameColumn());
+    fireEvent.click(getNameColumn()!);
     expect(renderedNames(container)).toEqual(['Jack', 'Lucy', 'Tom', 'Jerry']);
-    expect(getNameColumn().getAttribute('aria-sort')).toEqual(null);
+    expect(getNameColumn()?.getAttribute('aria-sort')).toEqual(null);
   });
 
   it('should first sort by descend, then cancel sort', () => {
@@ -699,17 +658,17 @@ describe('Table.sorter', () => {
     const getNameColumn = () => container.querySelector('th');
 
     // default
-    expect(getNameColumn().getAttribute('aria-sort')).toEqual(null);
+    expect(getNameColumn()?.getAttribute('aria-sort')).toEqual(null);
 
     // descend
-    fireEvent.click(getNameColumn());
+    fireEvent.click(getNameColumn()!);
     expect(renderedNames(container)).toEqual(['Tom', 'Lucy', 'Jack', 'Jerry']);
-    expect(getNameColumn().getAttribute('aria-sort')).toEqual('descending');
+    expect(getNameColumn()?.getAttribute('aria-sort')).toEqual('descending');
 
     // cancel sort
-    fireEvent.click(getNameColumn());
+    fireEvent.click(getNameColumn()!);
     expect(renderedNames(container)).toEqual(['Jack', 'Lucy', 'Tom', 'Jerry']);
-    expect(getNameColumn().getAttribute('aria-sort')).toEqual(null);
+    expect(getNameColumn()?.getAttribute('aria-sort')).toEqual(null);
   });
 
   it('should first sort by descend, then cancel sort. (column prop)', () => {
@@ -725,17 +684,17 @@ describe('Table.sorter', () => {
     const getNameColumn = () => container.querySelector('th');
 
     // default
-    expect(getNameColumn().getAttribute('aria-sort')).toEqual(null);
+    expect(getNameColumn()?.getAttribute('aria-sort')).toEqual(null);
 
     // descend
-    fireEvent.click(getNameColumn());
+    fireEvent.click(getNameColumn()!);
     expect(renderedNames(container)).toEqual(['Tom', 'Lucy', 'Jack', 'Jerry']);
-    expect(getNameColumn().getAttribute('aria-sort')).toEqual('descending');
+    expect(getNameColumn()?.getAttribute('aria-sort')).toEqual('descending');
 
     // cancel sort
-    fireEvent.click(getNameColumn());
+    fireEvent.click(getNameColumn()!);
     expect(renderedNames(container)).toEqual(['Jack', 'Lucy', 'Tom', 'Jerry']);
-    expect(getNameColumn().getAttribute('aria-sort')).toEqual(null);
+    expect(getNameColumn()?.getAttribute('aria-sort')).toEqual(null);
   });
 
   it('pagination back', () => {
@@ -755,12 +714,12 @@ describe('Table.sorter', () => {
 
     const getNameColumn = () => container.querySelector('th');
 
-    expect(getNameColumn().getAttribute('aria-sort')).toEqual(null);
+    expect(getNameColumn()?.getAttribute('aria-sort')).toEqual(null);
 
-    fireEvent.click(getNameColumn());
+    fireEvent.click(getNameColumn()!);
     expect(onChange.mock.calls[0][0].current).toBe(2);
     expect(onPageChange).not.toHaveBeenCalled();
-    expect(getNameColumn().getAttribute('aria-sort')).toEqual('ascending');
+    expect(getNameColumn()?.getAttribute('aria-sort')).toEqual('ascending');
   });
 
   it('should support onHeaderCell in sort column', () => {
@@ -768,7 +727,7 @@ describe('Table.sorter', () => {
     const { container } = render(
       <Table columns={[{ title: 'title', onHeaderCell: () => ({ onClick }), sorter: true }]} />,
     );
-    fireEvent.click(container.querySelector('th'));
+    fireEvent.click(container.querySelector('th')!);
     expect(onClick).toHaveBeenCalled();
   });
 
@@ -808,9 +767,7 @@ describe('Table.sorter', () => {
             },
           ],
         },
-        {
-          defaultSortOrder: 'ascend',
-        },
+        { defaultSortOrder: 'ascend' },
       ),
     );
 
@@ -861,7 +818,7 @@ describe('Table.sorter', () => {
             title: 'Age',
             dataIndex: 'age',
             key: 'age',
-            sorter: null,
+            sorter: null as unknown as ColumnType<any>['sorter'],
           },
           {
             title: 'Address',
@@ -884,7 +841,7 @@ describe('Table.sorter', () => {
           title="Chinese Score"
           dataIndex="chinese"
           sorter={{
-            compare: (a, b) => a.chinese - b.chinese,
+            compare: (a: any, b: any) => a.chinese - b.chinese,
             multiple: 3,
           }}
         />
@@ -892,14 +849,14 @@ describe('Table.sorter', () => {
           title="Math Score"
           dataIndex="math"
           sorter={{
-            compare: (a, b) => a.math - b.math,
+            compare: (a: any, b: any) => a.math - b.math,
             multiple: 2,
           }}
         />
       </Table>,
     );
 
-    fireEvent.click(container.querySelector('th'));
+    fireEvent.click(container.querySelector('th')!);
 
     expect(container.querySelectorAll('th.ant-table-column-sort')).toHaveLength(1);
   });
@@ -912,15 +869,15 @@ describe('Table.sorter', () => {
     );
 
     expect(
-      container.querySelector('.ant-table-column-sorter-up').className.includes('active'),
+      container.querySelector('.ant-table-column-sorter-up')?.className.includes('active'),
     ).toBeTruthy();
     expect(
-      container.querySelector('.ant-table-column-sorter-down').className.includes('active'),
+      container.querySelector('.ant-table-column-sorter-down')?.className.includes('active'),
     ).toBeFalsy();
   });
 
   it('controlled multiple group', () => {
-    const groupColumns = [
+    const groupColumns: ColumnsType = [
       {
         title: 'Math Score',
         dataIndex: 'math1',
@@ -950,20 +907,20 @@ describe('Table.sorter', () => {
         english: 70,
       },
     ];
-
-    const { container } = render(<Table columns={groupColumns} data={groupData} />);
+    const dataProp = { data: groupData };
+    const { container } = render(<Table columns={groupColumns} {...dataProp} />);
 
     expect(
       container
-        .querySelectorAll('.ant-table-column-sorter-full')[0]
-        .querySelector('.ant-table-column-sorter-up')
-        .className.includes('active'),
+        ?.querySelectorAll('.ant-table-column-sorter-full')?.[0]
+        ?.querySelector('.ant-table-column-sorter-up')
+        ?.className.includes('active'),
     ).toBeTruthy();
     expect(
       container
-        .querySelectorAll('.ant-table-column-sorter-full')[1]
-        .querySelector('.ant-table-column-sorter-down')
-        .className.includes('active'),
+        ?.querySelectorAll('.ant-table-column-sorter-full')?.[1]
+        ?.querySelector('.ant-table-column-sorter-down')
+        ?.className.includes('active'),
     ).toBeTruthy();
   });
 
@@ -992,11 +949,12 @@ describe('Table.sorter', () => {
     ];
 
     const onChange = jest.fn();
+    const dataProp = { data: groupData };
     const { container } = render(
-      <Table columns={groupColumns} data={groupData} onChange={onChange} />,
+      <Table columns={groupColumns} {...dataProp} onChange={onChange} />,
     );
 
-    function clickToMatchExpect(index, sorter) {
+    function clickToMatchExpect(index: number, sorter: { field: string; order: SortOrder }) {
       fireEvent.click(container.querySelectorAll('.ant-table-column-sorters')[index]);
 
       expect(onChange).toHaveBeenCalledWith(
@@ -1012,17 +970,17 @@ describe('Table.sorter', () => {
     // First
     clickToMatchExpect(0, { field: 'math', order: 'ascend' });
     clickToMatchExpect(0, { field: 'math', order: 'descend' });
-    clickToMatchExpect(0, { field: 'math', order: undefined });
+    clickToMatchExpect(0, { field: 'math', order: undefined as unknown as SortOrder });
 
     // Last
     clickToMatchExpect(1, { field: 'english', order: 'ascend' });
     clickToMatchExpect(1, { field: 'english', order: 'descend' });
-    clickToMatchExpect(1, { field: 'english', order: undefined });
+    clickToMatchExpect(1, { field: 'english', order: undefined as unknown as SortOrder });
   });
 
   // https://github.com/ant-design/ant-design/issues/37024
   it('multiple sort should pass array sorter as onChange param', () => {
-    const columns = [
+    const columns: TableProps<any>['columns'] = [
       {
         title: 'Name',
         dataIndex: 'name',
diff --git a/components/table/__tests__/Table.test.js b/components/table/__tests__/Table.test.tsx
similarity index 83%
rename from components/table/__tests__/Table.test.js
rename to components/table/__tests__/Table.test.tsx
index fb57f91665..1e6b6ff432 100644
--- a/components/table/__tests__/Table.test.js
+++ b/components/table/__tests__/Table.test.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import type { TableProps } from '..';
 import Table from '..';
 import mountTest from '../../../tests/shared/mountTest';
 import rtlTest from '../../../tests/shared/rtlTest';
@@ -65,7 +66,7 @@ describe('Table', () => {
       },
     ];
     rerender(<Table columns={newColumns} />);
-    expect(container.querySelector('th').textContent).toEqual('Title');
+    expect(container.querySelector('th')?.textContent).toEqual('Title');
   });
 
   it('loading with Spin', async () => {
@@ -75,7 +76,7 @@ describe('Table', () => {
     };
     const { container, rerender } = render(<Table loading={loading} />);
     expect(container.querySelectorAll('.ant-spin')).toHaveLength(0);
-    expect(container.querySelector('.ant-table-placeholder').textContent).not.toEqual('');
+    expect(container.querySelector('.ant-table-placeholder')?.textContent).not.toEqual('');
 
     loading.spinning = true;
     rerender(<Table loading={loading} />);
@@ -89,43 +90,25 @@ describe('Table', () => {
   it('support loading tip', async () => {
     const { container, rerender } = render(<Table loading={{ tip: 'loading...' }} />);
     await sleep(500);
-    rerender(<Table loading={{ tip: 'loading...', loading: true }} />);
-    expect(container.querySelectorAll('.ant-spin')).toHaveLength(1);
-  });
-
-  it('renders custom components correctly when it changes', () => {
-    const BodyWrapper1 = props => <tbody id="wrapper1" {...props} />;
-    const BodyWrapper2 = props => <tbody id="wrapper2" {...props} />;
-    const { container, rerender } = render(
-      <Table components={{ body: { wrapper: BodyWrapper1 } }} />,
+    rerender(
+      <Table loading={{ tip: 'loading...', loading: true } as TableProps<any>['loading']} />,
     );
-    rerender(<Table components={{ body: { wrapper: BodyWrapper2 } }} />);
-    expect(container.querySelector('tbody').id).toBe('wrapper2');
+    expect(container.querySelectorAll('.ant-spin')).toHaveLength(1);
   });
 
   it('props#columnsPageRange and props#columnsPageSize do not warn anymore', () => {
     const data = [
-      {
-        key: '1',
-        age: 32,
-      },
-      {
-        key: '2',
-        age: 42,
-      },
+      { key: '1', age: 32 },
+      { key: '2', age: 42 },
     ];
 
     const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
 
     const columnsPageRange = jest.fn();
     const columnsPageSize = jest.fn();
+    const props = { columnsPageRange, columnsPageSize };
     render(
-      <Table
-        dataSource={data}
-        rowkey="key"
-        columnsPageRange={columnsPageRange}
-        columnsPageSize={columnsPageSize}
-      >
+      <Table dataSource={data} rowKey="key" {...props}>
         <Column title="Age" dataIndex="age" key="age" />
       </Table>,
     );
@@ -143,7 +126,7 @@ describe('Table', () => {
     const { container } = render(
       <Table columns={[{ title: 'title', onHeaderCell: () => ({ onClick }) }]} />,
     );
-    fireEvent.click(container.querySelector('th'));
+    fireEvent.click(container.querySelector('th')!);
     expect(onClick).toHaveBeenCalled();
   });
 
@@ -169,7 +152,7 @@ describe('Table', () => {
             title: 'name',
           },
         ]}
-        dataSource={['1', 2, undefined, {}, null, true, false, 0]}
+        dataSource={['1', 2, undefined, {}, null, true, false, 0] as TableProps<any>['dataSource']}
       />,
     );
   });
@@ -188,7 +171,7 @@ describe('Table', () => {
         dataSource={[]}
       />,
     );
-    fireEvent.touchMove(container.querySelector('.ant-table'));
+    fireEvent.touchMove(container.querySelector('.ant-table')!);
     expect(touchmove).not.toHaveBeenCalled();
   });
 
@@ -230,11 +213,11 @@ describe('Table', () => {
     ];
 
     const { container } = render(<Table columns={columns} dataSource={data} />);
-    container.querySelectorAll('.ant-table-thead th').forEach(td => {
-      expect(td.attributes.title).toBeTruthy();
+    container.querySelectorAll<HTMLTableCellElement>('.ant-table-thead th').forEach(td => {
+      expect((td.attributes as any).title).toBeTruthy();
     });
     container.querySelectorAll('.ant-table-tbody td').forEach(td => {
-      expect(td.attributes.title).toBeFalsy();
+      expect((td.attributes as any).title).toBeFalsy();
     });
   });
 
@@ -274,8 +257,8 @@ describe('Table', () => {
         dataIndex: 'name',
       },
     ];
-    const Wrapper = () => {
-      const ref = React.useRef();
+    const Wrapper: React.FC = () => {
+      const ref = React.useRef<HTMLDivElement>(null);
       return <Table ref={ref} columns={columns} />;
     };
     render(<Wrapper />);
diff --git a/components/table/__tests__/__snapshots__/Table.expand.test.js.snap b/components/table/__tests__/__snapshots__/Table.expand.test.tsx.snap
similarity index 100%
rename from components/table/__tests__/__snapshots__/Table.expand.test.js.snap
rename to components/table/__tests__/__snapshots__/Table.expand.test.tsx.snap
diff --git a/components/table/__tests__/__snapshots__/Table.filter.test.js.snap b/components/table/__tests__/__snapshots__/Table.filter.test.tsx.snap
similarity index 100%
rename from components/table/__tests__/__snapshots__/Table.filter.test.js.snap
rename to components/table/__tests__/__snapshots__/Table.filter.test.tsx.snap
diff --git a/components/table/__tests__/__snapshots__/Table.pagination.test.js.snap b/components/table/__tests__/__snapshots__/Table.pagination.test.tsx.snap
similarity index 100%
rename from components/table/__tests__/__snapshots__/Table.pagination.test.js.snap
rename to components/table/__tests__/__snapshots__/Table.pagination.test.tsx.snap
diff --git a/components/table/__tests__/__snapshots__/Table.rowSelection.test.js.snap b/components/table/__tests__/__snapshots__/Table.rowSelection.test.tsx.snap
similarity index 100%
rename from components/table/__tests__/__snapshots__/Table.rowSelection.test.js.snap
rename to components/table/__tests__/__snapshots__/Table.rowSelection.test.tsx.snap
diff --git a/components/table/__tests__/__snapshots__/Table.sorter.test.js.snap b/components/table/__tests__/__snapshots__/Table.sorter.test.tsx.snap
similarity index 100%
rename from components/table/__tests__/__snapshots__/Table.sorter.test.js.snap
rename to components/table/__tests__/__snapshots__/Table.sorter.test.tsx.snap
diff --git a/components/table/__tests__/__snapshots__/Table.test.js.snap b/components/table/__tests__/__snapshots__/Table.test.tsx.snap
similarity index 100%
rename from components/table/__tests__/__snapshots__/Table.test.js.snap
rename to components/table/__tests__/__snapshots__/Table.test.tsx.snap
diff --git a/components/table/__tests__/__snapshots__/demo.test.js.snap b/components/table/__tests__/__snapshots__/demo.test.ts.snap
similarity index 100%
rename from components/table/__tests__/__snapshots__/demo.test.js.snap
rename to components/table/__tests__/__snapshots__/demo.test.ts.snap
diff --git a/components/table/__tests__/__snapshots__/empty.test.js.snap b/components/table/__tests__/__snapshots__/empty.test.tsx.snap
similarity index 100%
rename from components/table/__tests__/__snapshots__/empty.test.js.snap
rename to components/table/__tests__/__snapshots__/empty.test.tsx.snap
diff --git a/components/table/__tests__/demo.test.js b/components/table/__tests__/demo.test.ts
similarity index 100%
rename from components/table/__tests__/demo.test.js
rename to components/table/__tests__/demo.test.ts
diff --git a/components/table/__tests__/empty.test.js b/components/table/__tests__/empty.test.tsx
similarity index 92%
rename from components/table/__tests__/empty.test.js
rename to components/table/__tests__/empty.test.tsx
index 770d9fdd0c..19b227b43e 100644
--- a/components/table/__tests__/empty.test.js
+++ b/components/table/__tests__/empty.test.tsx
@@ -1,9 +1,10 @@
 import React from 'react';
 import { spyElementPrototypes } from 'rc-util/lib/test/domHook';
+import type { ColumnsType } from '..';
 import Table from '..';
 import { render, triggerResize, waitFor } from '../../../tests/utils';
 
-const columns = [
+const columns: ColumnsType<any> = [
   { title: 'Column 1', dataIndex: 'address', key: '1' },
   { title: 'Column 2', dataIndex: 'address', key: '2' },
   { title: 'Column 3', dataIndex: 'address', key: '3' },
@@ -14,7 +15,7 @@ const columns = [
   { title: 'Column 8', dataIndex: 'address', key: '8' },
 ];
 
-const columnsFixed = [
+const columnsFixed: ColumnsType<any> = [
   {
     title: 'Full Name',
     width: 100,
@@ -52,7 +53,7 @@ describe('Table', () => {
   });
 
   describe('renders empty table with fixed columns', () => {
-    let domSpy;
+    let domSpy: ReturnType<typeof spyElementPrototypes>;
 
     beforeAll(() => {
       domSpy = spyElementPrototypes(HTMLDivElement, {
@@ -70,7 +71,7 @@ describe('Table', () => {
         <Table dataSource={[]} columns={columnsFixed} pagination={false} scroll={{ x: 1 }} />,
       );
 
-      triggerResize(container.querySelector('.ant-table'));
+      triggerResize(container.querySelector('.ant-table')!);
 
       await waitFor(() => {
         expect(container.querySelector('.ant-empty')).toBeTruthy();
diff --git a/components/tabs/__tests__/__snapshots__/demo.test.js.snap b/components/tabs/__tests__/__snapshots__/demo.test.ts.snap
similarity index 100%
rename from components/tabs/__tests__/__snapshots__/demo.test.js.snap
rename to components/tabs/__tests__/__snapshots__/demo.test.ts.snap
diff --git a/components/tabs/__tests__/__snapshots__/index.test.js.snap b/components/tabs/__tests__/__snapshots__/index.test.tsx.snap
similarity index 100%
rename from components/tabs/__tests__/__snapshots__/index.test.js.snap
rename to components/tabs/__tests__/__snapshots__/index.test.tsx.snap
diff --git a/components/tabs/__tests__/demo.test.js b/components/tabs/__tests__/demo.test.ts
similarity index 100%
rename from components/tabs/__tests__/demo.test.js
rename to components/tabs/__tests__/demo.test.ts
diff --git a/components/tabs/__tests__/index.test.js b/components/tabs/__tests__/index.test.tsx
similarity index 92%
rename from components/tabs/__tests__/index.test.js
rename to components/tabs/__tests__/index.test.tsx
index 58beb9cd17..d6bc405551 100644
--- a/components/tabs/__tests__/index.test.js
+++ b/components/tabs/__tests__/index.test.tsx
@@ -20,8 +20,8 @@ describe('Tabs', () => {
   ));
 
   describe('editable-card', () => {
-    let handleEdit;
-    let wrapper;
+    let handleEdit: jest.Mock;
+    let wrapper: ReturnType<typeof render>['container'];
 
     beforeEach(() => {
       handleEdit = jest.fn();
@@ -39,12 +39,12 @@ describe('Tabs', () => {
     });
 
     it('add card', () => {
-      fireEvent.click(wrapper.querySelector('.ant-tabs-nav-add'));
+      fireEvent.click(wrapper.querySelector('.ant-tabs-nav-add')!);
       expect(handleEdit.mock.calls[0][1]).toBe('add');
     });
 
     it('remove card', () => {
-      fireEvent.click(wrapper.querySelector('.anticon-close'));
+      fireEvent.click(wrapper.querySelector('.anticon-close')!);
       expect(handleEdit).toHaveBeenCalledWith('1', 'remove');
     });
 
@@ -81,7 +81,8 @@ describe('Tabs', () => {
 
   it('warning for onNextClick', () => {
     const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
-    render(<Tabs onNextClick={() => {}} />);
+    const onNextClick = { onNextClick() {} } as any;
+    render(<Tabs {...onNextClick} />);
     expect(errorSpy).toHaveBeenCalledWith(
       'Warning: [antd: Tabs] `onPrevClick` and `onNextClick` has been removed. Please use `onTabScroll` instead.',
     );
diff --git a/components/tag/__tests__/__snapshots__/demo.test.js.snap b/components/tag/__tests__/__snapshots__/demo.test.ts.snap
similarity index 100%
rename from components/tag/__tests__/__snapshots__/demo.test.js.snap
rename to components/tag/__tests__/__snapshots__/demo.test.ts.snap
diff --git a/components/tag/__tests__/demo.test.js b/components/tag/__tests__/demo.test.ts
similarity index 100%
rename from components/tag/__tests__/demo.test.js
rename to components/tag/__tests__/demo.test.ts
diff --git a/components/timeline/__tests__/__snapshots__/demo.test.js.snap b/components/timeline/__tests__/__snapshots__/demo.test.ts.snap
similarity index 100%
rename from components/timeline/__tests__/__snapshots__/demo.test.js.snap
rename to components/timeline/__tests__/__snapshots__/demo.test.ts.snap
diff --git a/components/timeline/__tests__/__snapshots__/index.test.js.snap b/components/timeline/__tests__/__snapshots__/index.test.tsx.snap
similarity index 100%
rename from components/timeline/__tests__/__snapshots__/index.test.js.snap
rename to components/timeline/__tests__/__snapshots__/index.test.tsx.snap
diff --git a/components/timeline/__tests__/demo.test.js b/components/timeline/__tests__/demo.test.ts
similarity index 100%
rename from components/timeline/__tests__/demo.test.js
rename to components/timeline/__tests__/demo.test.ts
diff --git a/components/timeline/__tests__/index.test.js b/components/timeline/__tests__/index.test.tsx
similarity index 93%
rename from components/timeline/__tests__/index.test.js
rename to components/timeline/__tests__/index.test.tsx
index 719295b46a..b72d52c14d 100644
--- a/components/timeline/__tests__/index.test.js
+++ b/components/timeline/__tests__/index.test.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import type { TimelineProps } from '..';
 import TimeLine from '..';
 import mountTest from '../../../tests/shared/mountTest';
 import rtlTest from '../../../tests/shared/rtlTest';
@@ -6,9 +7,12 @@ import { render } from '../../../tests/utils';
 
 const { Item } = TimeLine;
 
-const renderFactory = (timeLineProps = {}, labelItems = null) =>
+const renderFactory = (
+  timeLineProps: TimelineProps = {},
+  labelItems: TimelineProps['children'] = null,
+) =>
   render(
-    <TimeLine type="editable-card" {...timeLineProps}>
+    <TimeLine {...timeLineProps}>
       <Item key="1">foo</Item>
       <Item key="2">bar</Item>
       <Item key="3">baz</Item>
@@ -89,7 +93,8 @@ describe('TimeLine', () => {
   });
 
   describe('the item rendering sequence is controlled by reverse', () => {
-    const getTextContents = nodeList => Array.from(nodeList).map(node => node.textContent);
+    const getTextContents = (nodeList: NodeListOf<HTMLDivElement>) =>
+      Array.from(nodeList).map(node => node?.textContent);
 
     it('items is in order when prop reverse is false', () => {
       const { container } = renderFactory({ reverse: false });
diff --git a/components/tooltip/__tests__/__snapshots__/demo.test.js.snap b/components/tooltip/__tests__/__snapshots__/demo.test.ts.snap
similarity index 100%
rename from components/tooltip/__tests__/__snapshots__/demo.test.js.snap
rename to components/tooltip/__tests__/__snapshots__/demo.test.ts.snap
diff --git a/components/tooltip/__tests__/__snapshots__/tooltip.test.js.snap b/components/tooltip/__tests__/__snapshots__/tooltip.test.tsx.snap
similarity index 100%
rename from components/tooltip/__tests__/__snapshots__/tooltip.test.js.snap
rename to components/tooltip/__tests__/__snapshots__/tooltip.test.tsx.snap
diff --git a/components/tooltip/__tests__/demo.test.js b/components/tooltip/__tests__/demo.test.ts
similarity index 100%
rename from components/tooltip/__tests__/demo.test.js
rename to components/tooltip/__tests__/demo.test.ts
diff --git a/components/tooltip/__tests__/tooltip.test.js b/components/tooltip/__tests__/tooltip.test.tsx
similarity index 83%
rename from components/tooltip/__tests__/tooltip.test.js
rename to components/tooltip/__tests__/tooltip.test.tsx
index d63630c92a..44a1d99049 100644
--- a/components/tooltip/__tests__/tooltip.test.js
+++ b/components/tooltip/__tests__/tooltip.test.tsx
@@ -1,5 +1,6 @@
 import { spyElementPrototype } from 'rc-util/lib/test/domHook';
 import React from 'react';
+import type { TooltipPlacement } from '..';
 import Tooltip from '..';
 import mountTest from '../../../tests/shared/mountTest';
 import rtlTest from '../../../tests/shared/rtlTest';
@@ -23,7 +24,7 @@ describe('Tooltip', () => {
 
   it('check `onOpenChange` arguments', () => {
     const onOpenChange = jest.fn();
-    const ref = React.createRef();
+    const ref = React.createRef<any>();
 
     const { container, rerender } = render(
       <Tooltip
@@ -39,12 +40,12 @@ describe('Tooltip', () => {
 
     // `title` is empty.
     const divElement = container.querySelector('#hello');
-    fireEvent.mouseEnter(divElement);
+    fireEvent.mouseEnter(divElement!);
     expect(onOpenChange).not.toHaveBeenCalled();
     expect(ref.current.props.visible).toBe(false);
     expect(container.querySelector('.ant-tooltip-open')).toBeNull();
 
-    fireEvent.mouseLeave(divElement);
+    fireEvent.mouseLeave(divElement!);
     expect(onOpenChange).not.toHaveBeenCalled();
     expect(ref.current.props.visible).toBe(false);
     expect(container.querySelector('.ant-tooltip-open')).toBeNull();
@@ -61,12 +62,12 @@ describe('Tooltip', () => {
         <div id="hello">Hello world!</div>
       </Tooltip>,
     );
-    fireEvent.mouseEnter(divElement);
+    fireEvent.mouseEnter(divElement!);
     expect(onOpenChange).toHaveBeenLastCalledWith(true);
     expect(ref.current.props.visible).toBe(true);
     expect(container.querySelector('.ant-tooltip-open')).not.toBeNull();
 
-    fireEvent.mouseLeave(divElement);
+    fireEvent.mouseLeave(divElement!);
     expect(onOpenChange).toHaveBeenLastCalledWith(false);
     expect(ref.current.props.visible).toBe(false);
     expect(container.querySelector('.ant-tooltip-open')).toBeNull();
@@ -84,14 +85,14 @@ describe('Tooltip', () => {
         <div id="hello">Hello world!</div>
       </Tooltip>,
     );
-    fireEvent.mouseEnter(divElement);
+    fireEvent.mouseEnter(divElement!);
     expect(onOpenChange).toHaveBeenLastCalledWith(true);
     const lastCount = onOpenChange.mock.calls.length;
     expect(ref.current.props.visible).toBe(false);
     expect(container.querySelector('.ant-tooltip-open')).toBeNull();
 
     // always trigger onOpenChange
-    fireEvent.mouseLeave(divElement);
+    fireEvent.mouseLeave(divElement!);
     expect(onOpenChange.mock.calls.length).toBe(lastCount); // no change with lastCount
     expect(ref.current.props.visible).toBe(false);
     expect(container.querySelector('.ant-tooltip-open')).toBeNull();
@@ -99,7 +100,7 @@ describe('Tooltip', () => {
 
   it('should hide when mouse leave native disabled button', () => {
     const onOpenChange = jest.fn();
-    const ref = React.createRef();
+    const ref = React.createRef<any>();
 
     const { container } = render(
       <Tooltip
@@ -120,20 +121,20 @@ describe('Tooltip', () => {
 
     fireEvent.mouseEnter(button);
     expect(onOpenChange).toHaveBeenCalledWith(true);
-    expect(ref.current.props.visible).toBe(true);
+    expect(ref.current?.props.visible).toBe(true);
     expect(container.querySelector('.ant-tooltip-open')).not.toBeNull();
 
     fireEvent.mouseLeave(button);
     expect(onOpenChange).toHaveBeenCalledWith(false);
-    expect(ref.current.props.visible).toBe(false);
+    expect(ref.current?.props.visible).toBe(false);
     expect(container.querySelector('.ant-tooltip-open')).toBeNull();
   });
 
   describe('should hide when mouse leave antd disabled component', () => {
-    function testComponent(name, Component) {
+    function testComponent(name: string, Component: typeof Button | typeof Switch) {
       it(name, () => {
         const onOpenChange = jest.fn();
-        const ref = React.createRef();
+        const ref = React.createRef<any>();
         const { container } = render(
           <Tooltip
             title="xxxxx"
@@ -203,7 +204,10 @@ describe('Tooltip', () => {
         </Tooltip>,
       );
       fireEvent.click(container.getElementsByTagName('button')[0]);
-      const popupLeftDefault = parseInt(container.querySelector('.default-element').style.left, 10);
+      const popupLeftDefault = parseInt(
+        container.querySelector<HTMLDivElement>('.default-element')?.style?.left!,
+        10,
+      );
 
       const { container: container2 } = render(
         <Tooltip
@@ -222,7 +226,7 @@ describe('Tooltip', () => {
       );
       fireEvent.click(container2.getElementsByTagName('button')[0]);
       const popupLeftArrowPointAtCenter = parseInt(
-        container.querySelector('.point-center-element').style.left,
+        container.querySelector<HTMLDivElement>('.point-center-element')?.style?.left!,
         10,
       );
 
@@ -231,12 +235,12 @@ describe('Tooltip', () => {
       );
     };
 
-    jest.dontMock('rc-trigger', suit);
+    (jest.dontMock as any)('rc-trigger', suit);
   });
 
   it('should works for date picker', async () => {
     const onOpenChange = jest.fn();
-    const ref = React.createRef();
+    const ref = React.createRef<any>();
 
     const { container } = render(
       <Tooltip title="date picker" onOpenChange={onOpenChange} ref={ref}>
@@ -250,19 +254,19 @@ describe('Tooltip', () => {
     fireEvent.mouseEnter(picker);
     await sleep(100);
     expect(onOpenChange).toHaveBeenCalledWith(true);
-    expect(ref.current.props.visible).toBe(true);
+    expect(ref.current?.props.visible).toBe(true);
     expect(container.querySelector('.ant-tooltip-open')).not.toBeNull();
 
     fireEvent.mouseLeave(picker);
     await sleep(100);
     expect(onOpenChange).toHaveBeenCalledWith(false);
-    expect(ref.current.props.visible).toBe(false);
+    expect(ref.current?.props.visible).toBe(false);
     expect(container.querySelector('.ant-tooltip-open')).toBeNull();
   });
 
   it('should works for input group', async () => {
     const onOpenChange = jest.fn();
-    const ref = React.createRef();
+    const ref = React.createRef<any>();
     const { container } = render(
       <Tooltip title="hello" onOpenChange={onOpenChange} ref={ref}>
         <Group>
@@ -294,7 +298,7 @@ describe('Tooltip', () => {
         <div />
       </Tooltip>,
     );
-    expect(container.querySelector('.ant-tooltip-inner').innerHTML).toBe('0');
+    expect(container.querySelector('.ant-tooltip-inner')?.innerHTML).toBe('0');
   });
 
   it('autoAdjustOverflow should be object or undefined', () => {
@@ -329,26 +333,18 @@ describe('Tooltip', () => {
       'leftBottom',
       'rightTop',
       'rightBottom',
-    ];
-    const testPlacement = (name, placement) => {
+    ] as const;
+    const testPlacement = (name: string, placement: TooltipPlacement) => {
       it(name, async () => {
         const { container } = render(
-          <Tooltip
-            title="xxxxx"
-            transitionName=""
-            popupTransitionName=""
-            mouseEnterDelay={0}
-            placement={placement}
-          >
+          <Tooltip title="xxxxx" transitionName="" mouseEnterDelay={0} placement={placement}>
             <span>Hello world!</span>
           </Tooltip>,
         );
-
         expect(container.getElementsByTagName('span')).toHaveLength(1);
         const element = container.getElementsByTagName('span')[0];
         fireEvent.mouseEnter(element);
         await sleep(500);
-
         await waitFor(() => {
           expect(document.querySelector(`.ant-tooltip-placement-${placement}`)).not.toBeNull();
         });
@@ -382,7 +378,7 @@ describe('Tooltip', () => {
         <div />
       </Tooltip>,
     );
-    expect(container.querySelector('.ant-tooltip-inner').style.color).toBe('red');
+    expect(container.querySelector<HTMLDivElement>('.ant-tooltip-inner')?.style?.color).toBe('red');
   });
 
   it('should work with loading switch', () => {
@@ -425,7 +421,7 @@ describe('Tooltip', () => {
 
   it('should work with Fragment children', () => {
     const onOpenChange = jest.fn();
-    const ref = React.createRef();
+    const ref = React.createRef<any>();
 
     const { container } = render(
       <Tooltip
@@ -443,14 +439,53 @@ describe('Tooltip', () => {
     );
 
     const divElement = container.querySelector('.hello');
-    fireEvent.mouseEnter(divElement);
+    fireEvent.mouseEnter(divElement!);
     expect(onOpenChange).toHaveBeenLastCalledWith(true);
     expect(ref.current.props.visible).toBe(true);
     expect(container.querySelector('.ant-tooltip-open')).not.toBeNull();
 
-    fireEvent.mouseLeave(divElement);
+    fireEvent.mouseLeave(divElement!);
     expect(onOpenChange).toHaveBeenLastCalledWith(false);
     expect(ref.current.props.visible).toBe(false);
     expect(container.querySelector('.ant-tooltip-open')).toBeNull();
   });
+
+  it('deprecated warning', () => {
+    const errSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+
+    const { rerender } = render(
+      <Tooltip visible>
+        <a />
+      </Tooltip>,
+    );
+    expect(errSpy).toHaveBeenCalledWith(
+      'Warning: [antd: Tooltip] `visible` is deprecated, please use `open` instead.',
+    );
+    rerender(
+      <Tooltip defaultVisible>
+        <a />
+      </Tooltip>,
+    );
+    expect(errSpy).toHaveBeenCalledWith(
+      'Warning: [antd: Tooltip] `defaultVisible` is deprecated, please use `defaultOpen` instead.',
+    );
+    rerender(
+      <Tooltip onVisibleChange={() => {}}>
+        <a />
+      </Tooltip>,
+    );
+    expect(errSpy).toHaveBeenCalledWith(
+      'Warning: [antd: Tooltip] `onVisibleChange` is deprecated, please use `onOpenChange` instead.',
+    );
+    rerender(
+      <Tooltip afterVisibleChange={() => {}}>
+        <a />
+      </Tooltip>,
+    );
+    expect(errSpy).toHaveBeenCalledWith(
+      'Warning: [antd: Tooltip] `afterVisibleChange` is deprecated, please use `afterOpenChange` instead.',
+    );
+
+    errSpy.mockRestore();
+  });
 });
diff --git a/components/tooltip/index.en-US.md b/components/tooltip/index.en-US.md
index c5bfe29739..4bf7f598fe 100644
--- a/components/tooltip/index.en-US.md
+++ b/components/tooltip/index.en-US.md
@@ -28,7 +28,7 @@ The following APIs are shared by Tooltip, Popconfirm, Popover.
 | arrowPointAtCenter | Whether the arrow is pointed at the center of target | boolean | false |  |
 | autoAdjustOverflow | Whether to adjust popup placement automatically when popup is off screen | boolean | true |  |
 | color | The background color | string | - | 4.3.0 |
-| defaultOpen | Whether the floating tooltip card is open by default | boolean | false |  |
+| defaultOpen | Whether the floating tooltip card is open by default | boolean | false | 4.23.0 |
 | destroyTooltipOnHide | Whether destroy tooltip when hidden, parent container of tooltip will be destroyed when `keepParent` is false | boolean \| { keepParent?: boolean } | false |  |
 | getPopupContainer | The DOM container of the tip, the default behavior is to create a `div` element in `body` | function(triggerNode) | () => document.body |  |
 | mouseEnterDelay | Delay in seconds, before tooltip is shown on mouse enter | number | 0.1 |  |
@@ -38,9 +38,9 @@ The following APIs are shared by Tooltip, Popconfirm, Popover.
 | overlayInnerStyle | Style of the tooltip inner content | object | - |  |
 | placement | The position of the tooltip relative to the target, which can be one of `top` `left` `right` `bottom` `topLeft` `topRight` `bottomLeft` `bottomRight` `leftTop` `leftBottom` `rightTop` `rightBottom` | string | `top` |  |
 | trigger | Tooltip trigger mode. Could be multiple by passing an array | `hover` \| `focus` \| `click` \| `contextMenu` \| Array&lt;string> | `hover` |  |
-| open | Whether the floating tooltip card is open or not | boolean | false |  |
+| open | Whether the floating tooltip card is open or not | boolean | false | 4.23.0 |
 | zIndex | Config `z-index` of Tooltip | number | - |  |
-| onOpenChange | Callback executed when visibility of the tooltip card is changed | (open) => void | - |  |
+| onOpenChange | Callback executed when visibility of the tooltip card is changed | (open) => void | - | 4.23.0 |
 
 ## Note
 
diff --git a/components/tooltip/index.tsx b/components/tooltip/index.tsx
index 4d268e9f8d..db6ed48dc8 100644
--- a/components/tooltip/index.tsx
+++ b/components/tooltip/index.tsx
@@ -43,22 +43,41 @@ export interface TooltipAlignConfig {
   useCssBottom?: boolean;
   useCssTransform?: boolean;
 }
-
 // remove this after RcTooltip switch visible to open.
-interface TempTooltipProps
+interface LegacyTooltipProps
   extends Partial<
     Omit<
       RcTooltipProps,
       'children' | 'visible' | 'defaultVisible' | 'onVisibleChange' | 'afterVisibleChange'
     >
   > {
+  /**
+   * @deprecated `visible` is deprecated which will be removed in next major version. Please use
+   *   `open` instead.
+   */
+  visible?: RcTooltipProps['visible'];
   open?: RcTooltipProps['visible'];
+  /**
+   * @deprecated `defaultVisible` is deprecated which will be removed in next major version. Please
+   *   use `defaultOpen` instead.
+   */
+  defaultVisible?: RcTooltipProps['defaultVisible'];
   defaultOpen?: RcTooltipProps['defaultVisible'];
+  /**
+   * @deprecated `onVisibleChange` is deprecated which will be removed in next major version. Please
+   *   use `onOpenChange` instead.
+   */
+  onVisibleChange?: RcTooltipProps['onVisibleChange'];
   onOpenChange?: RcTooltipProps['onVisibleChange'];
+  /**
+   * @deprecated `afterVisibleChange` is deprecated which will be removed in next major version.
+   *   Please use `afterOpenChange` instead.
+   */
+  afterVisibleChange?: RcTooltipProps['afterVisibleChange'];
   afterOpenChange?: RcTooltipProps['afterVisibleChange'];
 }
 
-export interface AbstractTooltipProps extends TempTooltipProps {
+export interface AbstractTooltipProps extends LegacyTooltipProps {
   style?: React.CSSProperties;
   className?: string;
   color?: LiteralUnion<PresetColorType, string>;
@@ -181,6 +200,7 @@ const Tooltip = React.forwardRef<unknown, TooltipProps>((props, ref) => {
 
     if (!isNoTitle()) {
       props.onOpenChange?.(vis);
+      props.onVisibleChange?.(vis);
     }
   };
 
diff --git a/components/tooltip/index.zh-CN.md b/components/tooltip/index.zh-CN.md
index 862ac62acc..8186d842e0 100644
--- a/components/tooltip/index.zh-CN.md
+++ b/components/tooltip/index.zh-CN.md
@@ -30,7 +30,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/Vyyeu8jq2/Tooltp.svg
 | arrowPointAtCenter | 箭头是否指向目标元素中心 | boolean | false |  |
 | autoAdjustOverflow | 气泡被遮挡时自动调整位置 | boolean | true |  |
 | color | 背景颜色 | string | - | 4.3.0 |
-| defaultOpen | 默认是否显隐 | boolean | false |  |
+| defaultOpen | 默认是否显隐 | boolean | false | 4.23.0 |
 | destroyTooltipOnHide | 关闭后是否销毁 Tooltip，当 `keepParent` 为 `false` 时销毁父容器 | boolean \| { keepParent?: boolean } | false |  |
 | getPopupContainer | 浮层渲染父节点，默认渲染到 body 上 | function(triggerNode) | () => document.body |  |
 | mouseEnterDelay | 鼠标移入后延时多少才显示 Tooltip，单位：秒 | number | 0.1 |  |
@@ -40,9 +40,9 @@ cover: https://gw.alipayobjects.com/zos/alicdn/Vyyeu8jq2/Tooltp.svg
 | overlayInnerStyle | 卡片内容区域的样式对象 | object | - |  |
 | placement | 气泡框位置，可选 `top` `left` `right` `bottom` `topLeft` `topRight` `bottomLeft` `bottomRight` `leftTop` `leftBottom` `rightTop` `rightBottom` | string | `top` |  |
 | trigger | 触发行为，可选 `hover` \| `focus` \| `click` \| `contextMenu`，可使用数组设置多个触发行为 | string \| string\[] | `hover` |  |
-| open | 用于手动控制浮层显隐 | boolean | false |  |
+| open | 用于手动控制浮层显隐 | boolean | false | 4.23.0 |
 | zIndex | 设置 Tooltip 的 `z-index` | number | - |  |
-| onOpenChange | 显示隐藏的回调 | (open) => void | - |  |
+| onOpenChange | 显示隐藏的回调 | (open) => void | - | 4.23.0 |
 
 ## 注意
 
diff --git a/components/tree/__tests__/__snapshots__/demo.test.js.snap b/components/tree/__tests__/__snapshots__/demo.test.ts.snap
similarity index 100%
rename from components/tree/__tests__/__snapshots__/demo.test.js.snap
rename to components/tree/__tests__/__snapshots__/demo.test.ts.snap
diff --git a/components/tree/__tests__/__snapshots__/directory.test.js.snap b/components/tree/__tests__/__snapshots__/directory.test.tsx.snap
similarity index 100%
rename from components/tree/__tests__/__snapshots__/directory.test.js.snap
rename to components/tree/__tests__/__snapshots__/directory.test.tsx.snap
diff --git a/components/tree/__tests__/__snapshots__/index.test.js.snap b/components/tree/__tests__/__snapshots__/index.test.tsx.snap
similarity index 100%
rename from components/tree/__tests__/__snapshots__/index.test.js.snap
rename to components/tree/__tests__/__snapshots__/index.test.tsx.snap
diff --git a/components/tree/__tests__/demo.test.js b/components/tree/__tests__/demo.test.ts
similarity index 100%
rename from components/tree/__tests__/demo.test.js
rename to components/tree/__tests__/demo.test.ts
diff --git a/components/tree/__tests__/directory.test.js b/components/tree/__tests__/directory.test.tsx
similarity index 91%
rename from components/tree/__tests__/directory.test.js
rename to components/tree/__tests__/directory.test.tsx
index 6cd8b7205a..699ceabda3 100644
--- a/components/tree/__tests__/directory.test.js
+++ b/components/tree/__tests__/directory.test.tsx
@@ -1,9 +1,12 @@
-import debounce from 'lodash/debounce';
 import React from 'react';
+import debounce from 'lodash/debounce';
+import type { Key } from 'react';
+import type RcTree from 'rc-tree';
 import mountTest from '../../../tests/shared/mountTest';
 import rtlTest from '../../../tests/shared/rtlTest';
 import { act, fireEvent, render } from '../../../tests/utils';
 import Tree from '../index';
+import type { TreeProps } from '../index';
 
 const { DirectoryTree, TreeNode } = Tree;
 
@@ -16,7 +19,7 @@ describe('Directory Tree', () => {
   rtlTest(Tree);
   rtlTest(DirectoryTree);
 
-  debounce.mockImplementation(fn => fn);
+  (debounce as any).mockImplementation((fn: () => void) => fn);
 
   beforeAll(() => {
     jest.useFakeTimers();
@@ -24,10 +27,10 @@ describe('Directory Tree', () => {
 
   afterAll(() => {
     jest.useRealTimers();
-    debounce.mockRestore();
+    (debounce as any).mockRestore();
   });
 
-  function createTree(props) {
+  function createTree(props?: TreeProps & { ref?: React.Ref<RcTree> }) {
     return (
       <DirectoryTree {...props}>
         <TreeNode key="0-0">
@@ -47,7 +50,7 @@ describe('Directory Tree', () => {
       const onExpand = jest.fn();
       const { container } = render(createTree({ onExpand }));
 
-      fireEvent.click(container.querySelector('.ant-tree-node-content-wrapper'));
+      fireEvent.click(container.querySelector('.ant-tree-node-content-wrapper')!);
       act(() => {
         jest.runAllTimers();
       });
@@ -57,7 +60,7 @@ describe('Directory Tree', () => {
       act(() => {
         jest.runAllTimers();
       });
-      fireEvent.click(container.querySelector('.ant-tree-node-content-wrapper'));
+      fireEvent.click(container.querySelector('.ant-tree-node-content-wrapper')!);
       act(() => {
         jest.runAllTimers();
       });
@@ -68,7 +71,7 @@ describe('Directory Tree', () => {
       const onExpand = jest.fn();
       const { container } = render(createTree({ expandAction: 'doubleClick', onExpand }));
 
-      fireEvent.doubleClick(container.querySelector('.ant-tree-node-content-wrapper'));
+      fireEvent.doubleClick(container.querySelector('.ant-tree-node-content-wrapper')!);
       act(() => {
         jest.runAllTimers();
       });
@@ -78,7 +81,7 @@ describe('Directory Tree', () => {
       act(() => {
         jest.runAllTimers();
       });
-      fireEvent.doubleClick(container.querySelector('.ant-tree-node-content-wrapper'));
+      fireEvent.doubleClick(container.querySelector('.ant-tree-node-content-wrapper')!);
       act(() => {
         jest.runAllTimers();
       });
@@ -86,12 +89,12 @@ describe('Directory Tree', () => {
     });
 
     describe('with state control', () => {
-      class StateDirTree extends React.Component {
+      class StateDirTree extends React.Component<TreeProps, { expandedKeys: Key[] }> {
         state = {
           expandedKeys: [],
         };
 
-        onExpand = expandedKeys => {
+        onExpand: TreeProps['onExpand'] = expandedKeys => {
           this.setState({ expandedKeys });
         };
 
@@ -111,14 +114,14 @@ describe('Directory Tree', () => {
       it('click', () => {
         const { container, asFragment } = render(<StateDirTree expandAction="click" />);
 
-        fireEvent.click(container.querySelector('.ant-tree-node-content-wrapper'));
+        fireEvent.click(container.querySelector('.ant-tree-node-content-wrapper')!);
         jest.runAllTimers();
         expect(asFragment().firstChild).toMatchSnapshot();
       });
       it('doubleClick', () => {
         const { container, asFragment } = render(<StateDirTree expandAction="doubleClick" />);
 
-        fireEvent.doubleClick(container.querySelector('.ant-tree-node-content-wrapper'));
+        fireEvent.doubleClick(container.querySelector('.ant-tree-node-content-wrapper')!);
         jest.runAllTimers();
         expect(asFragment().firstChild).toMatchSnapshot();
       });
@@ -213,7 +216,7 @@ describe('Directory Tree', () => {
   it('onDoubleClick', () => {
     const onDoubleClick = jest.fn();
     const { container } = render(createTree({ onDoubleClick }));
-    fireEvent.doubleClick(container.querySelector('.ant-tree-node-content-wrapper'));
+    fireEvent.doubleClick(container.querySelector('.ant-tree-node-content-wrapper')!);
     expect(onDoubleClick).toHaveBeenCalled();
   });
 
@@ -221,7 +224,7 @@ describe('Directory Tree', () => {
     const onExpand = jest.fn();
     const onSelect = jest.fn();
     const { container } = render(createTree({ onExpand, onSelect }));
-    fireEvent.click(container.querySelector('.ant-tree-node-content-wrapper'), { ctrlKey: true });
+    fireEvent.click(container.querySelector('.ant-tree-node-content-wrapper')!, { ctrlKey: true });
     expect(onExpand).not.toHaveBeenCalled();
     expect(onSelect).toHaveBeenCalledWith(
       ['0-0'],
@@ -268,9 +271,8 @@ describe('Directory Tree', () => {
   });
 
   it('ref support', () => {
-    const treeRef = React.createRef();
+    const treeRef = React.createRef<RcTree>();
     render(createTree({ ref: treeRef }));
-
-    expect('scrollTo' in treeRef.current).toBeTruthy();
+    expect('scrollTo' in treeRef.current!).toBeTruthy();
   });
 });
diff --git a/components/tree/__tests__/index.test.js b/components/tree/__tests__/index.test.tsx
similarity index 97%
rename from components/tree/__tests__/index.test.js
rename to components/tree/__tests__/index.test.tsx
index 104a1cebb2..959a8fb877 100644
--- a/components/tree/__tests__/index.test.js
+++ b/components/tree/__tests__/index.test.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { render } from '../../../tests/utils';
 import Tree from '../index';
+import type { AntTreeNodeProps } from '../Tree';
 
 const { TreeNode } = Tree;
 
@@ -57,7 +58,7 @@ describe('Tree', () => {
 
   it('switcherIcon should be loading icon when loadData', () => {
     const onLoadData = () =>
-      new Promise(resolve => {
+      new Promise<void>(resolve => {
         setTimeout(() => {
           resolve();
         }, 1000);
@@ -76,10 +77,10 @@ describe('Tree', () => {
   it('switcherIcon in Tree could be render prop function', () => {
     const { container } = render(
       <Tree
-        switcherIcon={({ expanded }) =>
+        defaultExpandAll
+        switcherIcon={({ expanded }: AntTreeNodeProps) =>
           expanded ? <span className="open" /> : <span className="close" />
         }
-        defaultExpandAll
       >
         <TreeNode icon="icon">
           <TreeNode id="node1" title="node1" icon="icon" key="0-0-2" />
diff --git a/components/tree/__tests__/util.test.js b/components/tree/__tests__/util.test.ts
similarity index 92%
rename from components/tree/__tests__/util.test.js
rename to components/tree/__tests__/util.test.ts
index e3baca483e..053f7a2ed6 100644
--- a/components/tree/__tests__/util.test.js
+++ b/components/tree/__tests__/util.test.ts
@@ -14,14 +14,14 @@ describe('Tree util', () => {
     ];
 
     it('calc range keys', () => {
-      const keys = calcRangeKeys({
+      const rangeKeys = calcRangeKeys({
         treeData,
         expandedKeys: ['0-0', '0-2', '0-2-0'],
         startKey: '0-2-0-1',
         endKey: '0-0-0',
       });
       const target = ['0-0-0', '0-0-1', '0-1', '0-2', '0-2-0', '0-2-0-0', '0-2-0-1'];
-      expect(keys.sort()).toEqual(target.sort());
+      expect(rangeKeys.sort()).toEqual(target.sort());
     });
 
     it('return startKey when startKey === endKey', () => {
diff --git a/components/typography/__tests__/__snapshots__/demo.test.js.snap b/components/typography/__tests__/__snapshots__/demo.test.ts.snap
similarity index 100%
rename from components/typography/__tests__/__snapshots__/demo.test.js.snap
rename to components/typography/__tests__/__snapshots__/demo.test.ts.snap
diff --git a/components/typography/__tests__/__snapshots__/index.test.js.snap b/components/typography/__tests__/__snapshots__/index.test.tsx.snap
similarity index 100%
rename from components/typography/__tests__/__snapshots__/index.test.js.snap
rename to components/typography/__tests__/__snapshots__/index.test.tsx.snap
diff --git a/components/typography/__tests__/demo.test.js b/components/typography/__tests__/demo.test.ts
similarity index 100%
rename from components/typography/__tests__/demo.test.js
rename to components/typography/__tests__/demo.test.ts
diff --git a/components/typography/__tests__/ellipsis.test.js b/components/typography/__tests__/ellipsis.test.tsx
similarity index 79%
rename from components/typography/__tests__/ellipsis.test.js
rename to components/typography/__tests__/ellipsis.test.tsx
index 23652f0cc7..a7d6fd8f36 100644
--- a/components/typography/__tests__/ellipsis.test.js
+++ b/components/typography/__tests__/ellipsis.test.tsx
@@ -2,6 +2,7 @@ import { spyElementPrototypes } from 'rc-util/lib/test/domHook';
 import React from 'react';
 import { act } from 'react-dom/test-utils';
 import { fireEvent, render, sleep, triggerResize, waitFor } from '../../../tests/utils';
+import type { EllipsisConfig } from '../Base';
 import Base from '../Base';
 // eslint-disable-next-line no-unused-vars
 
@@ -14,7 +15,7 @@ jest.mock('../../_util/styleChecker', () => ({
 describe('Typography.Ellipsis', () => {
   const LINE_STR_COUNT = 20;
   const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
-  let mockRectSpy;
+  let mockRectSpy: ReturnType<typeof spyElementPrototypes>;
   let getWidthTimes = 0;
 
   beforeAll(() => {
@@ -56,13 +57,9 @@ 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();
+    const ref = React.createRef<any>();
     const onEllipsis = jest.fn();
-    const {
-      container: wrapper,
-      rerender,
-      unmount,
-    } = render(
+    const { container, rerender, unmount } = render(
       <Base ellipsis={{ onEllipsis }} component="p" editable ref={ref}>
         {fullStr}
       </Base>,
@@ -71,7 +68,7 @@ describe('Typography.Ellipsis', () => {
     triggerResize(ref.current);
     await sleep(20);
 
-    expect(wrapper.firstChild.textContent).toEqual('Bamboo is Little ...');
+    expect(container.firstChild?.textContent).toEqual('Bamboo is Little ...');
     expect(onEllipsis).toHaveBeenCalledWith(true);
     onEllipsis.mockReset();
 
@@ -81,7 +78,7 @@ describe('Typography.Ellipsis', () => {
         {fullStr}
       </Base>,
     );
-    expect(wrapper.textContent).toEqual('Bamboo is Little Light Bamboo is Litt...');
+    expect(container.textContent).toEqual('Bamboo is Little Light Bamboo is Litt...');
     expect(onEllipsis).not.toHaveBeenCalled();
 
     // Third resize
@@ -90,7 +87,7 @@ describe('Typography.Ellipsis', () => {
         {fullStr}
       </Base>,
     );
-    expect(wrapper.querySelector('p').textContent).toEqual(fullStr);
+    expect(container.querySelector('p')?.textContent).toEqual(fullStr);
     expect(onEllipsis).toHaveBeenCalledWith(false);
 
     unmount();
@@ -107,7 +104,10 @@ describe('Typography.Ellipsis', () => {
       wrapper.querySelectorAll('.ant-typography-ellipsis-multiple-line').length,
     ).toBeGreaterThan(0);
     expect(
-      wrapper.querySelector('.ant-typography-ellipsis-multiple-line').style.WebkitLineClamp,
+      (
+        wrapper.querySelector<HTMLDivElement>('.ant-typography-ellipsis-multiple-line')
+          ?.style as any
+      )?.WebkitLineClamp,
     ).toEqual('2');
   });
 
@@ -120,7 +120,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();
+    const ref = React.createRef<any>();
     const onEllipsis = jest.fn();
     const { container: wrapper, unmount } = render(
       <Base ellipsis={{ onEllipsis }} component="p" editable ref={ref}>
@@ -131,7 +131,7 @@ describe('Typography.Ellipsis', () => {
     triggerResize(ref.current);
     await sleep(20);
 
-    expect(wrapper.firstChild.textContent).toEqual('Ant Design, a des...');
+    expect(wrapper.firstChild?.textContent).toEqual('Ant Design, a des...');
     const ellipsisSpans = wrapper.querySelectorAll('span[aria-hidden]');
     expect(ellipsisSpans[ellipsisSpans.length - 1].textContent).toEqual('...');
     onEllipsis.mockReset();
@@ -141,7 +141,7 @@ describe('Typography.Ellipsis', () => {
 
   it('should middle ellipsis', async () => {
     const suffix = '--suffix';
-    const ref = React.createRef();
+    const ref = React.createRef<any>();
     const { container: wrapper, unmount } = render(
       <Base ellipsis={{ rows: 1, suffix }} component="p" ref={ref}>
         {fullStr}
@@ -151,13 +151,13 @@ describe('Typography.Ellipsis', () => {
     triggerResize(ref.current);
     await sleep(20);
 
-    expect(wrapper.querySelector('p').textContent).toEqual('Bamboo is...--suffix');
+    expect(wrapper.querySelector('p')?.textContent).toEqual('Bamboo is...--suffix');
     unmount();
   });
 
   it('should front or middle ellipsis', async () => {
     const suffix = '--The information is very important';
-    const ref = React.createRef();
+    const ref = React.createRef<any>();
     const {
       container: wrapper,
       rerender,
@@ -171,7 +171,7 @@ describe('Typography.Ellipsis', () => {
     triggerResize(ref.current);
     await sleep(20);
 
-    expect(wrapper.querySelector('p').textContent).toEqual(
+    expect(wrapper.querySelector('p')?.textContent).toEqual(
       '...--The information is very important',
     );
 
@@ -180,7 +180,7 @@ describe('Typography.Ellipsis', () => {
         {fullStr}
       </Base>,
     );
-    expect(wrapper.querySelector('p').textContent).toEqual(
+    expect(wrapper.querySelector('p')?.textContent).toEqual(
       'Ba...--The information is very important',
     );
 
@@ -189,7 +189,7 @@ describe('Typography.Ellipsis', () => {
         {fullStr}
       </Base>,
     );
-    expect(wrapper.querySelector('p').textContent).toEqual(fullStr + suffix);
+    expect(wrapper.querySelector('p')?.textContent).toEqual(fullStr + suffix);
 
     unmount();
   });
@@ -198,7 +198,7 @@ describe('Typography.Ellipsis', () => {
     const bamboo = 'Bamboo';
     const is = ' is ';
 
-    const ref = React.createRef();
+    const ref = React.createRef<any>();
     const { container: wrapper } = render(
       <Base ellipsis component="p" editable ref={ref}>
         {bamboo}
@@ -222,9 +222,9 @@ describe('Typography.Ellipsis', () => {
       </Base>,
     );
 
-    fireEvent.click(wrapper.querySelector('.ant-typography-expand'));
+    fireEvent.click(wrapper.querySelector('.ant-typography-expand')!);
     expect(onExpand).toHaveBeenCalled();
-    expect(wrapper.querySelector('p').textContent).toEqual(fullStr);
+    expect(wrapper.querySelector('p')?.textContent).toEqual(fullStr);
   });
 
   it('should have custom expand style', async () => {
@@ -234,7 +234,7 @@ describe('Typography.Ellipsis', () => {
         {fullStr}
       </Base>,
     );
-    expect(container.querySelector('.ant-typography-expand').textContent).toEqual('more');
+    expect(container.querySelector('.ant-typography-expand')?.textContent).toEqual('more');
   });
 
   describe('native css ellipsis', () => {
@@ -247,12 +247,12 @@ describe('Typography.Ellipsis', () => {
     it('Tooltip should recheck on parent visible change', () => {
       const originIntersectionObserver = global.IntersectionObserver;
 
-      let elementChangeCallback;
+      let elementChangeCallback: () => void;
       const observeFn = jest.fn();
       const disconnectFn = jest.fn();
 
-      global.IntersectionObserver = class MockIntersectionObserver {
-        constructor(callback) {
+      (global as any).IntersectionObserver = class MockIntersectionObserver {
+        constructor(callback: () => IntersectionObserverCallback) {
           elementChangeCallback = callback;
         }
 
@@ -267,7 +267,7 @@ describe('Typography.Ellipsis', () => {
 
       // Hide first
       act(() => {
-        elementChangeCallback();
+        elementChangeCallback?.();
       });
 
       // Trigger visible should trigger recheck
@@ -276,7 +276,7 @@ describe('Typography.Ellipsis', () => {
         get: () => document.body,
       });
       act(() => {
-        elementChangeCallback();
+        elementChangeCallback?.();
       });
 
       expect(getWidthTimes).toBeGreaterThan(0);
@@ -296,7 +296,7 @@ describe('Typography.Ellipsis', () => {
   });
 
   describe('should tooltip support', () => {
-    let domSpy;
+    let domSpy: ReturnType<typeof spyElementPrototypes>;
 
     beforeAll(() => {
       domSpy = spyElementPrototypes(HTMLElement, {
@@ -313,8 +313,8 @@ describe('Typography.Ellipsis', () => {
       domSpy.mockRestore();
     });
 
-    async function getWrapper(tooltip) {
-      const ref = React.createRef();
+    async function getWrapper(tooltip?: EllipsisConfig['tooltip']) {
+      const ref = React.createRef<any>();
       const wrapper = render(
         <Base ellipsis={{ tooltip }} component="p" ref={ref}>
           {fullStr}
@@ -327,7 +327,7 @@ describe('Typography.Ellipsis', () => {
 
     it('boolean', async () => {
       const { container, baseElement } = await getWrapper(true);
-      fireEvent.mouseEnter(container.firstChild);
+      fireEvent.mouseEnter(container.firstChild!);
       await waitFor(() => {
         expect(baseElement.querySelector('.ant-tooltip-open')).not.toBeNull();
       });
@@ -335,7 +335,7 @@ describe('Typography.Ellipsis', () => {
 
     it('customize', async () => {
       const { container, baseElement } = await getWrapper('Bamboo is Light');
-      fireEvent.mouseEnter(container.firstChild);
+      fireEvent.mouseEnter(container.firstChild!);
       await waitFor(() => {
         expect(baseElement.querySelector('.ant-tooltip-open')).not.toBeNull();
       });
@@ -345,7 +345,7 @@ describe('Typography.Ellipsis', () => {
         title: 'This is tooltip',
         className: 'tooltip-class-name',
       });
-      fireEvent.mouseEnter(container.firstChild);
+      fireEvent.mouseEnter(container.firstChild!);
       await waitFor(() => {
         expect(container.querySelector('.tooltip-class-name')).toBeTruthy();
         expect(baseElement.querySelector('.ant-tooltip-open')).not.toBeNull();
@@ -356,7 +356,7 @@ describe('Typography.Ellipsis', () => {
         title: true,
         className: 'tooltip-class-name',
       });
-      fireEvent.mouseEnter(container.firstChild);
+      fireEvent.mouseEnter(container.firstChild!);
       await waitFor(() => {
         expect(container.querySelector('.tooltip-class-name')).toBeTruthy();
         expect(baseElement.querySelector('.ant-tooltip-open')).not.toBeNull();
@@ -366,7 +366,7 @@ describe('Typography.Ellipsis', () => {
       const { container, baseElement } = await getWrapper(
         <div className="tooltip-class-name">title</div>,
       );
-      fireEvent.mouseEnter(container.firstChild);
+      fireEvent.mouseEnter(container.firstChild!);
       await waitFor(() => {
         expect(container.querySelector('.tooltip-class-name')).toBeTruthy();
         expect(baseElement.querySelector('.ant-tooltip-open')).not.toBeNull();
@@ -376,16 +376,23 @@ describe('Typography.Ellipsis', () => {
 
   it('js ellipsis should show aria-label', () => {
     const { container: titleWrapper } = render(
-      <Base title="bamboo" ellipsis={{ expandable: true }} />,
+      <Base
+        component={undefined as unknown as string}
+        title="bamboo"
+        ellipsis={{ expandable: true }}
+      />,
     );
-    expect(titleWrapper.querySelector('.ant-typography').getAttribute('aria-label')).toEqual(
+    expect(titleWrapper.querySelector('.ant-typography')?.getAttribute('aria-label')).toEqual(
       'bamboo',
     );
 
     const { container: tooltipWrapper } = render(
-      <Base ellipsis={{ expandable: true, tooltip: 'little' }} />,
+      <Base
+        component={undefined as unknown as string}
+        ellipsis={{ expandable: true, tooltip: 'little' }}
+      />,
     );
-    expect(tooltipWrapper.querySelector('.ant-typography').getAttribute('aria-label')).toEqual(
+    expect(tooltipWrapper.querySelector('.ant-typography')?.getAttribute('aria-label')).toEqual(
       'little',
     );
   });
@@ -411,16 +418,20 @@ describe('Typography.Ellipsis', () => {
       },
     });
 
-    const ref = React.createRef();
-    const { container: wrapper, baseElement } = render(
-      <Base ellipsis={{ tooltip: 'This is tooltip', rows: 2 }} ref={ref}>
+    const ref = React.createRef<any>();
+    const { container, baseElement } = render(
+      <Base
+        component={undefined as unknown as string}
+        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);
     await sleep(20);
 
-    fireEvent.mouseEnter(wrapper.firstChild);
+    fireEvent.mouseEnter(container.firstChild!);
     await waitFor(() => {
       expect(baseElement.querySelector('.ant-tooltip-open')).not.toBeNull();
     });
diff --git a/components/typography/__tests__/index.test.js b/components/typography/__tests__/index.test.tsx
similarity index 81%
rename from components/typography/__tests__/index.test.js
rename to components/typography/__tests__/index.test.tsx
index 284c4c9035..4b5b6b98a3 100644
--- a/components/typography/__tests__/index.test.js
+++ b/components/typography/__tests__/index.test.tsx
@@ -10,6 +10,7 @@ import Base from '../Base';
 import Link from '../Link';
 import Paragraph from '../Paragraph';
 import Text from '../Text';
+import type { TitleProps } from '../Title';
 import Title from '../Title';
 import Typography from '../Typography';
 
@@ -33,7 +34,7 @@ describe('Typography', () => {
   const originOffsetHeight = Object.getOwnPropertyDescriptor(
     HTMLElement.prototype,
     'offsetHeight',
-  ).get;
+  )?.get;
 
   const mockGetBoundingClientRect = jest.spyOn(HTMLElement.prototype, 'getBoundingClientRect');
 
@@ -50,7 +51,7 @@ describe('Typography', () => {
       let html = this.innerHTML;
       html = html.replace(/<[^>]*>/g, '');
       const lines = Math.ceil(html.length / LINE_STR_COUNT);
-      return { height: lines * 16 };
+      return { height: lines * 16 } as DOMRect;
     });
   });
 
@@ -77,7 +78,7 @@ describe('Typography', () => {
 
   describe('Title', () => {
     it('warning if `level` not correct', () => {
-      render(<Title level={false} />);
+      render(<Title level={false as unknown as TitleProps['level']} />);
 
       expect(errorSpy).toHaveBeenCalledWith(
         'Warning: [antd: Typography.Title] Title only accept `1 | 2 | 3 | 4 | 5` as `level` value. And `5` need 4.6.0+ version.',
@@ -87,7 +88,14 @@ describe('Typography', () => {
 
   describe('Base', () => {
     describe('copyable', () => {
-      function copyTest(name, text, target, icon, tooltips, format) {
+      function copyTest(
+        name: string,
+        text?: string,
+        target?: string,
+        icon?: React.ReactNode,
+        tooltips?: boolean | string[],
+        format?: 'text/plain' | 'text/html',
+      ): void {
         it(name, async () => {
           jest.useFakeTimers();
           const onCopy = jest.fn();
@@ -103,51 +111,55 @@ describe('Typography', () => {
             expect(wrapper.querySelectorAll('.anticon-copy').length).toBeGreaterThan(0);
           }
 
-          fireEvent.mouseEnter(wrapper.querySelector('.ant-typography-copy'));
+          fireEvent.mouseEnter(wrapper.querySelector('.ant-typography-copy')!);
           act(() => {
             jest.runAllTimers();
           });
 
           if (tooltips === undefined || tooltips === true) {
             await waitFor(() => {
-              expect(wrapper.querySelector('.ant-tooltip-inner').textContent).toBe('Copy');
+              expect(wrapper.querySelector('.ant-tooltip-inner')?.textContent).toBe('Copy');
             });
           } else if (tooltips === false) {
             await waitFor(() => {
               expect(wrapper.querySelectorAll('.ant-tooltip-inner').length).toBe(0);
             });
-          } else if (tooltips[0] === '' && tooltips[1] === '') {
+          } else if ((tooltips as any)[0] === '' && (tooltips as any)[1] === '') {
             await waitFor(() => {
               expect(wrapper.querySelectorAll('.ant-tooltip-inner').length).toBe(0);
             });
-          } else if (tooltips[0] === '' && tooltips[1]) {
+          } else if ((tooltips as any)[0] === '' && (tooltips as any)[1]) {
             await waitFor(() => {
               expect(wrapper.querySelectorAll('.ant-tooltip-inner').length).toBe(0);
             });
-          } else if (tooltips[1] === '' && tooltips[0]) {
+          } else if ((tooltips as any)[1] === '' && (tooltips as any)[0]) {
             await waitFor(() => {
-              expect(wrapper.querySelector('.ant-tooltip-inner').textContent).toBe(tooltips[0]);
+              expect(wrapper.querySelector('.ant-tooltip-inner')?.textContent).toBe(
+                (tooltips as any)[0],
+              );
             });
           } else {
             await waitFor(() => {
-              expect(wrapper.querySelector('.ant-tooltip-inner').textContent).toBe(tooltips[0]);
+              expect(wrapper.querySelector('.ant-tooltip-inner')?.textContent).toBe(
+                (tooltips as any)[0],
+              );
             });
           }
 
-          fireEvent.click(wrapper.querySelector('.ant-typography-copy'));
+          fireEvent.click(wrapper.querySelector('.ant-typography-copy')!);
           jest.useRealTimers();
           fireEvent.mouseEnter(wrapper.querySelectorAll('.ant-typography-copy')[0]);
           // tooltips 为 ['', 'xxx'] 时，切换时需要延时 mouseEnterDelay 的时长
-          if (tooltips && tooltips[0] === '' && tooltips[1]) {
+          if (tooltips && (tooltips as any)[0] === '' && (tooltips as any)[1]) {
             await sleep(150);
           }
 
-          expect(copy.lastStr).toEqual(target);
-          expect(copy.lastOptions.format).toEqual(format);
+          expect((copy as any).lastStr).toEqual(target);
+          expect((copy as any).lastOptions.format).toEqual(format);
           expect(onCopy).toHaveBeenCalled();
 
           let copiedIcon = '.anticon-check';
-          if (icon && icon.length > 1) {
+          if (icon && (icon as string).length > 1) {
             copiedIcon = '.anticon-like';
           } else {
             copiedIcon = '.anticon-check';
@@ -158,7 +170,7 @@ describe('Typography', () => {
 
           if (tooltips === undefined || tooltips === true) {
             await waitFor(() => {
-              expect(wrapper.querySelector('.ant-tooltip-inner').textContent).toBe('Copied');
+              expect(wrapper.querySelector('.ant-tooltip-inner')?.textContent).toBe('Copied');
             });
           } else if (tooltips === false) {
             await waitFor(() => {
@@ -170,15 +182,15 @@ describe('Typography', () => {
             });
           } else if (tooltips[0] === '' && tooltips[1]) {
             await waitFor(() => {
-              expect(wrapper.querySelector('.ant-tooltip-inner').textContent).toBe(tooltips[1]);
+              expect(wrapper.querySelector('.ant-tooltip-inner')?.textContent).toBe(tooltips[1]);
             });
           } else if (tooltips[1] === '' && tooltips[0]) {
             await waitFor(() => {
-              expect(wrapper.querySelector('.ant-tooltip-inner').textContent).toBe('');
+              expect(wrapper.querySelector('.ant-tooltip-inner')?.textContent).toBe('');
             });
           } else {
             await waitFor(() => {
-              expect(wrapper.querySelector('.ant-tooltip-inner').textContent).toBe(tooltips[1]);
+              expect(wrapper.querySelector('.ant-tooltip-inner')?.textContent).toBe(tooltips[1]);
             });
           }
 
@@ -238,10 +250,17 @@ describe('Typography', () => {
     });
 
     describe('editable', () => {
+      interface EditableConfig {
+        name?: string;
+        icon?: React.ReactNode;
+        tooltip?: string | boolean;
+        triggerType?: ('icon' | 'text')[];
+        enterIcon?: React.ReactNode;
+      }
       function testStep(
-        { name = '', icon, tooltip, triggerType, enterIcon },
-        submitFunc,
-        expectFunc,
+        { name = '', icon, tooltip, triggerType, enterIcon }: EditableConfig,
+        submitFunc?: (container: ReturnType<typeof render>['container']) => void,
+        expectFunc?: (callbake: jest.Mock) => void,
       ) {
         it(name, async () => {
           jest.useFakeTimers();
@@ -269,7 +288,7 @@ describe('Typography', () => {
             }
 
             if (triggerType === undefined || triggerType.indexOf('text') === -1) {
-              fireEvent.click(wrapper.firstChild);
+              fireEvent.click(wrapper.firstChild!);
               expect(onStart).not.toHaveBeenCalled();
             }
             fireEvent.mouseEnter(wrapper.querySelectorAll('.ant-typography-edit')[0]);
@@ -279,7 +298,7 @@ describe('Typography', () => {
 
             if (tooltip === undefined || tooltip === true) {
               await waitFor(() => {
-                expect(wrapper.querySelector('.ant-tooltip-inner').textContent).toBe('Edit');
+                expect(wrapper.querySelector('.ant-tooltip-inner')?.textContent).toBe('Edit');
               });
             } else if (tooltip === false) {
               await waitFor(() => {
@@ -287,7 +306,7 @@ describe('Typography', () => {
               });
             } else {
               await waitFor(() => {
-                expect(wrapper.querySelector('.ant-tooltip-inner').textContent).toBe(tooltip);
+                expect(wrapper.querySelector('.ant-tooltip-inner')?.textContent).toBe(tooltip);
               });
             }
 
@@ -295,8 +314,8 @@ describe('Typography', () => {
 
             expect(onStart).toHaveBeenCalled();
             if (triggerType !== undefined && triggerType.indexOf('text') !== -1) {
-              fireEvent.keyDown(wrapper.querySelector('textarea'), { keyCode: KeyCode.ESC });
-              fireEvent.keyUp(wrapper.querySelector('textarea'), { keyCode: KeyCode.ESC });
+              fireEvent.keyDown(wrapper.querySelector('textarea')!, { keyCode: KeyCode.ESC });
+              fireEvent.keyUp(wrapper.querySelector('textarea')!, { keyCode: KeyCode.ESC });
               expect(onChange).not.toHaveBeenCalled();
             }
           }
@@ -306,7 +325,7 @@ describe('Typography', () => {
               expect(wrapper.querySelectorAll('.anticon-highlight').length).toBe(0);
               expect(wrapper.querySelectorAll('.anticon-edit').length).toBe(0);
             }
-            fireEvent.click(wrapper.firstChild);
+            fireEvent.click(wrapper.firstChild!);
             expect(onStart).toHaveBeenCalled();
           }
 
@@ -315,9 +334,7 @@ describe('Typography', () => {
           expect(props.getAttribute('style')).toContain('padding: unset');
           expect(props.className.includes(className)).toBeTruthy();
 
-          fireEvent.change(wrapper.querySelector('textarea'), {
-            target: { value: 'Bamboo' },
-          });
+          fireEvent.change(wrapper.querySelector('textarea')!, { target: { value: 'Bamboo' } });
 
           if (enterIcon === undefined) {
             expect(
@@ -350,21 +367,21 @@ describe('Typography', () => {
 
       testStep({ name: 'by key up' }, wrapper => {
         // Not trigger when inComposition
-        fireEvent.compositionStart(wrapper.querySelector('textarea'));
-        fireEvent.keyDown(wrapper.querySelector('textarea'), { keyCode: KeyCode.ENTER });
-        fireEvent.compositionEnd(wrapper.querySelector('textarea'));
-        fireEvent.keyUp(wrapper.querySelector('textarea'), { keyCode: KeyCode.ENTER });
+        fireEvent.compositionStart(wrapper.querySelector('textarea')!);
+        fireEvent.keyDown(wrapper.querySelector('textarea')!, { keyCode: KeyCode.ENTER });
+        fireEvent.compositionEnd(wrapper.querySelector('textarea')!);
+        fireEvent.keyUp(wrapper.querySelector('textarea')!, { keyCode: KeyCode.ENTER });
 
         // Now trigger
-        fireEvent.keyDown(wrapper.querySelector('textarea'), { keyCode: KeyCode.ENTER });
-        fireEvent.keyUp(wrapper.querySelector('textarea'), { keyCode: KeyCode.ENTER });
+        fireEvent.keyDown(wrapper.querySelector('textarea')!, { keyCode: KeyCode.ENTER });
+        fireEvent.keyUp(wrapper.querySelector('textarea')!, { keyCode: KeyCode.ENTER });
       });
 
       testStep(
         { name: 'by esc key' },
         wrapper => {
-          fireEvent.keyDown(wrapper.querySelector('textarea'), { keyCode: KeyCode.ESC });
-          fireEvent.keyUp(wrapper.querySelector('textarea'), { keyCode: KeyCode.ESC });
+          fireEvent.keyDown(wrapper.querySelector('textarea')!, { keyCode: KeyCode.ESC });
+          fireEvent.keyUp(wrapper.querySelector('textarea')!, { keyCode: KeyCode.ESC });
         },
         onChange => {
           // eslint-disable-next-line jest/no-standalone-expect
@@ -373,7 +390,7 @@ describe('Typography', () => {
       );
 
       testStep({ name: 'by blur' }, wrapper => {
-        fireEvent.blur(wrapper.querySelector('textarea'));
+        fireEvent.blur(wrapper.querySelector('textarea')!);
       });
 
       testStep({ name: 'customize edit icon', icon: <HighlightOutlined /> });
@@ -392,8 +409,8 @@ describe('Typography', () => {
         const onEnd = jest.fn();
         const { container: wrapper } = render(<Paragraph editable={{ onEnd }}>Bamboo</Paragraph>);
         fireEvent.click(wrapper.querySelectorAll('.ant-typography-edit')[0]);
-        fireEvent.keyDown(wrapper.querySelector('textarea'), { keyCode: KeyCode.ENTER });
-        fireEvent.keyUp(wrapper.querySelector('textarea'), { keyCode: KeyCode.ENTER });
+        fireEvent.keyDown(wrapper.querySelector('textarea')!, { keyCode: KeyCode.ENTER });
+        fireEvent.keyUp(wrapper.querySelector('textarea')!, { keyCode: KeyCode.ENTER });
         expect(onEnd).toHaveBeenCalledTimes(1);
       });
 
@@ -403,8 +420,8 @@ describe('Typography', () => {
           <Paragraph editable={{ onCancel }}>Bamboo</Paragraph>,
         );
         fireEvent.click(wrapper.querySelectorAll('.ant-typography-edit')[0]);
-        fireEvent.keyDown(wrapper.querySelector('textarea'), { keyCode: KeyCode.ESC });
-        fireEvent.keyUp(wrapper.querySelector('textarea'), { keyCode: KeyCode.ESC });
+        fireEvent.keyDown(wrapper.querySelector('textarea')!, { keyCode: KeyCode.ESC });
+        fireEvent.keyUp(wrapper.querySelector('textarea')!, { keyCode: KeyCode.ESC });
         expect(onCancel).toHaveBeenCalledTimes(1);
       });
 
@@ -423,9 +440,7 @@ describe('Typography', () => {
         fireEvent.click(editIcon);
         expect(triggerTimes).toEqual(1);
 
-        fireEvent.change(wrapper.querySelector('textarea'), {
-          target: { value: 'good' },
-        });
+        fireEvent.change(wrapper.querySelector('textarea')!, { target: { value: 'good' } });
 
         expect(triggerTimes).toEqual(1);
       });
@@ -435,14 +450,14 @@ describe('Typography', () => {
       const { container: wrapper } = render(<Paragraph editable>content</Paragraph>);
       fireEvent.click(wrapper.querySelectorAll('.ant-typography-edit')[0]);
       const textareaNode = wrapper.querySelector('textarea');
-      expect(textareaNode.selectionStart).toBe(7);
-      expect(textareaNode.selectionEnd).toBe(7);
+      expect(textareaNode?.selectionStart).toBe(7);
+      expect(textareaNode?.selectionEnd).toBe(7);
     });
   });
 
   it('warning if use setContentRef', () => {
-    const refFunc = () => {};
-    render(<Typography setContentRef={refFunc} />);
+    const setContentRef = { setContentRef() {} } as any;
+    render(<Typography {...setContentRef} />);
     expect(errorSpy).toHaveBeenCalledWith(
       'Warning: [antd: Typography] `setContentRef` is deprecated. Please use `ref` instead.',
     );
@@ -451,27 +466,23 @@ describe('Typography', () => {
   it('no italic warning', () => {
     resetWarned();
     render(<Text italic>Little</Text>);
-
     expect(errorSpy).not.toHaveBeenCalled();
   });
 
   it('should get HTMLHeadingElement ref from Title', () => {
-    const ref = React.createRef();
-
+    const ref = React.createRef<HTMLHeadingElement>();
     render(<Title level={1} ref={ref} />);
     expect(ref.current instanceof HTMLHeadingElement).toBe(true);
   });
 
   it('should get HTMLDivElement ref from Paragraph', () => {
-    const ref = React.createRef();
-
+    const ref = React.createRef<HTMLDivElement>();
     render(<Paragraph ref={ref} />);
     expect(ref.current instanceof HTMLDivElement).toBe(true);
   });
 
   it('should get HTMLSpanElement ref from Text', () => {
-    const ref = React.createRef();
-
+    const ref = React.createRef<HTMLSpanElement>();
     render(<Text ref={ref} />);
     expect(ref.current instanceof HTMLSpanElement).toBe(true);
   });
diff --git a/components/upload/__tests__/__snapshots__/demo.test.js.snap b/components/upload/__tests__/__snapshots__/demo.test.ts.snap
similarity index 100%
rename from components/upload/__tests__/__snapshots__/demo.test.js.snap
rename to components/upload/__tests__/__snapshots__/demo.test.ts.snap
diff --git a/components/upload/__tests__/__snapshots__/upload.test.js.snap b/components/upload/__tests__/__snapshots__/upload.test.tsx.snap
similarity index 100%
rename from components/upload/__tests__/__snapshots__/upload.test.js.snap
rename to components/upload/__tests__/__snapshots__/upload.test.tsx.snap
diff --git a/components/upload/__tests__/__snapshots__/uploadlist.test.js.snap b/components/upload/__tests__/__snapshots__/uploadlist.test.tsx.snap
similarity index 100%
rename from components/upload/__tests__/__snapshots__/uploadlist.test.js.snap
rename to components/upload/__tests__/__snapshots__/uploadlist.test.tsx.snap
diff --git a/components/upload/__tests__/demo.test.js b/components/upload/__tests__/demo.test.ts
similarity index 100%
rename from components/upload/__tests__/demo.test.js
rename to components/upload/__tests__/demo.test.ts
diff --git a/components/upload/__tests__/dragger.test.js b/components/upload/__tests__/dragger.test.tsx
similarity index 98%
rename from components/upload/__tests__/dragger.test.js
rename to components/upload/__tests__/dragger.test.tsx
index db5e5813af..3171853c90 100644
--- a/components/upload/__tests__/dragger.test.js
+++ b/components/upload/__tests__/dragger.test.tsx
@@ -19,7 +19,7 @@ describe('Upload.Dragger', () => {
       </Upload.Dragger>,
     );
 
-    fireEvent.dragOver(wrapper.querySelector('.ant-upload-drag-container'), {
+    fireEvent.dragOver(wrapper.querySelector('.ant-upload-drag-container')!, {
       target: {
         files: [{ file: 'foo.png' }],
       },
@@ -44,7 +44,7 @@ describe('Upload.Dragger', () => {
       </Upload.Dragger>,
     );
 
-    fireEvent.drop(wrapper.querySelector('.ant-upload-drag-container'), {
+    fireEvent.drop(wrapper.querySelector('.ant-upload-drag-container')!, {
       dataTransfer: {
         files: [new File(['foo'], 'foo.png', { type: 'image/png' })],
       },
diff --git a/components/upload/__tests__/mock.js b/components/upload/__tests__/mock.ts
similarity index 77%
rename from components/upload/__tests__/mock.js
rename to components/upload/__tests__/mock.ts
index 1f2e57c8aa..f810b71414 100644
--- a/components/upload/__tests__/mock.js
+++ b/components/upload/__tests__/mock.ts
@@ -3,9 +3,7 @@ import mock from 'xhr-mock';
 export function setup() {
   mock.setup();
   mock.post('http://upload.com/', (req, res) => {
-    req.headers({
-      'content-length': 100,
-    });
+    req.headers({ 'content-length': 100 as unknown as string });
     req.body('thisisbody');
     return res;
   });
diff --git a/components/upload/__tests__/requests.js b/components/upload/__tests__/requests.js
deleted file mode 100644
index d90ed171ff..0000000000
--- a/components/upload/__tests__/requests.js
+++ /dev/null
@@ -1,11 +0,0 @@
-export const successRequest = ({ onSuccess, file }) => {
-  setTimeout(() => {
-    onSuccess(null, file);
-  });
-};
-
-export const errorRequest = ({ onError }) => {
-  setTimeout(() => {
-    onError();
-  });
-};
diff --git a/components/upload/__tests__/requests.ts b/components/upload/__tests__/requests.ts
new file mode 100644
index 0000000000..b0d2e42b0e
--- /dev/null
+++ b/components/upload/__tests__/requests.ts
@@ -0,0 +1,15 @@
+import type { UploadProps } from '../interface';
+
+export const successRequest: UploadProps['customRequest'] = ({ onSuccess, file }) => {
+  setTimeout(() => {
+    // @ts-ignore
+    onSuccess?.(null, file);
+  });
+};
+
+export const errorRequest: UploadProps['customRequest'] = ({ onError }) => {
+  setTimeout(() => {
+    // @ts-ignore
+    onError?.();
+  });
+};
diff --git a/components/upload/__tests__/upload.test.js b/components/upload/__tests__/upload.test.tsx
similarity index 81%
rename from components/upload/__tests__/upload.test.js
rename to components/upload/__tests__/upload.test.tsx
index 33f545b083..2fa01d823b 100644
--- a/components/upload/__tests__/upload.test.js
+++ b/components/upload/__tests__/upload.test.tsx
@@ -1,7 +1,9 @@
 /* eslint-disable react/no-string-refs, react/prefer-es6-class */
 import produce from 'immer';
 import { cloneDeep } from 'lodash';
+import type { UploadRequestOption } from 'rc-upload/lib/interface';
 import React from 'react';
+import type { RcFile, UploadFile, UploadProps } from '..';
 import Upload from '..';
 import mountTest from '../../../tests/shared/mountTest';
 import rtlTest from '../../../tests/shared/rtlTest';
@@ -11,7 +13,7 @@ import { resetWarned } from '../../_util/warning';
 import { getFileItem, isImageUrl, removeFileItem } from '../utils';
 import { setup, teardown } from './mock';
 
-globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+(globalThis as any).IS_REACT_ACT_ENVIRONMENT = true;
 
 describe('Upload', () => {
   mountTest(Upload);
@@ -21,16 +23,13 @@ describe('Upload', () => {
   afterEach(() => teardown());
 
   // Mock for rc-util raf
-  window.requestAnimationFrame = callback => {
-    window.setTimeout(callback, 16);
-  };
-  window.cancelAnimationFrame = id => {
-    window.clearTimeout(id);
-  };
+  window.requestAnimationFrame = callback => window.setTimeout(callback, 16);
+
+  window.cancelAnimationFrame = id => window.clearTimeout(id);
 
   // https://github.com/react-component/upload/issues/36
   it('should get refs inside Upload in componentDidMount', () => {
-    let ref;
+    let ref: React.ReactInstance;
     class App extends React.Component {
       componentDidMount() {
         ref = this.refs.input;
@@ -45,21 +44,21 @@ describe('Upload', () => {
       }
     }
     render(<App />);
-    expect(ref).toBeDefined();
+    expect(ref!).toBeDefined();
   });
 
   it('return promise in beforeUpload', async () => {
     jest.useFakeTimers();
     const data = jest.fn();
     const done = jest.fn();
-    const props = {
+    const props: UploadProps = {
       action: 'http://upload.com',
       beforeUpload: () =>
         new Promise(resolve => {
           setTimeout(() => resolve('success'), 100);
         }),
       data,
-      onChange: ({ file }) => {
+      onChange({ file }) {
         if (file.status !== 'uploading') {
           expect(data).toHaveBeenCalled();
           done();
@@ -72,10 +71,8 @@ describe('Upload', () => {
         <button type="button">upload</button>
       </Upload>,
     );
-    fireEvent.change(wrapper.querySelector('input'), {
-      target: {
-        files: [{ file: 'foo.png' }],
-      },
+    fireEvent.change(wrapper.querySelector('input')!, {
+      target: { files: [{ file: 'foo.png' }] },
     });
     act(() => {
       jest.runAllTimers();
@@ -94,9 +91,9 @@ describe('Upload', () => {
   it('beforeUpload can be falsy', async () => {
     jest.useFakeTimers();
     const done = jest.fn();
-    const props = {
+    const props: UploadProps = {
       action: 'http://upload.com',
-      beforeUpload: false,
+      beforeUpload: () => false,
       onChange: ({ file }) => {
         if (file.status !== 'uploading') {
           done();
@@ -110,10 +107,8 @@ describe('Upload', () => {
       </Upload>,
     );
 
-    fireEvent.change(wrapper.querySelector('input'), {
-      target: {
-        files: [{ file: 'foo.png' }],
-      },
+    fireEvent.change(wrapper.querySelector('input')!, {
+      target: { files: [{ file: 'foo.png' }] },
     });
     await act(async () => {
       for (let i = 0; i < 4; i += 1) {
@@ -129,13 +124,13 @@ describe('Upload', () => {
     jest.useFakeTimers();
     const done = jest.fn();
     const data = jest.fn();
-    const props = {
+    const props: UploadProps = {
       action: 'http://upload.com',
       beforeUpload: file =>
         new Promise(resolve => {
           setTimeout(() => {
             const result = file;
-            result.name = 'test.png';
+            (result as any).name = 'test.png';
             resolve(result);
           }, 100);
         }),
@@ -155,10 +150,8 @@ describe('Upload', () => {
       </Upload>,
     );
 
-    fireEvent.change(wrapper.querySelector('input'), {
-      target: {
-        files: [{ file: 'foo.png' }],
-      },
+    fireEvent.change(wrapper.querySelector('input')!, {
+      target: { files: [{ file: 'foo.png' }] },
     });
     act(() => {
       jest.runAllTimers();
@@ -185,7 +178,7 @@ describe('Upload', () => {
       type: 'image/png',
     });
     const data = jest.fn();
-    const props = {
+    const props: UploadProps = {
       action: 'http://upload.com',
       fileList,
       beforeUpload: () => false,
@@ -204,10 +197,8 @@ describe('Upload', () => {
       </Upload>,
     );
 
-    fireEvent.change(wrapper.querySelector('input'), {
-      target: {
-        files: [mockFile],
-      },
+    fireEvent.change(wrapper.querySelector('input')!, {
+      target: { files: [mockFile] },
     });
   });
 
@@ -229,7 +220,7 @@ describe('Upload', () => {
       </Upload>,
     );
 
-    fireEvent.change(wrapper.querySelector('input'), {
+    fireEvent.change(wrapper.querySelector('input')!, {
       target: {
         files: [{ file: 'foo.png' }],
       },
@@ -252,7 +243,7 @@ describe('Upload', () => {
 
   // https://github.com/ant-design/ant-design/issues/14298
   it('should not have id if upload children is null, avoid being triggered by label', () => {
-    const Demo = ({ children }) => (
+    const Demo: React.FC<{ children?: UploadProps['children'] }> = ({ children }) => (
       <Form>
         <Form.Item name="upload" label="Upload" valuePropName="fileList">
           <Upload>{children}</Upload>
@@ -273,7 +264,7 @@ describe('Upload', () => {
 
   // https://github.com/ant-design/ant-design/issues/16478
   it('should not have id if Upload is disabled, avoid being triggered by label', () => {
-    const Demo = ({ disabled }) => (
+    const Demo: React.FC<{ disabled?: UploadProps['disabled'] }> = ({ disabled }) => (
       <Form>
         <Form.Item name="upload" label="Upload" valuePropName="fileList">
           <Upload disabled={disabled}>
@@ -291,7 +282,7 @@ describe('Upload', () => {
 
   // https://github.com/ant-design/ant-design/issues/24197
   it('should not have id if upload.Dragger is disabled, avoid being triggered by label', () => {
-    const Demo = ({ disabled }) => (
+    const Demo: React.FC<{ disabled?: UploadProps['disabled'] }> = ({ disabled }) => (
       <Form>
         <Form.Item name="upload" label="Upload" valuePropName="fileList">
           <Upload.Dragger disabled={disabled}>
@@ -317,10 +308,10 @@ describe('Upload', () => {
         url: 'http://www.baidu.com/xxx.png',
       },
     ];
-    const ref = React.createRef();
+    const ref = React.createRef<any>();
     const { rerender } = render(<Upload ref={ref} />);
     expect(ref.current.fileList).toEqual([]);
-    rerender(<Upload ref={ref} fileList={fileList} />);
+    rerender(<Upload ref={ref} fileList={fileList as UploadProps['fileList']} />);
     act(() => {
       jest.runAllTimers();
     });
@@ -336,15 +327,15 @@ describe('Upload', () => {
         url: 'http://www.baidu.com/xxx.png',
       },
     ];
-    render(<Upload fileList={fileList} />);
-    fileList.forEach(file => {
+    render(<Upload fileList={fileList as UploadProps['fileList']} />);
+    (fileList as UploadProps['fileList'])?.forEach(file => {
       expect(file.uid).toBeDefined();
     });
   });
 
   describe('util', () => {
     it('should be able to get fileItem', () => {
-      const file = { uid: '-1', name: 'item.jpg' };
+      const file = { uid: '-1', name: 'item.jpg' } as RcFile;
       const fileList = [
         {
           uid: '-1',
@@ -412,9 +403,7 @@ describe('Upload', () => {
     });
 
     it('isImageUrl should work correctly when file.url is null', () => {
-      const file = {
-        url: null,
-      };
+      const file = { url: null } as unknown as UploadFile;
       expect(isImageUrl(file)).toBe(true);
     });
   });
@@ -432,10 +421,12 @@ describe('Upload', () => {
         },
       },
     ];
-    const { container: wrapper } = render(<Upload fileList={fileList} />);
+    const { container: wrapper } = render(
+      <Upload fileList={fileList as UploadProps['fileList']} />,
+    );
     const linkNode = wrapper.querySelector('a.ant-upload-list-item-name');
-    expect(linkNode.getAttribute('download')).toBe('image');
-    expect(linkNode.getAttribute('rel')).toBe('noopener');
+    expect(linkNode?.getAttribute('download')).toBe('image');
+    expect(linkNode?.getAttribute('rel')).toBe('noopener');
   });
 
   it('should support linkProps as json stringify', () => {
@@ -452,15 +443,17 @@ describe('Upload', () => {
         linkProps: linkPropsString,
       },
     ];
-    const { container: wrapper } = render(<Upload fileList={fileList} />);
+    const { container: wrapper } = render(
+      <Upload fileList={fileList as UploadProps['fileList']} />,
+    );
     const linkNode = wrapper.querySelector('a.ant-upload-list-item-name');
-    expect(linkNode.getAttribute('download')).toBe('image');
-    expect(linkNode.getAttribute('rel')).toBe('noopener');
+    expect(linkNode?.getAttribute('download')).toBe('image');
+    expect(linkNode?.getAttribute('rel')).toBe('noopener');
   });
 
   it('should not stop remove when return value of onRemove is false', done => {
     const mockRemove = jest.fn(() => false);
-    const props = {
+    const props: UploadProps = {
       onRemove: mockRemove,
       fileList: [
         {
@@ -474,12 +467,12 @@ describe('Upload', () => {
 
     const { container: wrapper } = render(<Upload {...props} />);
 
-    fireEvent.click(wrapper.querySelector('div.ant-upload-list-item .anticon-delete'));
+    fireEvent.click(wrapper.querySelector('div.ant-upload-list-item .anticon-delete')!);
 
     setTimeout(() => {
       expect(mockRemove).toHaveBeenCalled();
       expect(props.fileList).toHaveLength(1);
-      expect(props.fileList[0].status).toBe('done');
+      expect(props.fileList?.[0]?.status).toBe('done');
       done();
     });
   });
@@ -493,9 +486,9 @@ describe('Upload', () => {
       url: 'http://www.baidu.com/xxx.png',
     };
 
-    let removePromise;
+    let removePromise: (value: boolean | Promise<void | boolean>) => void;
 
-    const onRemove = () =>
+    const onRemove: UploadProps['onRemove'] = () =>
       new Promise(resolve => {
         expect(file.status).toBe('uploading');
         removePromise = resolve;
@@ -503,9 +496,13 @@ describe('Upload', () => {
     const onChange = jest.fn();
 
     const { container } = render(
-      <Upload fileList={[file]} onChange={onChange} onRemove={onRemove} />,
+      <Upload
+        fileList={[file] as UploadProps['fileList']}
+        onChange={onChange}
+        onRemove={onRemove}
+      />,
     );
-    fireEvent.click(container.querySelector('div.ant-upload-list-item .anticon-delete'));
+    fireEvent.click(container.querySelector('div.ant-upload-list-item .anticon-delete')!);
 
     // uploadStart is a batch work which we need wait for react act
     await act(async () => {
@@ -524,7 +521,7 @@ describe('Upload', () => {
 
   it('should not stop download when return use onDownload', done => {
     const mockRemove = jest.fn(() => false);
-    const props = {
+    const props: UploadProps = {
       onRemove: mockRemove,
       showUploadList: {
         showDownloadIcon: true,
@@ -541,30 +538,30 @@ describe('Upload', () => {
 
     const { container: wrapper } = render(<Upload {...props} onDownload={() => {}} />);
 
-    fireEvent.click(wrapper.querySelector('div.ant-upload-list-item .anticon-download'));
+    fireEvent.click(wrapper.querySelector('div.ant-upload-list-item .anticon-download')!);
 
     setTimeout(() => {
       expect(props.fileList).toHaveLength(1);
-      expect(props.fileList[0].status).toBe('done');
+      expect(props.fileList?.[0]?.status).toBe('done');
       done();
     });
   });
 
   // https://github.com/ant-design/ant-design/issues/14439
   it('should allow call abort function through upload instance', () => {
-    const ref = React.createRef();
+    const ref = React.createRef<any>();
     render(
       <Upload ref={ref}>
         <button type="button">upload</button>
       </Upload>,
     );
-    expect(typeof ref.current.upload.abort).toBe('function');
+    expect(typeof ref.current?.upload.abort).toBe('function');
   });
 
   it('correct dragCls when type is drag', () => {
     const fileList = [{ status: 'uploading', uid: 'file' }];
     const { container: wrapper } = render(
-      <Upload type="drag" fileList={fileList}>
+      <Upload type="drag" fileList={fileList as UploadProps['fileList']}>
         <button type="button">upload</button>
       </Upload>,
     );
@@ -573,20 +570,20 @@ describe('Upload', () => {
 
   it('return when targetItem is null', () => {
     const fileList = [{ uid: 'file' }];
-    const ref = React.createRef();
+    const ref = React.createRef<any>();
     render(
-      <Upload ref={ref} type="drag" fileList={fileList}>
+      <Upload ref={ref} type="drag" fileList={fileList as UploadProps['fileList']}>
         <button type="button">upload</button>
       </Upload>,
     );
-    expect(ref.current.onSuccess('', { uid: 'fileItem' })).toBe(undefined);
-    expect(ref.current.onProgress('', { uid: 'fileItem' })).toBe(undefined);
-    expect(ref.current.onError('', '', { uid: 'fileItem' })).toBe(undefined);
+    expect(ref.current?.onSuccess('', { uid: 'fileItem' })).toBe(undefined);
+    expect(ref.current?.onProgress('', { uid: 'fileItem' })).toBe(undefined);
+    expect(ref.current?.onError('', '', { uid: 'fileItem' })).toBe(undefined);
   });
 
   it('should replace file when targetItem already exists', () => {
     const fileList = [{ uid: 'file', name: 'file' }];
-    const ref = React.createRef();
+    const ref = React.createRef<any>();
     const { unmount } = render(
       <Upload ref={ref} defaultFileList={fileList}>
         <button type="button">upload</button>
@@ -599,7 +596,7 @@ describe('Upload', () => {
     };
 
     act(() => {
-      ref.current.onBatchStart([
+      ref.current?.onBatchStart([
         {
           file: newFile,
           parsedFile: newFile,
@@ -618,9 +615,9 @@ describe('Upload', () => {
 
   it('warning if set `value`', () => {
     resetWarned();
-
+    const value = { value: [] } as any;
     const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
-    render(<Upload value={[]} />);
+    render(<Upload {...value} />);
     expect(errorSpy).toHaveBeenCalledWith(
       'Warning: [antd: Upload] `value` is not a valid prop, do you mean `fileList`?',
     );
@@ -634,7 +631,9 @@ describe('Upload', () => {
       type: 'video/mp4',
       url: 'https://zos.alipayobjects.com/rmsportal/IQKRngzUuFzJzGzRJXUs.png',
     };
-    const { container: wrapper } = render(<Upload listType="picture-card" fileList={[file]} />);
+    const { container: wrapper } = render(
+      <Upload listType="picture-card" fileList={[file] as UploadProps['fileList']} />,
+    );
     expect(wrapper.querySelectorAll('img').length).toBe(0);
   });
 
@@ -643,8 +642,9 @@ describe('Upload', () => {
     const onClick = jest.fn();
     const onMouseEnter = jest.fn();
     const onMouseLeave = jest.fn();
+    const props = { onClick, onMouseEnter, onMouseLeave };
     const { container: wrapper } = render(
-      <Upload onClick={onClick} onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
+      <Upload {...props}>
         <button type="button">upload</button>
       </Upload>,
     );
@@ -672,10 +672,10 @@ describe('Upload', () => {
       options.onSuccess({}, { ...options.file, url });
     });
 
-    const Demo = () => {
-      const [fileList, setFileList] = React.useState([]);
+    const Demo: React.FC = () => {
+      const [fileList, setFileList] = React.useState<UploadFile[]>([]);
 
-      const onChange = async e => {
+      const onChange: UploadProps['onChange'] = async e => {
         const newFileList = Array.isArray(e) ? e : e.fileList;
         setFileList(newFileList);
         const file = newFileList[0];
@@ -714,10 +714,8 @@ describe('Upload', () => {
 
     const { container: wrapper } = render(<Demo />);
 
-    fireEvent.change(wrapper.querySelector('input'), {
-      target: {
-        files: [{ file: 'foo.png' }],
-      },
+    fireEvent.change(wrapper.querySelector('input')!, {
+      target: { files: [{ file: 'foo.png' }] },
     });
 
     await act(async () => {
@@ -760,13 +758,9 @@ describe('Upload', () => {
         </Upload>,
       );
 
-      fireEvent.change(wrapper.querySelector('input'), {
+      fireEvent.change(wrapper.querySelector('input')!, {
         target: {
-          files: [
-            new File(['foo'], 'foo.png', {
-              type: 'image/png',
-            }),
-          ],
+          files: [new File(['foo'], 'foo.png', { type: 'image/png' })],
         },
       });
 
@@ -802,15 +796,13 @@ describe('Upload', () => {
         </Upload>,
       );
 
-      fireEvent.change(wrapper.querySelector('input'), {
+      fireEvent.change(wrapper.querySelector('input')!, {
         target: {
           files: [
             new File(['foo'], 'foo.png', {
               type: 'image/png',
             }),
-            new File(['invisible'], 'invisible.png', {
-              type: 'image/png',
-            }),
+            new File(['invisible'], 'invisible.png', { type: 'image/png' }),
           ],
         },
       });
@@ -830,21 +822,17 @@ describe('Upload', () => {
   });
 
   it('auto fill file uid', () => {
-    const fileList = [
-      {
-        name: 'bamboo.png',
-      },
-    ];
+    const fileList = [{ name: 'bamboo.png' }];
 
-    expect(fileList[0].uid).toBeFalsy();
+    expect((fileList[0] as any).uid).toBeFalsy();
 
     render(
-      <Upload fileList={fileList}>
+      <Upload fileList={fileList as UploadProps['fileList']}>
         <button type="button">upload</button>
       </Upload>,
     );
 
-    expect(fileList[0].uid).toBeTruthy();
+    expect((fileList[0] as any).uid).toBeTruthy();
   });
 
   it('Proxy should support deepClone', async () => {
@@ -856,13 +844,9 @@ describe('Upload', () => {
       </Upload>,
     );
 
-    fireEvent.change(wrapper.querySelector('input'), {
+    fireEvent.change(wrapper.querySelector('input')!, {
       target: {
-        files: [
-          new File(['foo'], 'foo.png', {
-            type: 'image/png',
-          }),
-        ],
+        files: [new File(['foo'], 'foo.png', { type: 'image/png' })],
       },
     });
 
@@ -891,9 +875,11 @@ describe('Upload', () => {
       },
     ];
 
-    const frozenFileList = fileList.map(file => Object.freeze(file));
+    const frozenFileList = fileList.map(Object.freeze);
 
-    const { container: wrapper } = render(<Upload fileList={frozenFileList} />);
+    const { container: wrapper } = render(
+      <Upload fileList={frozenFileList as unknown as UploadProps['fileList']} />,
+    );
     const rmBtn = wrapper.querySelectorAll('.ant-upload-list-item-action');
     fireEvent.click(rmBtn[rmBtn.length - 1]);
 
@@ -915,10 +901,8 @@ describe('Upload', () => {
     };
 
     const spyIE = jest.spyOn(global, 'File').mockImplementationOnce(fileConstructor);
-    fireEvent.change(container.querySelector('input'), {
-      target: {
-        files: [{ file: 'foo.png' }],
-      },
+    fireEvent.change(container.querySelector('input')!, {
+      target: { files: [{ file: 'foo.png' }] },
     });
 
     // React 18 is async now
@@ -951,7 +935,7 @@ describe('Upload', () => {
       jest.runAllTimers();
     });
 
-    fireEvent.animationEnd(container.querySelector('.ant-upload-select'));
+    fireEvent.animationEnd(container.querySelector('.ant-upload-select')!);
     expect(container.querySelector('.ant-upload-select')).not.toHaveClass(
       'ant-upload-animate-inline-leave-start',
     );
@@ -969,15 +953,11 @@ describe('Upload', () => {
 
   // https://github.com/ant-design/ant-design/issues/36869
   it('Prevent auto batch', async () => {
-    const mockFile1 = new File(['bamboo'], 'bamboo.png', {
-      type: 'image/png',
-    });
-    const mockFile2 = new File(['light'], 'light.png', {
-      type: 'image/png',
-    });
+    const mockFile1 = new File(['bamboo'], 'bamboo.png', { type: 'image/png' });
+    const mockFile2 = new File(['light'], 'light.png', { type: 'image/png' });
 
-    let info1;
-    let info2;
+    let info1: UploadRequestOption;
+    let info2: UploadRequestOption;
 
     const onChange = jest.fn();
     const { container } = render(
@@ -993,10 +973,8 @@ describe('Upload', () => {
       />,
     );
 
-    fireEvent.change(container.querySelector('input'), {
-      target: {
-        files: [mockFile1, mockFile2],
-      },
+    fireEvent.change(container.querySelector('input')!, {
+      target: { files: [mockFile1, mockFile2] },
     });
 
     // React 18 is async now
@@ -1007,8 +985,8 @@ describe('Upload', () => {
 
     // Processing
     act(() => {
-      info1.onProgress({ percent: 10 }, mockFile1);
-      info2.onProgress({ percent: 20 }, mockFile2);
+      (info1?.onProgress as any)?.({ percent: 10 }, mockFile1);
+      (info2?.onProgress as any)?.({ percent: 20 }, mockFile2);
     });
 
     expect(onChange).toHaveBeenCalledWith(
diff --git a/components/upload/__tests__/uploadlist.test.js b/components/upload/__tests__/uploadlist.test.tsx
similarity index 83%
rename from components/upload/__tests__/uploadlist.test.js
rename to components/upload/__tests__/uploadlist.test.tsx
index 422c82a21b..3cd1995614 100644
--- a/components/upload/__tests__/uploadlist.test.js
+++ b/components/upload/__tests__/uploadlist.test.tsx
@@ -6,8 +6,11 @@ import UploadList from '../UploadList';
 import { previewImage } from '../utils';
 import { setup, teardown } from './mock';
 import { errorRequest, successRequest } from './requests';
+import type { FormInstance } from '../../form';
+import type { UploadFile, UploadProps } from '..';
+import type { UploadListProps, UploadLocale } from '../interface';
 
-const fileList = [
+const fileList: UploadProps['fileList'] = [
   {
     uid: '-1',
     name: 'xxx.png',
@@ -26,12 +29,8 @@ const fileList = [
 
 describe('Upload List', () => {
   // Mock for rc-util raf
-  window.requestAnimationFrame = callback => {
-    window.setTimeout(callback, 16);
-  };
-  window.cancelAnimationFrame = id => {
-    window.clearTimeout(id);
-  };
+  window.requestAnimationFrame = callback => window.setTimeout(callback, 16);
+  window.cancelAnimationFrame = id => window.clearTimeout(id);
 
   // jsdom not support `createObjectURL` yet. Let's handle this.
   const originCreateObjectURL = window.URL.createObjectURL;
@@ -39,15 +38,15 @@ describe('Upload List', () => {
 
   // Mock dom
   let size = { width: 0, height: 0 };
-  function setSize(width, height) {
+  function setSize(width: number, height: number) {
     size = { width, height };
   }
   const mockWidthGet = jest.spyOn(Image.prototype, 'width', 'get');
   const mockHeightGet = jest.spyOn(Image.prototype, 'height', 'get');
   const mockSrcSet = jest.spyOn(Image.prototype, 'src', 'set');
 
-  let drawImageCallback = null;
-  function hookDrawImageCall(callback) {
+  let drawImageCallback: jest.Mock | null = null;
+  function hookDrawImageCall(callback: jest.Mock) {
     drawImageCallback = callback;
   }
   const mockGetCanvasContext = jest.spyOn(HTMLCanvasElement.prototype, 'getContext');
@@ -61,9 +60,9 @@ describe('Upload List', () => {
     drawImageCallback = null;
   });
 
-  let open;
+  let open: jest.MockInstance<any, any[]>;
   beforeAll(() => {
-    open = jest.spyOn(window, 'open').mockImplementation(() => {});
+    open = jest.spyOn(window, 'open').mockImplementation(() => null);
     mockWidthGet.mockImplementation(() => size.width);
     mockHeightGet.mockImplementation(() => size.height);
     mockSrcSet.mockImplementation(function fn() {
@@ -73,10 +72,12 @@ describe('Upload List', () => {
     });
 
     mockGetCanvasContext.mockReturnValue({
-      drawImage: (...args) => {
-        if (drawImageCallback) drawImageCallback(...args);
+      drawImage(...args) {
+        if (drawImageCallback) {
+          drawImageCallback(...args);
+        }
       },
-    });
+    } as RenderingContext);
     mockToDataURL.mockReturnValue('data:image/png;base64,');
   });
 
@@ -127,13 +128,13 @@ describe('Upload List', () => {
       },
     ];
     const { container, unmount } = render(
-      <Upload defaultFileList={list}>
+      <Upload defaultFileList={list as UploadProps['defaultFileList']}>
         <button type="button">upload</button>
       </Upload>,
     );
     expect(container.querySelectorAll('.ant-upload-list-item').length).toBe(2);
     fireEvent.click(
-      container.querySelectorAll('.ant-upload-list-item')[0].querySelector('.anticon-delete'),
+      container.querySelectorAll('.ant-upload-list-item')[0].querySelector('.anticon-delete')!,
     );
 
     // Upload use Promise to wait remove action. Let's wait this also.
@@ -152,7 +153,7 @@ describe('Upload List', () => {
     // Progress motion to done
     // React 17 will reach deadline, so we need check if already done
     if (container.querySelector('.ant-upload-animate-leave-active')) {
-      fireEvent.animationEnd(container.querySelector('.ant-upload-animate-leave-active'));
+      fireEvent.animationEnd(container.querySelector('.ant-upload-animate-leave-active')!);
     }
     act(() => {
       jest.runAllTimers();
@@ -168,9 +169,9 @@ describe('Upload List', () => {
   it('should be uploading when upload a file', async () => {
     jest.useFakeTimers();
     const done = jest.fn();
-    let wrapper;
-    let latestFileList = null;
-    const onChange = async ({ file, fileList: eventFileList }) => {
+    let wrapper: ReturnType<typeof render>;
+    let latestFileList: UploadFile<any>[] | null = null;
+    const onChange: UploadProps['onChange'] = async ({ file, fileList: eventFileList }) => {
       expect(eventFileList === latestFileList).toBeFalsy();
       if (file.status === 'uploading') {
         await Promise.resolve();
@@ -191,10 +192,8 @@ describe('Upload List', () => {
         <button type="button">upload</button>
       </Upload>,
     );
-    fireEvent.change(wrapper.container.querySelector('input'), {
-      target: {
-        files: [{ name: 'foo.png' }],
-      },
+    fireEvent.change(wrapper.container.querySelector('input')!, {
+      target: { files: [{ name: 'foo.png' }] },
     });
     await act(async () => {
       await Promise.resolve();
@@ -228,10 +227,8 @@ describe('Upload List', () => {
         <button type="button">upload</button>
       </Upload>,
     );
-    fireEvent.change(wrapper.querySelector('input'), {
-      target: {
-        files: [{ name: 'foo.png' }],
-      },
+    fireEvent.change(wrapper.querySelector('input')!, {
+      target: { files: [{ name: 'foo.png' }] },
     });
 
     await act(async () => {
@@ -245,13 +242,11 @@ describe('Upload List', () => {
 
     expect(onChange).toHaveBeenLastCalledWith(
       expect.objectContaining({
-        file: expect.objectContaining({
-          status: 'error',
-        }),
+        file: expect.objectContaining({ status: 'error' }),
       }),
     );
     if (wrapper.querySelector('.ant-upload-animate-appear-active')) {
-      fireEvent.animationEnd(wrapper.querySelector('.ant-upload-animate-appear-active'));
+      fireEvent.animationEnd(wrapper.querySelector('.ant-upload-animate-appear-active')!);
     }
 
     act(() => {
@@ -260,7 +255,7 @@ describe('Upload List', () => {
     expect(wrapper.firstChild).toMatchSnapshot();
 
     // Error message
-    fireEvent.mouseEnter(wrapper.querySelector('.ant-upload-list-item'));
+    fireEvent.mouseEnter(wrapper.querySelector('.ant-upload-list-item')!);
 
     act(() => {
       jest.runAllTimers();
@@ -274,7 +269,7 @@ describe('Upload List', () => {
 
   it('does concat fileList when beforeUpload returns false', async () => {
     const handleChange = jest.fn();
-    const ref = React.createRef();
+    const ref = React.createRef<any>();
     const { container: wrapper, unmount } = render(
       <Upload
         ref={ref}
@@ -286,10 +281,8 @@ describe('Upload List', () => {
         <button type="button">upload</button>
       </Upload>,
     );
-    fireEvent.change(wrapper.querySelector('input'), {
-      target: {
-        files: [{ name: 'foo.png' }],
-      },
+    fireEvent.change(wrapper.querySelector('input')!, {
+      target: { files: [{ name: 'foo.png' }] },
     });
 
     await sleep();
@@ -301,17 +294,21 @@ describe('Upload List', () => {
   });
 
   it('In the case of listType=picture, the error status does not show the download.', () => {
-    global.testName =
+    (global as any).testName =
       'In the case of listType=picture, the error status does not show the download.';
     const file = { status: 'error', uid: 'file' };
     const { container: wrapper, unmount } = render(
-      <Upload listType="picture" fileList={[file]} showUploadList={{ showDownloadIcon: true }}>
+      <Upload
+        listType="picture"
+        fileList={[file] as UploadProps['fileList']}
+        showUploadList={{ showDownloadIcon: true }}
+      >
         <button type="button">upload</button>
       </Upload>,
     );
 
     // Has error item className
-    fireEvent.mouseEnter(wrapper.querySelector('.ant-upload-list-item-error'));
+    fireEvent.mouseEnter(wrapper.querySelector('.ant-upload-list-item-error')!);
 
     expect(wrapper.querySelectorAll('div.ant-upload-list-item i.anticon-download').length).toBe(0);
 
@@ -319,11 +316,15 @@ describe('Upload List', () => {
   });
 
   it('In the case of listType=picture-card, the error status does not show the download.', () => {
-    global.testName =
+    (global as any).testName =
       'In the case of listType=picture-card, the error status does not show the download.';
     const file = { status: 'error', uid: 'file' };
     const { container: wrapper, unmount } = render(
-      <Upload listType="picture-card" fileList={[file]} showUploadList={{ showDownloadIcon: true }}>
+      <Upload
+        listType="picture-card"
+        fileList={[file] as UploadProps['fileList']}
+        showUploadList={{ showDownloadIcon: true }}
+      >
         <button type="button">upload</button>
       </Upload>,
     );
@@ -335,7 +336,11 @@ describe('Upload List', () => {
   it('In the case of listType=text, the error status does not show the download.', () => {
     const file = { status: 'error', uid: 'file' };
     const { container: wrapper, unmount } = render(
-      <Upload listType="text" fileList={[file]} showUploadList={{ showDownloadIcon: true }}>
+      <Upload
+        listType="text"
+        fileList={[file] as UploadProps['fileList']}
+        showUploadList={{ showDownloadIcon: true }}
+      >
         <button type="button">upload</button>
       </Upload>,
     );
@@ -443,15 +448,15 @@ describe('Upload List', () => {
         hookDrawImageCall(onDrawImage);
 
         const handlePreview = jest.fn();
-        const newFileList = [...fileList];
+        const newFileList: UploadProps['fileList'] = [...fileList];
         const newFile = {
           ...fileList[0],
           uid: '-3',
           originFileObj: new File([], 'xxx.png', { type: 'image/png' }),
         };
         delete newFile.thumbUrl;
-        newFileList.push(newFile);
-        const ref = React.createRef();
+        newFileList.push(newFile as UploadFile);
+        const ref = React.createRef<any>();
         const { unmount } = render(
           <Upload
             ref={ref}
@@ -469,12 +474,7 @@ describe('Upload List', () => {
 
         // Offset check
         const [, offsetX, offsetY] = onDrawImage.mock.calls[0];
-        if (width > height) {
-          expect(offsetX === 0).toBeTruthy();
-        } else {
-          expect(offsetY === 0).toBeTruthy();
-        }
-
+        expect((width > height ? offsetX : offsetY) === 0).toBeTruthy();
         unmount();
       });
     });
@@ -549,7 +549,7 @@ describe('Upload List', () => {
     ];
 
     const { container: wrapper, unmount } = render(
-      <Upload listType="picture" defaultFileList={list}>
+      <Upload listType="picture" defaultFileList={list as UploadProps['defaultFileList']}>
         <button type="button">upload</button>
       </Upload>,
     );
@@ -564,12 +564,9 @@ describe('Upload List', () => {
     const { unmount } = render(
       <Upload
         listType="picture"
-        defaultFileList={[
-          {
-            name: 'bamboo.png',
-            status: 'uploading',
-          },
-        ]}
+        defaultFileList={
+          [{ name: 'bamboo.png', status: 'uploading' }] as UploadProps['defaultFileList']
+        }
       />,
     );
 
@@ -601,7 +598,7 @@ describe('Upload List', () => {
     const { container: wrapper, unmount } = render(
       <Upload
         listType="picture"
-        defaultFileList={list}
+        defaultFileList={list as UploadProps['defaultFileList']}
         showUploadList={{
           showRemoveIcon: false,
           showPreviewIcon: false,
@@ -668,7 +665,7 @@ describe('Upload List', () => {
     const { container: wrapper, unmount } = render(
       <Upload
         listType="picture"
-        defaultFileList={list}
+        defaultFileList={list as UploadProps['defaultFileList']}
         showUploadList={{
           showRemoveIcon: true,
           showDownloadIcon: true,
@@ -687,7 +684,7 @@ describe('Upload List', () => {
     const { container: wrapper2, unmount: unmount2 } = render(
       <Upload
         listType="picture"
-        defaultFileList={list}
+        defaultFileList={list as UploadProps['defaultFileList']}
         showUploadList={{
           showRemoveIcon: true,
           showDownloadIcon: true,
@@ -706,9 +703,9 @@ describe('Upload List', () => {
 
   // https://github.com/ant-design/ant-design/issues/7762
   it('work with form validation', async () => {
-    let formRef;
+    let formRef: FormInstance;
 
-    const TestForm = () => {
+    const TestForm: React.FC = () => {
       const [form] = Form.useForm();
       formRef = form;
 
@@ -721,7 +718,7 @@ describe('Upload List', () => {
             rules={[
               {
                 required: true,
-                validator: (rule, value, callback) => {
+                validator(_, value, callback) {
                   if (!value || value.length === 0) {
                     callback('file required');
                   } else {
@@ -741,43 +738,44 @@ describe('Upload List', () => {
 
     const { container, unmount } = render(<TestForm />);
 
-    fireEvent.submit(container.querySelector('form'));
+    fireEvent.submit(container.querySelector('form')!);
     await sleep();
-    expect(formRef.getFieldError(['file'])).toEqual(['file required']);
+    expect(formRef!.getFieldError(['file'])).toEqual(['file required']);
 
-    fireEvent.change(container.querySelector('input'), {
-      target: {
-        files: [{ name: 'foo.png' }],
-      },
+    fireEvent.change(container.querySelector('input')!, {
+      target: { files: [{ name: 'foo.png' }] },
     });
 
-    fireEvent.submit(container.querySelector('form'));
+    fireEvent.submit(container.querySelector('form')!);
     await sleep();
-    expect(formRef.getFieldError(['file'])).toEqual([]);
+    expect(formRef!.getFieldError(['file'])).toEqual([]);
 
     unmount();
   });
 
   it('return when prop onPreview not exists', () => {
-    const ref = React.createRef();
-    const { unmount } = render(<UploadList ref={ref} />);
-    expect(ref.current.handlePreview()).toBe(undefined);
+    const ref = React.createRef<any>();
+    const { unmount } = render(
+      <UploadList ref={ref} locale={undefined as unknown as UploadLocale} />,
+    );
+    expect(ref.current?.handlePreview?.()).toBe(undefined);
     unmount();
   });
 
   it('return when prop onDownload not exists', () => {
     const file = new File([''], 'test.txt', { type: 'text/plain' });
     const items = [{ uid: 'upload-list-item', url: '' }];
-    const ref = React.createRef();
+    const ref = React.createRef<any>();
+    const showUploadList = { showUploadList: { showDownloadIcon: true } };
     const { unmount } = render(
       <UploadList
         ref={ref}
-        items={items}
+        items={items as UploadListProps['items']}
         locale={{ downloadFile: '' }}
-        showUploadList={{ showDownloadIcon: true }}
+        {...showUploadList}
       />,
     );
-    expect(ref.current.handleDownload(file)).toBe(undefined);
+    expect(ref.current?.handleDownload?.(file)).toBe(undefined);
     unmount();
   });
 
@@ -786,21 +784,19 @@ describe('Upload List', () => {
     const previewFunc = jest.fn(previewImage);
     const { container: wrapper, unmount } = render(
       <Upload
-        fileList={items}
+        fileList={items as UploadProps['fileList']}
         previewFile={previewFunc}
         locale={{ previewFile: '' }}
         listType="picture-card"
       />,
     );
 
-    fireEvent.change(wrapper.querySelector('input'), {
-      target: {
-        files: [{ name: 'foo.png' }],
-      },
+    fireEvent.change(wrapper.querySelector('input')!, {
+      target: { files: [{ name: 'foo.png' }] },
     });
 
     await sleep();
-    expect(wrapper.querySelector('.ant-upload-list-item-thumbnail').getAttribute('href')).toBe(
+    expect(wrapper.querySelector('.ant-upload-list-item-thumbnail')?.getAttribute('href')).toBe(
       null,
     );
 
@@ -814,7 +810,7 @@ describe('Upload List', () => {
       <UploadList
         showDownloadIcon
         listType="picture-card"
-        items={items}
+        items={items as UploadListProps['items']}
         onDownload={downloadFunc}
         locale={{ downloadFile: 'Download file' }}
       />,
@@ -822,8 +818,8 @@ describe('Upload List', () => {
 
     // Not throw
     const btn = wrapper.querySelector('.ant-btn');
-    expect(btn.getAttribute('title')).toBe('Download file');
-    fireEvent.click(btn);
+    expect(btn?.getAttribute('title')).toBe('Download file');
+    fireEvent.click(btn!);
     expect(downloadFunc).toHaveBeenCalled();
 
     unmount();
@@ -832,7 +828,11 @@ describe('Upload List', () => {
   it('extname should work correctly when url not exists', () => {
     const items = [{ uid: 'upload-list-item', url: '' }];
     const { container: wrapper, unmount } = render(
-      <UploadList listType="picture-card" items={items} locale={{ previewFile: '' }} />,
+      <UploadList
+        listType="picture-card"
+        items={items as UploadListProps['items']}
+        locale={{ previewFile: '' }}
+      />,
     );
     expect(wrapper.querySelectorAll('.ant-upload-list-item-thumbnail').length).toBe(1);
     unmount();
@@ -848,21 +848,25 @@ describe('Upload List', () => {
           unmount();
           done();
         }}
-        items={items}
+        items={items as UploadListProps['items']}
         locale={{ downloadFile: '' }}
         showDownloadIcon
       />,
     );
-    fireEvent.click(wrapper.querySelector('div.ant-upload-list-item .anticon-download'));
+    fireEvent.click(wrapper.querySelector('div.ant-upload-list-item .anticon-download')!);
   });
 
   it('when picture-card is loading, icon should render correctly', () => {
     const items = [{ status: 'uploading', uid: 'upload-list-item' }];
     const { container: wrapper, unmount } = render(
-      <UploadList listType="picture-card" items={items} locale={{ uploading: 'uploading' }} />,
+      <UploadList
+        listType="picture-card"
+        items={items as UploadListProps['items']}
+        locale={{ uploading: 'uploading' }}
+      />,
     );
-    expect(wrapper.querySelectorAll('.ant-upload-list-item-thumbnail').length).toBe(1);
-    expect(wrapper.querySelector('.ant-upload-list-item-thumbnail').textContent).toBe('uploading');
+    expect(wrapper.querySelectorAll('.ant-upload-list-item-thumbnail')?.length).toBe(1);
+    expect(wrapper.querySelector('.ant-upload-list-item-thumbnail')?.textContent).toBe('uploading');
 
     unmount();
   });
@@ -877,24 +881,24 @@ describe('Upload List', () => {
     } = render(
       <UploadList
         listType="picture-card"
-        items={items}
+        items={items as UploadListProps['items']}
         locale={{ uploading: 'uploading' }}
         onPreview={onPreview}
       />,
     );
-    fireEvent.click(wrapper.querySelector('.ant-upload-list-item-thumbnail'));
+    fireEvent.click(wrapper.querySelector('.ant-upload-list-item-thumbnail')!);
     expect(onPreview).toHaveBeenCalled();
-    fireEvent.click(wrapper.querySelector('.ant-upload-list-item-name'));
+    fireEvent.click(wrapper.querySelector('.ant-upload-list-item-name')!);
     expect(onPreview).toHaveBeenCalled();
     rerender(
       <UploadList
         listType="picture-card"
-        items={[{ thumbUrl: 'thumbUrl', uid: 'upload-list-item' }]}
+        items={[{ thumbUrl: 'thumbUrl', uid: 'upload-list-item' }] as UploadListProps['items']}
         locale={{ uploading: 'uploading' }}
         onPreview={onPreview}
       />,
     );
-    fireEvent.click(wrapper.querySelector('.ant-upload-list-item-name'));
+    fireEvent.click(wrapper.querySelector('.ant-upload-list-item-name')!);
     expect(onPreview).toHaveBeenCalled();
 
     unmount();
@@ -909,11 +913,7 @@ describe('Upload List', () => {
 
     const { unmount } = render(
       <Upload
-        fileList={[
-          {
-            originFileObj: mockFile,
-          },
-        ]}
+        fileList={[{ originFileObj: mockFile }] as UploadProps['fileList']}
         previewFile={previewFunc}
         locale={{ uploading: 'uploading' }}
         listType="picture-card"
@@ -942,7 +942,7 @@ describe('Upload List', () => {
 
     const { unmount } = render(
       <Upload
-        fileList={[{ originFileObj: mockFile }]}
+        fileList={[{ originFileObj: mockFile }] as UploadProps['fileList']}
         previewFile={previewFunc}
         locale={{ uploading: 'uploading' }}
         listType="picture-card"
@@ -966,11 +966,7 @@ describe('Upload List', () => {
 
     const { unmount } = render(
       <Upload
-        fileList={[
-          {
-            originFileObj: mockFile,
-          },
-        ]}
+        fileList={[{ originFileObj: mockFile }] as UploadProps['fileList']}
         previewFile={previewFunc}
         locale={{ uploading: 'uploading' }}
         listType="picture-card"
@@ -988,18 +984,23 @@ describe('Upload List', () => {
   });
 
   describe('customize previewFile support', () => {
-    function test(name, renderInstance) {
+    function test(name: string, renderInstance: () => File | Blob) {
       it(name, async () => {
         const mockThumbnail = 'mock-image';
         const previewFile = jest.fn(() => Promise.resolve(mockThumbnail));
         const file = {
-          ...fileList[0],
+          ...fileList?.[0],
           originFileObj: renderInstance(),
         };
         delete file.thumbUrl;
         const ref = React.createRef();
         const { container: wrapper, unmount } = render(
-          <Upload ref={ref} listType="picture" defaultFileList={[file]} previewFile={previewFile}>
+          <Upload
+            ref={ref}
+            listType="picture"
+            defaultFileList={[file] as UploadProps['defaultFileList']}
+            previewFile={previewFile}
+          >
             <button type="button">button</button>
           </Upload>,
         );
@@ -1007,7 +1008,7 @@ describe('Upload List', () => {
         await sleep(100);
 
         expect(
-          wrapper.querySelector('.ant-upload-list-item-thumbnail img').getAttribute('src'),
+          wrapper.querySelector('.ant-upload-list-item-thumbnail img')?.getAttribute('src'),
         ).toBe(mockThumbnail);
 
         unmount();
@@ -1032,7 +1033,7 @@ describe('Upload List', () => {
     ];
     it('should not render <img /> when file.thumbUrl use "!" as separator', () => {
       const { container: wrapper, unmount } = render(
-        <Upload listType="picture-card" fileList={list}>
+        <Upload listType="picture-card" fileList={list as UploadProps['fileList']}>
           <button type="button">button</button>
         </Upload>,
       );
@@ -1044,7 +1045,11 @@ describe('Upload List', () => {
     it('should render <img /> when custom imageUrl return true', () => {
       const isImageUrl = jest.fn(() => true);
       const { container: wrapper, unmount } = render(
-        <Upload listType="picture-card" fileList={list} isImageUrl={isImageUrl}>
+        <Upload
+          listType="picture-card"
+          fileList={list as UploadProps['fileList']}
+          isImageUrl={isImageUrl}
+        >
           <button type="button">button</button>
         </Upload>,
       );
@@ -1057,7 +1062,11 @@ describe('Upload List', () => {
     it('should not render <img /> when custom imageUrl return false', () => {
       const isImageUrl = jest.fn(() => false);
       const { container: wrapper, unmount } = render(
-        <Upload listType="picture-card" fileList={list} isImageUrl={isImageUrl}>
+        <Upload
+          listType="picture-card"
+          fileList={list as UploadProps['fileList']}
+          isImageUrl={isImageUrl}
+        >
           <button type="button">button</button>
         </Upload>,
       );
@@ -1090,25 +1099,26 @@ describe('Upload List', () => {
     }
 
     it('should render <img /> when upload non-image file and configure thumbUrl in onChange', async () => {
-      let wrapper;
-      const onChange = jest.fn(({ fileList: files }) => {
-        const newFileList = files.map(item => ({
-          ...item,
-          thumbUrl: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
-        }));
+      const thumbUrl =
+        'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png';
+      let wrapper: ReturnType<typeof render>;
+      const onChange = jest.fn<void, Record<'fileList', UploadProps['fileList']>[]>(
+        ({ fileList: files }) => {
+          const newFileList = files?.map<UploadFile<any>>(item => ({ ...item, thumbUrl }));
 
-        wrapper.rerender(
-          <Upload
-            action="http://jsonplaceholder.typicode.com/posts/"
-            listType="picture-card"
-            fileList={newFileList}
-            onChange={onChange}
-            customRequest={successRequest}
-          >
-            <button type="button">upload</button>
-          </Upload>,
-        );
-      });
+          wrapper.rerender(
+            <Upload
+              action="http://jsonplaceholder.typicode.com/posts/"
+              listType="picture-card"
+              fileList={newFileList}
+              onChange={onChange}
+              customRequest={successRequest}
+            >
+              <button type="button">upload</button>
+            </Upload>,
+          );
+        },
+      );
 
       wrapper = render(
         <Upload
@@ -1125,7 +1135,7 @@ describe('Upload List', () => {
       expect(imgNode.length).toBe(0);
 
       // Simulate change is a timeout change
-      fireEvent.change(wrapper.container.querySelector('input'), {
+      fireEvent.change(wrapper.container.querySelector('input')!, {
         target: { files: [nonImageFile] },
       });
 
@@ -1153,10 +1163,10 @@ describe('Upload List', () => {
     });
 
     it('should not render <img /> when upload non-image file without thumbUrl in onChange', done => {
-      global.testName =
+      (global as any).testName =
         'should not render <img /> when upload non-image file without thumbUrl in onChange';
-      let wrapper;
-      const onChange = async ({ fileList: files }) => {
+      let wrapper: ReturnType<typeof render>;
+      const onChange: UploadProps['onChange'] = async ({ fileList: files }) => {
         wrapper.rerender(
           <Upload
             action="http://jsonplaceholder.typicode.com/posts/"
@@ -1188,18 +1198,18 @@ describe('Upload List', () => {
       );
       const imgNode = wrapper.container.querySelectorAll('.ant-upload-list-item-thumbnail img');
       expect(imgNode.length).toBe(0);
-      fireEvent.change(wrapper.container.querySelector('input'), {
+      fireEvent.change(wrapper.container.querySelector('input')!, {
         target: { files: [nonImageFile] },
       });
     });
   });
 
   it('[deprecated] should support transformFile', done => {
-    let wrapper;
-    let lastFile;
+    let wrapper: ReturnType<typeof render>;
+    let lastFile: UploadFile;
 
     const handleTransformFile = jest.fn();
-    const onChange = ({ file }) => {
+    const onChange: UploadProps['onChange'] = ({ file }) => {
       if (file.status === 'done') {
         expect(file).not.toBe(lastFile);
         expect(handleTransformFile).toHaveBeenCalled();
@@ -1219,10 +1229,8 @@ describe('Upload List', () => {
         <button type="button">upload</button>
       </Upload>,
     );
-    fireEvent.change(wrapper.container.querySelector('input'), {
-      target: {
-        files: [{ name: 'foo.png' }],
-      },
+    fireEvent.change(wrapper.container.querySelector('input')!, {
+      target: { files: [{ name: 'foo.png' }] },
     });
   });
 
@@ -1275,10 +1283,10 @@ describe('Upload List', () => {
   it('multiple file upload should keep the internal fileList async', async () => {
     jest.useFakeTimers();
 
-    const uploadRef = React.createRef();
+    const uploadRef = React.createRef<any>();
 
-    const MyUpload = () => {
-      const [testFileList, setTestFileList] = React.useState([]);
+    const MyUpload: React.FC = () => {
+      const [testFileList, setTestFileList] = React.useState<UploadFile[]>([]);
 
       return (
         <Upload
@@ -1304,12 +1312,8 @@ describe('Upload List', () => {
       uploadRef.current.onBatchStart(
         fileNames.map(fileName => {
           const file = new File([], fileName);
-          file.uid = fileName;
-
-          return {
-            file,
-            parsedFile: file,
-          };
+          (file as any).uid = fileName;
+          return { file, parsedFile: file };
         }),
       );
     });
@@ -1330,7 +1334,7 @@ describe('Upload List', () => {
     const onDownload = jest.fn();
     const onRemove = jest.fn();
     const onPreview = jest.fn();
-    const itemRender = (originNode, file, currFileList, actions) => {
+    const itemRender: UploadListProps['itemRender'] = (_, file, currFileList, actions) => {
       const { name, status, uid, url } = file;
       const index = currFileList.indexOf(file);
       return (
@@ -1381,10 +1385,8 @@ describe('Upload List', () => {
     const { container: wrapper, unmount } = render(<Upload beforeUpload={beforeUpload} />);
 
     await act(() => {
-      fireEvent.change(wrapper.querySelector('input'), {
-        target: {
-          files: [{ file: 'foo.png' }],
-        },
+      fireEvent.change(wrapper.querySelector('input')!, {
+        target: { files: [{ file: 'foo.png' }] },
       });
     });
 
@@ -1397,10 +1399,12 @@ describe('Upload List', () => {
   });
 
   it('Not crash when fileList is null', () => {
-    const defaultWrapper = render(<Upload defaultFileList={null} />);
+    const defaultWrapper = render(
+      <Upload defaultFileList={null as unknown as UploadProps['defaultFileList']} />,
+    );
     defaultWrapper.unmount();
 
-    const wrapper = render(<Upload fileList={null} />);
+    const wrapper = render(<Upload fileList={null as unknown as UploadProps['defaultFileList']} />);
     wrapper.unmount();
   });
 
@@ -1416,11 +1420,11 @@ describe('Upload List', () => {
     ];
 
     const { container: wrapper, unmount } = render(
-      <Upload fileList={list} listType="picture">
+      <Upload fileList={list as UploadProps['fileList']} listType="picture">
         <button type="button">upload</button>
       </Upload>,
     );
-    list.forEach((file, i) => {
+    list.forEach((_, i) => {
       const imgNode = wrapper.querySelectorAll('.ant-upload-list-item-thumbnail img')[i];
       expect(imgNode.getAttribute('crossOrigin')).toBe(null);
     });
@@ -1456,7 +1460,7 @@ describe('Upload List', () => {
     ];
 
     const { container: wrapper, unmount } = render(
-      <Upload fileList={list} listType="picture">
+      <Upload fileList={list as UploadProps['fileList']} listType="picture">
         <button type="button">upload</button>
       </Upload>,
     );
@@ -1480,11 +1484,11 @@ describe('Upload List', () => {
     ];
 
     const { container: wrapper, unmount } = render(
-      <Upload fileList={list} listType="picture">
+      <Upload fileList={list as UploadProps['fileList']} listType="picture">
         <button type="button">upload</button>
       </Upload>,
     );
-    list.forEach((file, i) => {
+    list.forEach((_, i) => {
       const imgNode = wrapper.querySelectorAll('.ant-upload-list-item-thumbnail img')[i];
       expect(imgNode.getAttribute('crossOrigin')).toBe(null);
     });
@@ -1520,7 +1524,7 @@ describe('Upload List', () => {
     ];
 
     const { container: wrapper, unmount } = render(
-      <Upload fileList={list} listType="picture">
+      <Upload fileList={list as UploadProps['fileList']} listType="picture">
         <button type="button">upload</button>
       </Upload>,
     );
@@ -1544,10 +1548,12 @@ describe('Upload List', () => {
         },
       ];
       const { container: wrapper, unmount } = render(
-        <Upload fileList={list} listType="picture-card" />,
+        <Upload fileList={list as UploadProps['defaultFileList']} listType="picture-card" />,
       );
       expect(wrapper.querySelectorAll('.ant-upload-select').length).toBe(1);
-      expect(wrapper.querySelectorAll('.ant-upload-select')[0].style.display).toBe('none');
+      expect(wrapper.querySelectorAll<HTMLDivElement>('.ant-upload-select')[0]?.style.display).toBe(
+        'none',
+      );
       unmount();
     });
 
@@ -1563,10 +1569,16 @@ describe('Upload List', () => {
         },
       ];
       const { container: wrapper, unmount } = render(
-        <Upload fileList={list} showUploadList={false} listType="picture-card" />,
+        <Upload
+          fileList={list as UploadProps['fileList']}
+          showUploadList={false}
+          listType="picture-card"
+        />,
       );
       expect(wrapper.querySelectorAll('.ant-upload-select').length).toBe(1);
-      expect(wrapper.querySelectorAll('.ant-upload-select')[0].style.display).toBe('none');
+      expect(wrapper.querySelectorAll<HTMLDivElement>('.ant-upload-select')[0]?.style.display).toBe(
+        'none',
+      );
       unmount();
     });
   });
@@ -1584,10 +1596,14 @@ describe('Upload List', () => {
       },
     ];
     const { container } = render(
-      <Upload fileList={list} listType="picture-card" onChange={onChange} />,
+      <Upload
+        fileList={list as UploadProps['fileList']}
+        listType="picture-card"
+        onChange={onChange}
+      />,
     );
 
-    fireEvent.click(container.querySelector('.anticon-delete'));
+    fireEvent.click(container.querySelector('.anticon-delete')!);
 
     // Wait for Upload sync
     for (let i = 0; i < 10; i += 1) {
@@ -1601,9 +1617,7 @@ describe('Upload List', () => {
 
     expect(onChange).toHaveBeenCalledWith(
       expect.objectContaining({
-        file: expect.objectContaining({
-          status: 'removed',
-        }),
+        file: expect.objectContaining({ status: 'removed' }),
       }),
     );
 
diff --git a/docs/react/practical-projects.zh-CN.md b/docs/react/practical-projects.zh-CN.md
index 773e7c404d..4751ce6ee9 100644
--- a/docs/react/practical-projects.zh-CN.md
+++ b/docs/react/practical-projects.zh-CN.md
@@ -5,7 +5,7 @@ title: 项目实战
 
 在真实项目开发中，你可能会需要 Redux 或者 MobX 这样的数据流方案，Ant Design React 作为一个 UI 库，可以和任何 React 生态圈内的数据流方案以及应用框架搭配使用。我们基于业务场景的场景，推出了可插拔的企业级应用框架 umi，推荐你在项目中使用。
 
-[umi](https://umijs.org/zh-CN) 则是一个可插拔的企业级 react 应用框架。Umi 以路由为基础的，支持[类 next.js 的约定式路由](https://umijs.org/zh-CN/docs/convention-routing)，以及各种进阶的路由功能，并以此进行功能扩展，比如[支持路由级的按需加载](https://umijs.org/zh-CN/config#dynamicimport)。然后配以完善的[插件体系](https://umijs.org/zh-CN/plugins/api)，覆盖从源码到构建产物的每个生命周期，支持各种功能扩展和业务需求，同时提供 [Umi UI](https://umijs.org/zh-CN/docs/use-umi-ui) 通过可视化辅助编程（VAP）提高开发体验和研发效率。
+[umi](https://umijs.org/zh-CN) 则是一个可插拔的企业级 react 应用框架。Umi 以路由为基础的，支持[类 next.js 的约定式路由](https://umijs.org/zh-CN/docs/convention-routing)，以及各种进阶的路由功能，并以此进行功能扩展，比如[支持路由级的按需加载](https://umijs.org/zh-CN/config#dynamicimport)。然后配以完善的[插件体系](https://umijs.org/zh-CN/plugins/api)，覆盖从源码到构建产物的每个生命周期，支持各种功能扩展和业务需求。
 
 > 你可能也会对 [Ant Design Pro](https://pro.ant.design/) 感兴趣，这是一个基于 Umi 和 antd 的开箱即用的中台前端/设计解决方案。
 
diff --git a/docs/spec/cases.en-US.md b/docs/spec/cases.en-US.md
index e711a33c54..715339a1cf 100644
--- a/docs/spec/cases.en-US.md
+++ b/docs/spec/cases.en-US.md
@@ -12,14 +12,6 @@ Currently, there are many products and sites using Ant Design. If your solutions
 
 ---
 
-### Umi UI
-
-The local R&D workbench for Umi projects, code based, visualization function as an aid, further improve project development efficiency.
-
-[More](https://umijs.org/guide/umi-ui.html#%E2%9C%A8-%E7%89%B9%E6%80%A7)
-
-![Umi UI](https://gw.alipayobjects.com/zos/antfincdn/Xyns37N5nY/6591859e-7c16-48f5-852f-7817803425e9.png)
-
 ### Ant Financial Technology
 
 Cloud-oriented financial services, used by financial institutions that benefit from customized business cloud computing services. It assists financial institutions to upgrade to a new financial restructuring, promotion of capacity platforms, data and technology.
@@ -28,18 +20,14 @@ Cloud-oriented financial services, used by financial institutions that benefit f
 
 ![Ant Financial Technology](https://gw.alipayobjects.com/zos/rmsportal/zQMWTCnhWwYNzEURbDUn.png)
 
----
-
 ### OceanBase Cloud Platform
 
 OceanBase Cloud is a distributed relational database in a real sense, and OceanBase Cloud Platform is the OceanBase cloud-based database service that can help users quickly create and use OceanBase service.
 
-[Visit](http://oceanbase.alipay.com)
+[Visit](<[http://oceanbase.alipay.com](https://www.oceanbase.com/docs/enterprise/oceanbase-ocp-cn/V3.3.3/10000000000636101)>)
 
 ![OceanBase Cloud Platform](https://gw.alipayobjects.com/zos/rmsportal/OYGCAlMwSWkdaKfxIDtz.png)
 
----
-
 ### Ant Design Pro
 
 Based on Ant Design's design values, Ant Design Pro is an enterprise-class frontend/design solution that continues to build up and refine typical template/business components/ancillary design resources based on design specifications and foundation components, Further enhance the experience of "users" and "designers" in the design and development of enterprise-class product design.
diff --git a/docs/spec/cases.zh-CN.md b/docs/spec/cases.zh-CN.md
index d5d9f0997f..77afa8b0c8 100644
--- a/docs/spec/cases.zh-CN.md
+++ b/docs/spec/cases.zh-CN.md
@@ -10,14 +10,6 @@ Ant Design 目前在外部也有许多产品实践，如果你的公司和产品
 
 ## 最佳实践
 
-### Umi UI
-
-umi 项目的本地研发工作台，本地研发工作台。以代码为基础、可视化功能作为辅助，进一步提升项目研发效率。
-
-[了解更多](https://umijs.org/zh/guide/umi-ui.html#%E2%9C%A8-%E7%89%B9%E6%80%A7)
-
-![Umi UI](https://gw.alipayobjects.com/zos/antfincdn/Xyns37N5nY/6591859e-7c16-48f5-852f-7817803425e9.png)
-
 ### 蚂蚁金融科技
 
 金融云是面向金融机构深度定制的行业云计算服务；助力金融机构向新金融转型升级，推动平台、数据和技术方面的能力全面对外开放。
@@ -30,7 +22,7 @@ umi 项目的本地研发工作台，本地研发工作台。以代码为基础
 
 OceanBase 是一款真正意义上的云端分布式关系型数据库，而 OceanBase Cloud Platform（云平台）是以 OceanBase 数据库为基础的云服务，可以帮助用户快速创建、使用 OB 服务。
 
-[立即访问](http://oceanbase.alipay.com)
+[立即访问](https://www.oceanbase.com/docs/enterprise/oceanbase-ocp-cn/V3.3.3/10000000000636101)
 
 ![OceanBase 云平台](https://gw.alipayobjects.com/zos/rmsportal/OYGCAlMwSWkdaKfxIDtz.png)
 
@@ -38,7 +30,7 @@ OceanBase 是一款真正意义上的云端分布式关系型数据库，而 Oce
 
 与团队一起编写文档，极致体验，高效协同。在微笑中构建专属知识库。
 
-[立即访问](http://yuque.com/)
+[立即访问](https://yuque.com/)
 
 ![语雀](https://gw.alipayobjects.com/zos/rmsportal/doPiJWqbRNWCrHPBOcuo.png)
 
diff --git a/package.json b/package.json
index 93d8184fb7..3e27bf7fe3 100644
--- a/package.json
+++ b/package.json
@@ -141,7 +141,7 @@
     "rc-steps": "~4.1.0",
     "rc-switch": "~3.2.0",
     "rc-table": "~7.26.0",
-    "rc-tabs": "~12.1.0-alpha.0",
+    "rc-tabs": "~12.1.0-alpha.1",
     "rc-textarea": "~0.3.0",
     "rc-tooltip": "~5.2.0",
     "rc-tree": "~5.6.5",
@@ -165,8 +165,8 @@
     "@testing-library/react": "^12.0.0",
     "@testing-library/user-event": "^14.4.2",
     "@types/enzyme": "^3.10.5",
-    "@types/gtag.js": "^0.0.10",
-    "@types/jest": "^28.0.0",
+    "@types/gtag.js": "^0.0.11",
+    "@types/jest": "^29.0.0",
     "@types/jest-axe": "^3.5.3",
     "@types/jest-environment-puppeteer": "^5.0.0",
     "@types/jest-image-snapshot": "^5.1.0",
@@ -216,7 +216,7 @@
     "eslint-plugin-jest": "^27.0.1",
     "eslint-plugin-jsx-a11y": "^6.2.1",
     "eslint-plugin-markdown": "^3.0.0",
-    "eslint-plugin-react": "^7.28.0",
+    "eslint-plugin-react": "7.31.1",
     "eslint-plugin-react-hooks": "^4.1.2",
     "eslint-plugin-unicorn": "^43.0.0",
     "fast-glob": "^3.2.11",
@@ -278,7 +278,7 @@
     "remark-cli": "^11.0.0",
     "remark-lint": "^9.0.0",
     "remark-preset-lint-recommended": "^6.0.0",
-    "remove-files-webpack-plugin": "1.4.4",
+    "remove-files-webpack-plugin": "1.5.0",
     "rimraf": "^3.0.0",
     "scrollama": "^3.0.0",
     "semver": "^7.3.5",
diff --git a/scripts/print-changelog.js b/scripts/print-changelog.js
index 396003d232..b9ddfba722 100644
--- a/scripts/print-changelog.js
+++ b/scripts/print-changelog.js
@@ -116,13 +116,30 @@ async function printLog() {
       // Use jquery to get full html page since it don't need auth token
       let res;
       let tryTimes = 0;
+      const timeout = 30000;
+      let html;
       const fetchPullRequest = async () => {
         try {
-          res = await fetch(`https://github.com/ant-design/ant-design/pull/${pr}`);
+          res = await new Promise((resolve, reject) => {
+            setTimeout(() => {
+              reject(new Error(`Fetch timeout of ${timeout}ms exceeded`));
+            }, timeout);
+            fetch(`https://github.com/ant-design/ant-design/pull/${pr}`)
+              .then(response => {
+                response.text().then(htmlRes => {
+                  html = htmlRes;
+                  resolve(response);
+                });
+              })
+              .catch(error => {
+                reject(error);
+              });
+          });
         } catch (err) {
           tryTimes++;
-          if (tryTimes < 5) {
-            console.log(chalk.red(`😬 Fetch error, retrying...`));
+          if (tryTimes < 100) {
+            console.log(chalk.red(`❌ Fetch error, reason: ${err}`));
+            console.log(chalk.red(`⌛️ Retrying...(Retry times: ${tryTimes})`));
             await fetchPullRequest();
           }
         }
@@ -132,8 +149,6 @@ async function printLog() {
         continue;
       }
 
-      const html = await res.text();
-
       const $html = $(html);
 
       const prTitle = $html.find(QUERY_TITLE).text().trim();
diff --git a/site/theme/style/themes/default.less b/site/theme/style/themes/default.less
index 6bee9e1c3e..ecbdcbfb40 100644
--- a/site/theme/style/themes/default.less
+++ b/site/theme/style/themes/default.less
@@ -106,7 +106,7 @@
 // https://github.com/ant-design/ant-design/issues/20210
 @line-height-base: 1.5715;
 @border-radius-base: 2px;
-@border-radius-sm: @border-radius-base;
+@border-radius-sm: 2px;
 
 // control border
 @control-border-radius: @border-radius-base;
diff --git a/site/theme/style/themes/variable.less b/site/theme/style/themes/variable.less
index 43ee2646c2..4f437e6006 100644
--- a/site/theme/style/themes/variable.less
+++ b/site/theme/style/themes/variable.less
@@ -161,7 +161,7 @@
 // https://github.com/ant-design/ant-design/issues/20210
 @line-height-base: 1.5715;
 @border-radius-base: 2px;
-@border-radius-sm: @border-radius-base;
+@border-radius-sm: 2px;
 
 // control border
 @control-border-radius: @border-radius-base;
diff --git a/site/theme/template/Content/Demo/index.jsx b/site/theme/template/Content/Demo/index.jsx
index a268596448..f28d70609f 100644
--- a/site/theme/template/Content/Demo/index.jsx
+++ b/site/theme/template/Content/Demo/index.jsx
@@ -448,7 +448,7 @@ ReactDOM.render(<Demo />, document.getElementById('container'));
             <CopyToClipboard text={sourceCode} onCopy={() => this.handleCodeCopied(meta.id)}>
               <Tooltip
                 open={copyTooltipOpen}
-                onOpenChange={this.onCopyTooltipVisibleChange}
+                onOpenChange={this.onCopyTooltipOpenChange}
                 title={<FormattedMessage id={`app.demo.${copied ? 'copied' : 'copy'}`} />}
               >
                 {React.createElement(copied && copyTooltipOpen ? CheckOutlined : SnippetsOutlined, {