chore: 🆙 upgrade typescript-eslint (#26600)

* chore: 🆙 upgrade typescript-eslint

* fix some lint

* fix: some eslint errors

* Update package.json

* chore: 🆙 upgrade typescript-eslint

* fix some lint

* fix: some eslint errors

* Update package.json

* fix no use before define

* Update package.json

* fix lint

Co-authored-by: yoyo837 <yoyo837@hotmail.com>
Co-authored-by: Tom Xu <ycxzhkx@gmail.com>

.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,

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

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;

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;

components/avatar/index.tsx

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import InternalAvatar, { AvatarProps } from './avatar';
 import Group from './group';
 

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;
 

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;

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,

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;

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;

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));

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';

components/table/ColumnGroup.tsx

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import { ColumnType } from './interface';
 import { ColumnProps } from './Column';
 

components/table/interface.tsx

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import {
   GetRowKey,
   ColumnType as RcColumnType,

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 '..';

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[];

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",

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 '';