diff --git a/.eslintrc.js b/.eslintrc.js
index 47d116601c..7815683b00 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -121,6 +121,14 @@ module.exports = {
     'unicorn/prefer-trim-start-end': 2,
     'unicorn/expiring-todo-comments': 2,
     'unicorn/no-abusive-eslint-disable': 2,
+
+    // https://github.com/typescript-eslint/typescript-eslint/issues/2540#issuecomment-692866111
+    'no-use-before-define': 0,
+    '@typescript-eslint/no-use-before-define': 2,
+    'no-shadow': 0,
+    '@typescript-eslint/no-shadow': [2, { ignoreTypeValueShadow: true }],
+    // https://github.com/typescript-eslint/typescript-eslint/issues/2528#issuecomment-689369395
+    'no-undef': 0,
   },
   globals: {
     gtag: true,
diff --git a/components/_util/type.ts b/components/_util/type.ts
index 303929d1ec..ac02d7ec2d 100644
--- a/components/_util/type.ts
+++ b/components/_util/type.ts
@@ -8,7 +8,7 @@ export const tupleNum = <T extends number[]>(...args: T) => args;
  * https://stackoverflow.com/a/59187769
  * Extract the type of an element of an array/tuple without performing indexing
  */
-export type ElementOf<T> = T extends (infer E)[] ? E : T extends readonly (infer E)[] ? E : never;
+export type ElementOf<T> = T extends (infer E)[] ? E : T extends readonly (infer F)[] ? F : never;
 
 /**
  * https://github.com/Microsoft/TypeScript/issues/29729
diff --git a/components/anchor/Anchor.tsx b/components/anchor/Anchor.tsx
index c54c300382..f28a4a6eb0 100644
--- a/components/anchor/Anchor.tsx
+++ b/components/anchor/Anchor.tsx
@@ -9,6 +9,8 @@ import scrollTo from '../_util/scrollTo';
 import getScroll from '../_util/getScroll';
 import AnchorContext from './context';
 
+export type AnchorContainer = HTMLElement | Window;
+
 function getDefaultContainer() {
   return window;
 }
@@ -38,8 +40,6 @@ type Section = {
   top: number;
 };
 
-export type AnchorContainer = HTMLElement | Window;
-
 export interface AnchorProps {
   prefixCls?: string;
   className?: string;
diff --git a/components/auto-complete/index.tsx b/components/auto-complete/index.tsx
index c9af12a70a..e4b63d69f9 100755
--- a/components/auto-complete/index.tsx
+++ b/components/auto-complete/index.tsx
@@ -131,10 +131,10 @@ const AutoComplete: React.ForwardRefRenderFunction<Select, AutoCompleteProps> =
 
 const RefAutoComplete = React.forwardRef<Select, AutoCompleteProps>(AutoComplete);
 
-type RefAutoComplete = typeof RefAutoComplete & {
+type RefAutoCompleteWithOption = typeof RefAutoComplete & {
   Option: OptionType;
 };
 
-(RefAutoComplete as RefAutoComplete).Option = Option;
+(RefAutoComplete as RefAutoCompleteWithOption).Option = Option;
 
-export default RefAutoComplete as RefAutoComplete;
+export default RefAutoComplete as RefAutoCompleteWithOption;
diff --git a/components/avatar/index.tsx b/components/avatar/index.tsx
index 6e57124384..6a688621ad 100644
--- a/components/avatar/index.tsx
+++ b/components/avatar/index.tsx
@@ -1,3 +1,4 @@
+import * as React from 'react';
 import InternalAvatar, { AvatarProps } from './avatar';
 import Group from './group';
 
diff --git a/components/checkbox/Checkbox.tsx b/components/checkbox/Checkbox.tsx
index 7c8cccc4a9..9edde57deb 100644
--- a/components/checkbox/Checkbox.tsx
+++ b/components/checkbox/Checkbox.tsx
@@ -27,10 +27,6 @@ export interface AbstractCheckboxProps<T> {
   type?: string;
 }
 
-export interface CheckboxProps extends AbstractCheckboxProps<CheckboxChangeEvent> {
-  indeterminate?: boolean;
-}
-
 export interface CheckboxChangeEventTarget extends CheckboxProps {
   checked: boolean;
 }
@@ -42,6 +38,10 @@ export interface CheckboxChangeEvent {
   nativeEvent: MouseEvent;
 }
 
+export interface CheckboxProps extends AbstractCheckboxProps<CheckboxChangeEvent> {
+  indeterminate?: boolean;
+}
+
 class Checkbox extends React.PureComponent<CheckboxProps, {}> {
   static Group: typeof CheckboxGroup;
 
diff --git a/components/date-picker/generatePicker/index.tsx b/components/date-picker/generatePicker/index.tsx
index 8399b14902..0e97e3fe84 100644
--- a/components/date-picker/generatePicker/index.tsx
+++ b/components/date-picker/generatePicker/index.tsx
@@ -136,7 +136,7 @@ function generatePicker<DateType>(generateConfig: GenerateConfig<DateType>) {
   const RangePicker = generateRangePicker(generateConfig);
 
   // =========================== Export ===========================
-  type MergedDatePicker = typeof DatePicker & {
+  type MergedDatePickerType = typeof DatePicker & {
     WeekPicker: typeof WeekPicker;
     MonthPicker: typeof MonthPicker;
     YearPicker: typeof YearPicker;
@@ -145,7 +145,7 @@ function generatePicker<DateType>(generateConfig: GenerateConfig<DateType>) {
     QuarterPicker: typeof QuarterPicker;
   };
 
-  const MergedDatePicker = DatePicker as MergedDatePicker;
+  const MergedDatePicker = DatePicker as MergedDatePickerType;
   MergedDatePicker.WeekPicker = WeekPicker;
   MergedDatePicker.MonthPicker = MonthPicker;
   MergedDatePicker.YearPicker = YearPicker;
diff --git a/components/form/hooks/useForm.ts b/components/form/hooks/useForm.ts
index a3ad814781..4800bd70e2 100644
--- a/components/form/hooks/useForm.ts
+++ b/components/form/hooks/useForm.ts
@@ -1,4 +1,4 @@
-import { useRef, useMemo } from 'react';
+import * as React from 'react';
 import { useForm as useRcForm, FormInstance as RcFormInstance } from 'rc-field-form';
 import scrollIntoView from 'scroll-into-view-if-needed';
 import { ScrollOptions, NamePath, InternalNamePath } from '../interface';
@@ -23,9 +23,9 @@ function toNamePathStr(name: NamePath) {
 
 export default function useForm<Values = any>(form?: FormInstance<Values>): [FormInstance<Values>] {
   const [rcForm] = useRcForm();
-  const itemsRef = useRef<Record<string, React.ReactElement>>({});
+  const itemsRef = React.useRef<Record<string, React.ReactElement>>({});
 
-  const wrapForm: FormInstance<Values> = useMemo(
+  const wrapForm: FormInstance<Values> = React.useMemo(
     () =>
       form || {
         ...rcForm,
diff --git a/components/form/index.tsx b/components/form/index.tsx
index df0e9b89b0..5c0596003c 100644
--- a/components/form/index.tsx
+++ b/components/form/index.tsx
@@ -5,8 +5,9 @@ import List from './FormList';
 import { FormProvider } from './context';
 import devWarning from '../_util/devWarning';
 
-type InternalForm = typeof InternalForm;
-interface Form extends InternalForm {
+type InternalFormType = typeof InternalForm;
+
+interface FormInterface extends InternalFormType {
   useForm: typeof useForm;
   Item: typeof Item;
   List: typeof List;
@@ -16,7 +17,7 @@ interface Form extends InternalForm {
   create: () => void;
 }
 
-const Form: Form = InternalForm as Form;
+const Form = InternalForm as FormInterface;
 
 Form.Item = Item;
 Form.List = List;
diff --git a/components/modal/confirm.tsx b/components/modal/confirm.tsx
index 111eb3a369..87500ae168 100644
--- a/components/modal/confirm.tsx
+++ b/components/modal/confirm.tsx
@@ -33,7 +33,7 @@ export interface ModalStaticFunctions {
 export default function confirm(config: ModalFuncProps) {
   const div = document.createElement('div');
   document.body.appendChild(div);
-  // eslint-disable-next-line no-use-before-define
+  // eslint-disable-next-line @typescript-eslint/no-use-before-define
   let currentConfig = { ...config, close, visible: true } as any;
 
   function destroy(...args: any[]) {
@@ -47,7 +47,7 @@ export default function confirm(config: ModalFuncProps) {
     }
     for (let i = 0; i < destroyFns.length; i++) {
       const fn = destroyFns[i];
-      // eslint-disable-next-line no-use-before-define
+      // eslint-disable-next-line @typescript-eslint/no-use-before-define
       if (fn === close) {
         destroyFns.splice(i, 1);
         break;
diff --git a/components/modal/index.tsx b/components/modal/index.tsx
index 3d802c317e..12e5342c99 100644
--- a/components/modal/index.tsx
+++ b/components/modal/index.tsx
@@ -16,9 +16,10 @@ function modalWarn(props: ModalFuncProps) {
   return confirm(withWarn(props));
 }
 
-type Modal = typeof OriginModal &
+type ModalType = typeof OriginModal &
   ModalStaticFunctions & { destroyAll: () => void; config: typeof globalConfig };
-const Modal = OriginModal as Modal;
+
+const Modal = OriginModal as ModalType;
 
 Modal.info = function infoFn(props: ModalFuncProps) {
   return confirm(withInfo(props));
diff --git a/components/radio/index.tsx b/components/radio/index.tsx
index 808e89f4a8..3f027e8815 100644
--- a/components/radio/index.tsx
+++ b/components/radio/index.tsx
@@ -1,3 +1,4 @@
+import * as React from 'react';
 import InternalRadio from './radio';
 import Group from './group';
 import Button from './radioButton';
diff --git a/components/table/ColumnGroup.tsx b/components/table/ColumnGroup.tsx
index 5c31673d61..dad7f538fd 100644
--- a/components/table/ColumnGroup.tsx
+++ b/components/table/ColumnGroup.tsx
@@ -1,3 +1,4 @@
+import * as React from 'react';
 import { ColumnType } from './interface';
 import { ColumnProps } from './Column';
 
diff --git a/components/table/interface.tsx b/components/table/interface.tsx
index 72a204683c..dbfa121bf4 100644
--- a/components/table/interface.tsx
+++ b/components/table/interface.tsx
@@ -1,3 +1,4 @@
+import * as React from 'react';
 import {
   GetRowKey,
   ColumnType as RcColumnType,
diff --git a/components/transfer/__tests__/index.test.js b/components/transfer/__tests__/index.test.js
index 5a4ff54e8e..c1430973b7 100644
--- a/components/transfer/__tests__/index.test.js
+++ b/components/transfer/__tests__/index.test.js
@@ -1,4 +1,4 @@
-/* eslint no-use-before-define: "off" */
+/* eslint @typescript-eslint/no-use-before-define: "off" */
 import React from 'react';
 import { render, mount } from 'enzyme';
 import Transfer from '..';
diff --git a/components/transfer/index.tsx b/components/transfer/index.tsx
index 323e909ccc..278a6491bd 100644
--- a/components/transfer/index.tsx
+++ b/components/transfer/index.tsx
@@ -23,8 +23,6 @@ export interface RenderResultObject {
 
 export type RenderResult = React.ReactElement | RenderResultObject | string | null;
 
-type TransferRender = (item: TransferItem) => RenderResult;
-
 export interface TransferItem {
   key: string;
   title?: string;
@@ -33,6 +31,8 @@ export interface TransferItem {
   [name: string]: any;
 }
 
+type TransferRender = (item: TransferItem) => RenderResult;
+
 export interface ListStyle {
   direction: TransferDirection;
 }
@@ -41,6 +41,20 @@ export type SelectAllLabel =
   | React.ReactNode
   | ((info: { selectedCount: number; totalCount: number }) => React.ReactNode);
 
+export interface TransferLocale {
+  titles: string[];
+  notFoundContent?: React.ReactNode;
+  searchPlaceholder: string;
+  itemUnit: string;
+  itemsUnit: string;
+  remove: string;
+  selectAll: string;
+  selectCurrent: string;
+  selectInvert: string;
+  removeAll: string;
+  removeCurrent: string;
+}
+
 export interface TransferProps {
   prefixCls?: string;
   className?: string;
@@ -70,20 +84,6 @@ export interface TransferProps {
   pagination?: PaginationType;
 }
 
-export interface TransferLocale {
-  titles: string[];
-  notFoundContent?: React.ReactNode;
-  searchPlaceholder: string;
-  itemUnit: string;
-  itemsUnit: string;
-  remove: string;
-  selectAll: string;
-  selectCurrent: string;
-  selectInvert: string;
-  removeAll: string;
-  removeCurrent: string;
-}
-
 interface TransferState {
   sourceSelectedKeys: string[];
   targetSelectedKeys: string[];
diff --git a/package.json b/package.json
index 13705968b8..d579febc32 100644
--- a/package.json
+++ b/package.json
@@ -171,8 +171,8 @@
     "@types/react-copy-to-clipboard": "^4.3.0",
     "@types/react-dom": "^16.9.5",
     "@types/warning": "^3.0.0",
-    "@typescript-eslint/eslint-plugin": "^3.0.0",
-    "@typescript-eslint/parser": "^3.0.0",
+    "@typescript-eslint/eslint-plugin": "^4.1.1",
+    "@typescript-eslint/parser": "^4.1.1",
     "antd-img-crop": "^3.1.1",
     "antd-pro-merge-less": "^3.0.9",
     "antd-theme-generator": "^1.2.3",
@@ -197,7 +197,7 @@
     "enzyme-adapter-react-16": "^1.14.0",
     "enzyme-to-json": "^3.3.5",
     "esbuild-webpack-plugin": "^1.0.0",
-    "eslint": "^7.3.1",
+    "eslint": "^7.9.0",
     "eslint-config-airbnb": "^18.0.0",
     "eslint-config-prettier": "^6.0.0",
     "eslint-plugin-babel": "^5.3.0",
@@ -205,8 +205,8 @@
     "eslint-plugin-jest": "^24.0.1",
     "eslint-plugin-jsx-a11y": "^6.2.1",
     "eslint-plugin-markdown": "^1.0.0",
-    "eslint-plugin-react": "^7.14.2",
-    "eslint-plugin-react-hooks": "^4.0.0",
+    "eslint-plugin-react": "^7.20.6",
+    "eslint-plugin-react-hooks": "^4.1.2",
     "eslint-plugin-unicorn": "^21.0.0",
     "eslint-tinker": "^0.5.0",
     "fetch-jsonp": "^1.1.3",
diff --git a/site/theme/template/Resources/index.tsx b/site/theme/template/Resources/index.tsx
index 232214176c..cc39f27e6e 100644
--- a/site/theme/template/Resources/index.tsx
+++ b/site/theme/template/Resources/index.tsx
@@ -7,6 +7,8 @@ import * as utils from '../utils';
 import './index.less';
 import AffixTabs from './AffixTabs';
 
+type ContentUnit = string | Record<string, any> | ContentUnit[];
+
 interface PageData {
   meta: {
     order?: number;
@@ -40,8 +42,6 @@ interface ResourcesProps {
   };
 }
 
-type ContentUnit = string | Record<string, any> | ContentUnit[];
-
 function getUnitString(unit: ContentUnit[]): string {
   if (!unit) return '';