chore: better lint style (#7799)

* better lint style

* fix ts

src/components/Authorized/Authorized.tsx

@@ -1,14 +1,14 @@
 import React from 'react';
 import { Result } from 'antd';
-import check, { IAuthorityType } from './CheckPermissions';
+import check from './CheckPermissions';
+import type { IAuthorityType } from './CheckPermissions';
+import type AuthorizedRoute from './AuthorizedRoute';
+import type Secured from './Secured';
 
-import AuthorizedRoute from './AuthorizedRoute';
-import Secured from './Secured';
-
-interface AuthorizedProps {
+type AuthorizedProps = {
   authority: IAuthorityType;
   noMatch?: React.ReactNode;
-}
+};
 
 type IAuthorizedType = React.FunctionComponent<AuthorizedProps> & {
   Secured: typeof Secured;

src/components/Authorized/AuthorizedRoute.tsx

@@ -2,15 +2,15 @@ import { Redirect, Route } from 'umi';
 
 import React from 'react';
 import Authorized from './Authorized';
-import { IAuthorityType } from './CheckPermissions';
+import type { IAuthorityType } from './CheckPermissions';
 
-interface AuthorizedRouteProps {
+type AuthorizedRouteProps = {
   currentAuthority: string;
   component: React.ComponentClass<any, any>;
   render: (props: any) => React.ReactNode;
   redirectPath: string;
   authority: IAuthorityType;
-}
+};
 
 const AuthorizedRoute: React.SFC<AuthorizedRouteProps> = ({
   component: Component,

src/components/Authorized/PromiseRender.tsx

@@ -4,15 +4,15 @@ import isEqual from 'lodash/isEqual';
 import { isComponentClass } from './Secured';
 // eslint-disable-next-line import/no-cycle
 
-interface PromiseRenderProps<T, K> {
+type PromiseRenderProps<T, K> = {
   ok: T;
   error: K;
   promise: Promise<boolean>;
-}
+};
 
-interface PromiseRenderState {
+type PromiseRenderState = {
   component: React.ComponentClass | React.FunctionComponent;
-}
+};
 
 export default class PromiseRender<T, K> extends React.Component<
   PromiseRenderProps<T, K>,
@@ -22,11 +22,14 @@ export default class PromiseRender<T, K> extends React.Component<
     component: () => null,
   };
 
-  componentDidMount() {
+  componentDidMount(): void {
     this.setRenderComponent(this.props);
   }
 
-  shouldComponentUpdate = (nextProps: PromiseRenderProps<T, K>, nextState: PromiseRenderState) => {
+  shouldComponentUpdate = (
+    nextProps: PromiseRenderProps<T, K>,
+    nextState: PromiseRenderState,
+  ): boolean => {
     const { component } = this.state;
     if (!isEqual(nextProps, this.props)) {
       this.setRenderComponent(nextProps);
@@ -36,7 +39,7 @@ export default class PromiseRender<T, K> extends React.Component<
   };
 
   // set render Component : ok or error
-  setRenderComponent(props: PromiseRenderProps<T, K>) {
+  setRenderComponent(props: PromiseRenderProps<T, K>): void {
     const ok = this.checkIsInstantiation(props.ok);
     const error = this.checkIsInstantiation(props.error);
     props.promise

src/components/GlobalHeader/AvatarDropdown.tsx

@@ -1,16 +1,17 @@
 import { LogoutOutlined, SettingOutlined, UserOutlined } from '@ant-design/icons';
 import { Avatar, Menu, Spin } from 'antd';
 import React from 'react';
-import { history, ConnectProps, connect } from 'umi';
-import { ConnectState } from '@/models/connect';
-import { CurrentUser } from '@/models/user';
+import type { ConnectProps } from 'umi';
+import { history, connect } from 'umi';
+import type { ConnectState } from '@/models/connect';
+import type { CurrentUser } from '@/models/user';
 import HeaderDropdown from '../HeaderDropdown';
 import styles from './index.less';
 
-export interface GlobalHeaderRightProps extends Partial<ConnectProps> {
+export type GlobalHeaderRightProps = {
   currentUser?: CurrentUser;
   menu?: boolean;
-}
+} & Partial<ConnectProps>;
 
 class AvatarDropdown extends React.Component<GlobalHeaderRightProps> {
   onMenuClick = (event: {

src/components/GlobalHeader/NoticeIconView.tsx

@@ -1,21 +1,22 @@
 import React, { Component } from 'react';
-import { connect, ConnectProps } from 'umi';
+import type { ConnectProps } from 'umi';
+import { connect } from 'umi';
 import { Tag, message } from 'antd';
 import groupBy from 'lodash/groupBy';
 import moment from 'moment';
-import { NoticeItem } from '@/models/global';
-import { CurrentUser } from '@/models/user';
-import { ConnectState } from '@/models/connect';
+import type { NoticeItem } from '@/models/global';
+import type { CurrentUser } from '@/models/user';
+import type { ConnectState } from '@/models/connect';
 import NoticeIcon from '../NoticeIcon';
 import styles from './index.less';
 
-export interface GlobalHeaderRightProps extends Partial<ConnectProps> {
+export type GlobalHeaderRightProps = {
   notices?: NoticeItem[];
   currentUser?: CurrentUser;
   fetchingNotices?: boolean;
   onNoticeVisibleChange?: (visible: boolean) => void;
   onNoticeClear?: (tabName?: string) => void;
-}
+} & Partial<ConnectProps>;
 
 class GlobalHeaderRight extends Component<GlobalHeaderRightProps> {
   componentDidMount() {
@@ -52,9 +53,7 @@ class GlobalHeaderRight extends Component<GlobalHeaderRightProps> {
     }
   };
 
-  getNoticeData = (): {
-    [key: string]: NoticeItem[];
-  } => {
+  getNoticeData = (): Record<string, NoticeItem[]> => {
     const { notices = [] } = this.props;
 
     if (!notices || notices.length === 0 || !Array.isArray(notices)) {
@@ -96,10 +95,8 @@ class GlobalHeaderRight extends Component<GlobalHeaderRightProps> {
     return groupBy(newNotices, 'type');
   };
 
-  getUnreadData = (noticeData: { [key: string]: NoticeItem[] }) => {
-    const unreadMsg: {
-      [key: string]: number;
-    } = {};
+  getUnreadData = (noticeData: Record<string, NoticeItem[]>) => {
+    const unreadMsg: Record<string, number> = {};
     Object.keys(noticeData).forEach((key) => {
       const value = noticeData[key];
 

src/components/GlobalHeader/RightContent.tsx

@@ -1,16 +1,18 @@
 import { Tooltip, Tag } from 'antd';
-import { Settings as ProSettings } from '@ant-design/pro-layout';
+import type { Settings as ProSettings } from '@ant-design/pro-layout';
 import { QuestionCircleOutlined } from '@ant-design/icons';
 import React from 'react';
-import { connect, ConnectProps, SelectLang } from 'umi';
-import { ConnectState } from '@/models/connect';
+import type { ConnectProps } from 'umi';
+import { connect, SelectLang } from 'umi';
+import type { ConnectState } from '@/models/connect';
 import Avatar from './AvatarDropdown';
 import HeaderSearch from '../HeaderSearch';
 import styles from './index.less';
 
-export interface GlobalHeaderRightProps extends Partial<ConnectProps>, Partial<ProSettings> {
+export type GlobalHeaderRightProps = {
   theme?: ProSettings['navTheme'] | 'realDark';
-}
+} & Partial<ConnectProps> &
+  Partial<ProSettings>;
 
 const ENVTagColor = {
   dev: 'orange',

src/components/HeaderDropdown/index.tsx

@@ -1,16 +1,14 @@
-import { DropDownProps } from 'antd/es/dropdown';
+import type { DropDownProps } from 'antd/es/dropdown';
 import { Dropdown } from 'antd';
 import React from 'react';
 import classNames from 'classnames';
 import styles from './index.less';
 
-declare type OverlayFunc = () => React.ReactNode;
-
-export interface HeaderDropdownProps extends Omit<DropDownProps, 'overlay'> {
+export type HeaderDropdownProps = {
   overlayClassName?: string;
-  overlay: React.ReactNode | OverlayFunc | any;
+  overlay: React.ReactNode | (() => React.ReactNode) | any;
   placement?: 'bottomLeft' | 'bottomRight' | 'topLeft' | 'topCenter' | 'topRight' | 'bottomCenter';
-}
+} & Omit<DropDownProps, 'overlay'>;
 
 const HeaderDropdown: React.FC<HeaderDropdownProps> = ({ overlayClassName: cls, ...restProps }) => (
   <Dropdown overlayClassName={classNames(styles.container, cls)} {...restProps} />

src/components/HeaderSearch/index.tsx

@@ -1,13 +1,13 @@
 import { SearchOutlined } from '@ant-design/icons';
 import { AutoComplete, Input } from 'antd';
 import useMergeValue from 'use-merge-value';
-import { AutoCompleteProps } from 'antd/es/auto-complete';
+import type { AutoCompleteProps } from 'antd/es/auto-complete';
 import React, { useRef } from 'react';
 
 import classNames from 'classnames';
 import styles from './index.less';
 
-export interface HeaderSearchProps {
+export type HeaderSearchProps = {
   onSearch?: (value?: string) => void;
   onChange?: (value?: string) => void;
   onVisibleChange?: (b: boolean) => void;
@@ -18,7 +18,7 @@ export interface HeaderSearchProps {
   open?: boolean;
   defaultValue?: string;
   value?: string;
-}
+};
 
 const HeaderSearch: React.FC<HeaderSearchProps> = (props) => {
   const {
@@ -38,7 +38,7 @@ const HeaderSearch: React.FC<HeaderSearchProps> = (props) => {
     onChange: props.onChange,
   });
 
-  const [searchMode, setSearchMode] = useMergeValue(defaultOpen || false, {
+  const [searchMode, setSearchMode] = useMergeValue(defaultOpen ?? false, {
     value: props.open,
     onChange: onVisibleChange,
   });

src/components/NoticeIcon/NoticeList.tsx

@@ -2,10 +2,10 @@ import { Avatar, List } from 'antd';
 
 import React from 'react';
 import classNames from 'classnames';
-import { NoticeIconData } from './index';
+import type { NoticeIconData } from './index';
 import styles from './NoticeList.less';
 
-export interface NoticeIconTabProps {
+export type NoticeIconTabProps = {
   count?: number;
   name?: string;
   showClear?: boolean;
@@ -21,7 +21,7 @@ export interface NoticeIconTabProps {
   viewMoreText?: string;
   list: NoticeIconData[];
   onViewMore?: (e: any) => void;
-}
+};
 const NoticeList: React.SFC<NoticeIconTabProps> = ({
   data = [],
   onClick,
@@ -67,7 +67,9 @@ const NoticeList: React.SFC<NoticeIconTabProps> = ({
             <List.Item
               className={itemCls}
               key={item.key || i}
-              onClick={() => onClick && onClick(item)}
+              onClick={() => {
+                onClick?.(item);
+              }}
             >
               <List.Item.Meta
                 className={styles.meta}

src/components/NoticeIcon/index.tsx

@@ -3,14 +3,15 @@ import { Badge, Spin, Tabs } from 'antd';
 import useMergeValue from 'use-merge-value';
 import React from 'react';
 import classNames from 'classnames';
-import NoticeList, { NoticeIconTabProps } from './NoticeList';
+import type { NoticeIconTabProps } from './NoticeList';
+import NoticeList from './NoticeList';
 
 import HeaderDropdown from '../HeaderDropdown';
 import styles from './index.less';
 
 const { TabPane } = Tabs;
 
-export interface NoticeIconData {
+export type NoticeIconData = {
   avatar?: string | React.ReactNode;
   title?: React.ReactNode;
   description?: React.ReactNode;
@@ -19,9 +20,9 @@ export interface NoticeIconData {
   style?: React.CSSProperties;
   key?: string | number;
   read?: boolean;
-}
+};
 
-export interface NoticeIconProps {
+export type NoticeIconProps = {
   count?: number;
   bell?: React.ReactNode;
   className?: string;
@@ -38,7 +39,7 @@ export interface NoticeIconProps {
   clearClose?: boolean;
   emptyImage?: string;
   children: React.ReactElement<NoticeIconTabProps>[];
-}
+};
 
 const NoticeIcon: React.FC<NoticeIconProps> & {
   Tab: typeof NoticeList;
@@ -73,9 +74,15 @@ const NoticeIcon: React.FC<NoticeIconProps> & {
             clearText={clearText}
             viewMoreText={viewMoreText}
             data={list}
-            onClear={(): void => onClear && onClear(title, tabKey)}
-            onClick={(item): void => onItemClick && onItemClick(item, child.props)}
-            onViewMore={(event): void => onViewMore && onViewMore(child.props, event)}
+            onClear={(): void => {
+              onClear?.(title, tabKey);
+            }}
+            onClick={(item): void => {
+              onItemClick?.(item, child.props);
+            }}
+            onViewMore={(event): void => {
+              onViewMore?.(child.props, event);
+            }}
             showClear={showClear}
             showViewMore={showViewMore}
             title={title}

src/global.tsx

@@ -57,7 +57,7 @@ if (pwa) {
       description: useIntl().formatMessage({ id: 'app.pwa.serviceworker.updated.hint' }),
       btn,
       key,
-      onClose: async () => {},
+      onClose: async () => null,
     });
   });
 } else if ('serviceWorker' in navigator && isHttps) {

src/layouts/BasicLayout.tsx

@@ -3,19 +3,20 @@
  * You can view component api by:
  * https://github.com/ant-design/ant-design-pro-layout
  */
-import ProLayout, {
+import type {
   MenuDataItem,
   BasicLayoutProps as ProLayoutProps,
   Settings,
-  DefaultFooter,
 } from '@ant-design/pro-layout';
+import ProLayout, { DefaultFooter } from '@ant-design/pro-layout';
 import React, { useEffect, useMemo, useRef } from 'react';
-import { Link, useIntl, connect, Dispatch, history } from 'umi';
+import type { Dispatch } from 'umi';
+import { Link, useIntl, connect, history } from 'umi';
 import { GithubOutlined } from '@ant-design/icons';
 import { Result, Button } from 'antd';
 import Authorized from '@/utils/Authorized';
 import RightContent from '@/components/GlobalHeader/RightContent';
-import { ConnectState } from '@/models/connect';
+import type { ConnectState } from '@/models/connect';
 import { getMatchMenu } from '@umijs/route-utils';
 import logo from '../assets/logo.svg';
 
@@ -31,20 +32,16 @@ const noMatch = (
     }
   />
 );
-export interface BasicLayoutProps extends ProLayoutProps {
-  breadcrumbNameMap: {
-    [path: string]: MenuDataItem;
-  };
+export type BasicLayoutProps = {
+  breadcrumbNameMap: Record<string, MenuDataItem>;
   route: ProLayoutProps['route'] & {
     authority: string[];
   };
   settings: Settings;
   dispatch: Dispatch;
-}
+} & ProLayoutProps;
 export type BasicLayoutContext = { [K in 'location']: BasicLayoutProps[K] } & {
-  breadcrumbNameMap: {
-    [path: string]: MenuDataItem;
-  };
+  breadcrumbNameMap: Record<string, MenuDataItem>;
 };
 /**
  * use Authorized check all menu item

src/layouts/SecurityLayout.tsx

@@ -1,18 +1,19 @@
 import React from 'react';
 import { PageLoading } from '@ant-design/pro-layout';
-import { Redirect, connect, ConnectProps } from 'umi';
+import type { ConnectProps } from 'umi';
+import { Redirect, connect } from 'umi';
 import { stringify } from 'querystring';
-import { ConnectState } from '@/models/connect';
-import { CurrentUser } from '@/models/user';
+import type { ConnectState } from '@/models/connect';
+import type { CurrentUser } from '@/models/user';
 
-interface SecurityLayoutProps extends ConnectProps {
+type SecurityLayoutProps = {
   loading?: boolean;
   currentUser?: CurrentUser;
-}
+} & ConnectProps;
 
-interface SecurityLayoutState {
+type SecurityLayoutState = {
   isReady: boolean;
-}
+};
 
 class SecurityLayout extends React.Component<SecurityLayoutProps, SecurityLayoutState> {
   state: SecurityLayoutState = {

src/layouts/UserLayout.tsx

@@ -1,16 +1,16 @@
-import { DefaultFooter, MenuDataItem, getMenuData, getPageTitle } from '@ant-design/pro-layout';
+import type { MenuDataItem } from '@ant-design/pro-layout';
+import { DefaultFooter, getMenuData, getPageTitle } from '@ant-design/pro-layout';
 import { Helmet, HelmetProvider } from 'react-helmet-async';
-import { Link, SelectLang, useIntl, ConnectProps, connect, FormattedMessage } from 'umi';
+import type { ConnectProps } from 'umi';
+import { Link, SelectLang, useIntl, connect, FormattedMessage } from 'umi';
 import React from 'react';
-import { ConnectState } from '@/models/connect';
+import type { ConnectState } from '@/models/connect';
 import logo from '../assets/logo.svg';
 import styles from './UserLayout.less';
 
-export interface UserLayoutProps extends Partial<ConnectProps> {
-  breadcrumbNameMap: {
-    [path: string]: MenuDataItem;
-  };
-}
+export type UserLayoutProps = {
+  breadcrumbNameMap: Record<string, MenuDataItem>;
+} & Partial<ConnectProps>;
 
 const UserLayout: React.FC<UserLayoutProps> = (props) => {
   const {

src/models/connect.d.ts

@@ -1,13 +1,13 @@
-import { MenuDataItem, Settings as ProSettings } from '@ant-design/pro-layout';
+import type { MenuDataItem, Settings as ProSettings } from '@ant-design/pro-layout';
 import { GlobalModelState } from './global';
 import { UserModelState } from './user';
-import { StateType } from './login';
+import type { StateType } from './login';
 
 export { GlobalModelState, UserModelState };
 
-export interface Loading {
+export type Loading = {
   global: boolean;
-  effects: { [key: string]: boolean | undefined };
+  effects: Record<string, boolean | undefined>;
   models: {
     global?: boolean;
     menu?: boolean;
@@ -15,16 +15,16 @@ export interface Loading {
     user?: boolean;
     login?: boolean;
   };
-}
+};
 
-export interface ConnectState {
+export type ConnectState = {
   global: GlobalModelState;
   loading: Loading;
   settings: ProSettings;
   user: UserModelState;
   login: StateType;
-}
+};
 
-export interface Route extends MenuDataItem {
+export type Route = {
   routes?: Route[];
-}
+} & MenuDataItem;

src/models/global.ts

@@ -1,21 +1,21 @@
-import { Reducer, Effect } from 'umi';
+import type { Reducer, Effect } from 'umi';
 
-import { NoticeIconData } from '@/components/NoticeIcon';
+import type { NoticeIconData } from '@/components/NoticeIcon';
 import { queryNotices } from '@/services/user';
-import { ConnectState } from './connect.d';
+import type { ConnectState } from './connect.d';
 
-export interface NoticeItem extends NoticeIconData {
+export type NoticeItem = {
   id: string;
   type: string;
   status: string;
-}
+} & NoticeIconData;
 
-export interface GlobalModelState {
+export type GlobalModelState = {
   collapsed: boolean;
   notices: NoticeItem[];
-}
+};
 
-export interface GlobalModelType {
+export type GlobalModelType = {
   namespace: 'global';
   state: GlobalModelState;
   effects: {
@@ -28,7 +28,7 @@ export interface GlobalModelType {
     saveNotices: Reducer<GlobalModelState>;
     saveClearedNotices: Reducer<GlobalModelState>;
   };
-}
+};
 
 const GlobalModel: GlobalModelType = {
   namespace: 'global',

src/models/login.ts

@@ -1,18 +1,19 @@
 import { stringify } from 'querystring';
-import { history, Reducer, Effect } from 'umi';
+import type { Reducer, Effect } from 'umi';
+import { history } from 'umi';
 
 import { fakeAccountLogin } from '@/services/login';
 import { setAuthority } from '@/utils/authority';
 import { getPageQuery } from '@/utils/utils';
 import { message } from 'antd';
 
-export interface StateType {
+export type StateType = {
   status?: 'ok' | 'error';
   type?: string;
   currentAuthority?: 'user' | 'guest' | 'admin';
-}
+};
 
-export interface LoginModelType {
+export type LoginModelType = {
   namespace: string;
   state: StateType;
   effects: {
@@ -22,7 +23,7 @@ export interface LoginModelType {
   reducers: {
     changeLoginStatus: Reducer<StateType>;
   };
-}
+};
 
 const Model: LoginModelType = {
   namespace: 'login',

src/models/setting.ts

@@ -1,13 +1,14 @@
-import { Reducer } from 'umi';
-import defaultSettings, { DefaultSettings } from '../../config/defaultSettings';
+import type { Reducer } from 'umi';
+import type { DefaultSettings } from '../../config/defaultSettings';
+import defaultSettings from '../../config/defaultSettings';
 
-export interface SettingModelType {
+export type SettingModelType = {
   namespace: 'settings';
   state: DefaultSettings;
   reducers: {
     changeSetting: Reducer<DefaultSettings>;
   };
-}
+};
 
 const updateColorWeak: (colorWeak: boolean) => void = (colorWeak) => {
   const root = document.getElementById('root');

src/models/user.ts

@@ -1,8 +1,8 @@
-import { Effect, Reducer } from 'umi';
+import type { Effect, Reducer } from 'umi';
 
 import { queryCurrent, query as queryUsers } from '@/services/user';
 
-export interface CurrentUser {
+export type CurrentUser = {
   avatar?: string;
   name?: string;
   title?: string;
@@ -14,13 +14,13 @@ export interface CurrentUser {
   }[];
   userid?: string;
   unreadCount?: number;
-}
+};
 
-export interface UserModelState {
+export type UserModelState = {
   currentUser?: CurrentUser;
-}
+};
 
-export interface UserModelType {
+export type UserModelType = {
   namespace: 'user';
   state: UserModelState;
   effects: {
@@ -31,7 +31,7 @@ export interface UserModelType {
     saveCurrentUser: Reducer<UserModelState>;
     changeNotifyCount: Reducer<UserModelState>;
   };
-}
+};
 
 const UserModel: UserModelType = {
   namespace: 'user',

src/pages/404.tsx

@@ -2,7 +2,7 @@ import { Button, Result } from 'antd';
 import React from 'react';
 import { history } from 'umi';
 
-const NoFoundPage: React.FC<{}> = () => (
+const NoFoundPage: React.FC = () => (
   <Result
     status="404"
     title="404"

src/pages/ListTableList/components/UpdateForm.tsx

@@ -10,22 +10,22 @@ import {
 } from '@ant-design/pro-form';
 import { useIntl, FormattedMessage } from 'umi';
 
-import { TableListItem } from '../data.d';
+import type { TableListItem } from '../data.d';
 
-export interface FormValueType extends Partial<TableListItem> {
+export type FormValueType = {
   target?: string;
   template?: string;
   type?: string;
   time?: string;
   frequency?: string;
-}
+} & Partial<TableListItem>;
 
-export interface UpdateFormProps {
+export type UpdateFormProps = {
   onCancel: (flag?: boolean, formVals?: FormValueType) => void;
   onSubmit: (values: FormValueType) => Promise<void>;
   updateModalVisible: boolean;
   values: Partial<TableListItem>;
-}
+};
 
 const UpdateForm: React.FC<UpdateFormProps> = (props) => {
   const intl = useIntl();
@@ -46,7 +46,9 @@ const UpdateForm: React.FC<UpdateFormProps> = (props) => {
             })}
             visible={props.updateModalVisible}
             footer={submitter}
-            onCancel={() => props.onCancel()}
+            onCancel={() => {
+              props.onCancel();
+            }}
           >
             {dom}
           </Modal>

src/pages/ListTableList/data.d.ts

@@ -1,4 +1,4 @@
-export interface TableListItem {
+export type TableListItem = {
   key: number;
   disabled?: boolean;
   href: string;
@@ -11,26 +11,26 @@ export interface TableListItem {
   updatedAt: Date;
   createdAt: Date;
   progress: number;
-}
+};
 
-export interface TableListPagination {
+export type TableListPagination = {
   total: number;
   pageSize: number;
   current: number;
-}
+};
 
-export interface TableListData {
+export type TableListData = {
   list: TableListItem[];
   pagination: Partial<TableListPagination>;
-}
+};
 
-export interface TableListParams {
+export type TableListParams = {
   status?: string;
   name?: string;
   desc?: string;
   key?: number;
   pageSize?: number;
   currentPage?: number;
-  filter?: { [key: string]: any[] };
-  sorter?: { [key: string]: any };
-}
+  filter?: Record<string, any[]>;
+  sorter?: Record<string, any>;
+};

src/pages/ListTableList/index.tsx

@@ -3,11 +3,14 @@ import { Button, message, Input, Drawer } from 'antd';
 import React, { useState, useRef } from 'react';
 import { useIntl, FormattedMessage } from 'umi';
 import { PageContainer, FooterToolbar } from '@ant-design/pro-layout';
-import ProTable, { ProColumns, ActionType } from '@ant-design/pro-table';
+import type { ProColumns, ActionType } from '@ant-design/pro-table';
+import ProTable from '@ant-design/pro-table';
 import { ModalForm, ProFormText, ProFormTextArea } from '@ant-design/pro-form';
-import ProDescriptions, { ProDescriptionsItemProps } from '@ant-design/pro-descriptions';
-import UpdateForm, { FormValueType } from './components/UpdateForm';
-import { TableListItem } from './data.d';
+import type { ProDescriptionsItemProps } from '@ant-design/pro-descriptions';
+import ProDescriptions from '@ant-design/pro-descriptions';
+import type { FormValueType } from './components/UpdateForm';
+import UpdateForm from './components/UpdateForm';
+import type { TableListItem } from './data.d';
 import { queryRule, updateRule, addRule, removeRule } from './service';
 
 /**
@@ -72,7 +75,7 @@ const handleRemove = async (selectedRows: TableListItem[]) => {
   }
 };
 
-const TableList: React.FC<{}> = () => {
+const TableList: React.FC = () => {
   /**
    * 新建窗口的弹窗
    */
@@ -223,14 +226,22 @@ const TableList: React.FC<{}> = () => {
           labelWidth: 120,
         }}
         toolBarRender={() => [
-          <Button type="primary" key="primary" onClick={() => handleModalVisible(true)}>
+          <Button
+            type="primary"
+            key="primary"
+            onClick={() => {
+              handleModalVisible(true);
+            }}
+          >
             <PlusOutlined /> <FormattedMessage id="pages.searchTable.new" defaultMessage="新建" />
           </Button>,
         ]}
         request={(params, sorter, filter) => queryRule({ ...params, sorter, filter })}
         columns={columns}
         rowSelection={{
-          onChange: (_, selectedRows) => setSelectedRows(selectedRows),
+          onChange: (_, selectedRows) => {
+            setSelectedRows(selectedRows);
+          },
         }}
       />
       {selectedRowsState?.length > 0 && (

src/pages/ListTableList/service.ts

@@ -1,5 +1,5 @@
 import request from '@/utils/request';
-import { TableListParams, TableListItem } from './data.d';
+import type { TableListParams, TableListItem } from './data.d';
 
 export async function queryRule(params?: TableListParams) {
   return request('/api/rule', {

src/pages/Welcome.tsx

@@ -4,7 +4,7 @@ import { Card, Alert, Typography } from 'antd';
 import { useIntl, FormattedMessage } from 'umi';
 import styles from './Welcome.less';
 
-const CodePreview: React.FC<{}> = ({ children }) => (
+const CodePreview: React.FC = ({ children }) => (
   <pre className={styles.pre}>
     <code>
       <Typography.Text copyable>{children}</Typography.Text>

src/pages/user/login/index.tsx

@@ -10,18 +10,20 @@ import {
 import { Alert, Space, message, Tabs } from 'antd';
 import React, { useState } from 'react';
 import ProForm, { ProFormCaptcha, ProFormCheckbox, ProFormText } from '@ant-design/pro-form';
-import { connect, Dispatch, useIntl, FormattedMessage } from 'umi';
-import { StateType } from '@/models/login';
-import { getFakeCaptcha, LoginParamsType } from '@/services/login';
-import { ConnectState } from '@/models/connect';
+import { useIntl, connect, FormattedMessage } from 'umi';
+import { getFakeCaptcha } from '@/services/login';
+import type { Dispatch } from 'umi';
+import type { StateType } from '@/models/login';
+import type { LoginParamsType } from '@/services/login';
+import type { ConnectState } from '@/models/connect';
 
 import styles from './index.less';
 
-interface LoginProps {
+export type LoginProps = {
   dispatch: Dispatch;
   userLogin: StateType;
   submitting?: boolean;
-}
+};
 
 const LoginMessage: React.FC<{
   content: string;
@@ -65,8 +67,9 @@ const Login: React.FC<LoginProps> = (props) => {
             },
           },
         }}
-        onFinish={async (values) => {
+        onFinish={(values) => {
           handleSubmit(values);
+          return Promise.resolve();
         }}
       >
         <Tabs activeKey={type} onChange={setType}>
@@ -191,17 +194,18 @@ const Login: React.FC<LoginProps> = (props) => {
                 id: 'pages.login.captcha.placeholder',
                 defaultMessage: '请输入验证码',
               })}
-              captchaTextRender={(timing, count) =>
-                timing
-                  ? `${count} ${intl.formatMessage({
-                      id: 'pages.getCaptchaSecondText',
-                      defaultMessage: '获取验证码',
-                    })}`
-                  : intl.formatMessage({
-                      id: 'pages.login.phoneLogin.getVerificationCode',
-                      defaultMessage: '获取验证码',
-                    })
-              }
+              captchaTextRender={(timing, count) => {
+                if (timing) {
+                  return `${count} ${intl.formatMessage({
+                    id: 'pages.getCaptchaSecondText',
+                    defaultMessage: '获取验证码',
+                  })}`;
+                }
+                return intl.formatMessage({
+                  id: 'pages.login.phoneLogin.getVerificationCode',
+                  defaultMessage: '获取验证码',
+                });
+              }}
               name="captcha"
               rules={[
                 {

src/service-worker.js

@@ -56,14 +56,16 @@ addEventListener('message', (event) => {
   if (replyPort && message && message.type === 'skip-waiting') {
     event.waitUntil(
       self.skipWaiting().then(
-        () =>
+        () => {
           replyPort.postMessage({
             error: null,
-          }),
-        (error) =>
+          });
+        },
+        (error) => {
           replyPort.postMessage({
             error,
-          }),
+          });
+        },
       ),
     );
   }

src/services/login.ts

@@ -1,11 +1,11 @@
 import request from '@/utils/request';
 
-export interface LoginParamsType {
+export type LoginParamsType = {
   userName: string;
   password: string;
   mobile: string;
   captcha: string;
-}
+};
 
 export async function fakeAccountLogin(params: LoginParamsType) {
   return request('/api/login/account', {

src/typings.d.ts

@@ -13,13 +13,14 @@ declare module '*.tiff';
 declare module 'omit.js';
 
 // google analytics interface
-interface GAFieldsObject {
+type GAFieldsObject = {
   eventCategory: string;
   eventAction: string;
   eventLabel?: string;
   eventValue?: number;
   nonInteraction?: boolean;
-}
+};
+
 interface Window {
   ga: (
     command: 'send',
@@ -29,7 +30,7 @@ interface Window {
   reloadAuthorized: () => void;
 }
 
-declare let ga: Function;
+declare let ga: () => void;
 
 // preview.pro.ant.design only do not use in your production ;
 // preview.pro.ant.design 专用环境变量，请不要在你的项目中使用它。