[v4] Strict ts

.eslintrc.js

@@ -35,5 +35,7 @@ module.exports = {
   },
   settings: {
     polyfills: ['fetch', 'promises', 'url'],
+    // support import modules from TypeScript files in JavaScript files
+    'import/resolver': { node: { extensions: ['.js', '.ts', '.tsx'] } },
   },
 };

.prettierrc

@@ -1,6 +1,6 @@
 {
   "singleQuote": true,
-  "trailingComma": "es5",
+  "trailingComma": "all",
   "printWidth": 100,
   "overrides": [
     {

config/config.ts

@@ -1,7 +1,7 @@
 // https://umijs.org/config/
-import os from 'os';
+// import os from 'os';
 import slash from 'slash2';
-import { IPlugin } from 'umi-types';
+import { IPlugin, IConfig } from 'umi-types';
 import defaultSettings from './defaultSettings';
 import webpackPlugin from './plugin.config';
 
@@ -144,6 +144,5 @@ export default {
   manifest: {
     basePath: '/',
   },
-
   chainWebpack: webpackPlugin,
-};
+} as IConfig;

config/defaultSettings.ts

@@ -1,7 +1,7 @@
-export declare type SiderTheme = 'light' | 'dark';
+import { MenuTheme } from 'antd/es/menu';
 
 export interface DefaultSettings {
-  navTheme: string | SiderTheme;
+  navTheme: string | MenuTheme;
   primaryColor: string;
   layout: string;
   contentWidth: string;

package.json

@@ -11,12 +11,15 @@
     "dev:no-mock": "cross-env MOCK=none umi dev",
     "build": "umi build",
     "analyze": "cross-env ANALYZE=1 umi build",
+    "lint:js": "eslint --ext .js src tests",
+    "lint:ts": "tslint -p . -c tslint.yml",
     "lint:style": "stylelint 'src/**/*.less' --syntax less",
     "lint:prettier": "check-prettier lint",
-    "lint": "eslint --ext .js src tests && npm run lint:style && npm run lint:prettier",
-    "lint:fix": "eslint --fix --ext .js src tests && stylelint --fix 'src/**/*.less' --syntax less",
+    "lint": "npm run lint:js && npm run lint:ts && npm run lint:style && npm run lint:prettier",
+    "lint:fix": "eslint --fix --ext .js src tests && tslint --fix -p . -c tslint.yml && stylelint --fix 'src/**/*.less' --syntax less",
     "lint-staged": "lint-staged",
     "lint-staged:js": "eslint --ext .js",
+    "lint-staged:ts": "tslint",
     "test": "umi test",
     "test:component": "umi test ./src/components",
     "test:all": "node ./tests/run-tests.js",
@@ -48,12 +51,16 @@
     "react-document-title": "^2.0.3",
     "react-media": "^1.8.0",
     "react-media-hook2": "^1.0.2",
-    "umi-request": "^1.0.0",
-    "umi-types": "^0.2.0"
+    "umi-request": "^1.0.0"
   },
   "devDependencies": {
+    "@types/classnames": "^2.2.7",
+    "@types/enzyme": "^3.9.0",
     "@types/jest": "^24.0.11",
+    "@types/lodash": "^4.14.122",
+    "@types/memoize-one": "^4.1.0",
     "@types/react": "^16.8.1",
+    "@types/react-document-title": "^2.0.3",
     "@types/react-dom": "^16.0.11",
     "antd-pro-merge-less": "^1.0.0",
     "antd-theme-webpack-plugin": "^1.2.0",
@@ -90,11 +97,13 @@
     "stylelint-order": "^2.0.0",
     "tslint": "^5.12.1",
     "tslint-config-prettier": "^1.17.0",
+    "tslint-eslint-rules": "^5.4.0",
     "tslint-react": "^3.6.0",
     "umi": "^2.4.4",
     "umi-plugin-ga": "^1.1.3",
     "umi-plugin-pro-block": "^1.2.0",
-    "umi-plugin-react": "^1.3.4"
+    "umi-plugin-react": "^1.3.4",
+    "umi-types": "^0.2.0"
   },
   "optionalDependencies": {
     "puppeteer": "^1.12.1"
@@ -105,6 +114,7 @@
       "git add"
     ],
     "**/*.{js,jsx}": "npm run lint-staged:js",
+    "**/*.{ts,tsx}": "npm run lint-staged:ts",
     "**/*.less": "stylelint --syntax less"
   },
   "engines": {

src/app.ts

@@ -24,7 +24,7 @@ function ergodicRoutes(routes, authKey, authority) {
 
 export function patchRoutes(routes) {
   Object.keys(authRoutes).map(authKey =>
-    ergodicRoutes(routes, authKey, authRoutes[authKey].authority)
+    ergodicRoutes(routes, authKey, authRoutes[authKey].authority),
   );
   (window as any).g_routes = routes;
 }
@@ -39,6 +39,6 @@ export function render(oldRender) {
       },
       () => {
         oldRender();
-      }
+      },
     );
 }

src/components/GlobalHeader/RightContent.tsx

@@ -1,3 +1,6 @@
+import { ConnectProps } from '@/models/connect';
+import { NoticeItem } from '@/models/global';
+import { CurrentUser } from '@/models/user';
 import React, { Component } from 'react';
 import { FormattedMessage, formatMessage } from 'umi-plugin-locale';
 import { Spin, Tag, Menu, Icon, Avatar, Tooltip, message } from 'antd';
@@ -10,38 +13,28 @@ import HeaderDropdown from '../HeaderDropdown';
 import SelectLang from '../SelectLang';
 import styles from './index.less';
 
-export declare type SiderTheme = 'light' | 'dark';
+export type SiderTheme = 'light' | 'dark';
 
-interface GlobalHeaderRightProps {
-  notices?: any[];
-  dispatch?: (args: any) => void;
-  // wait for https://github.com/umijs/umi/pull/2036
-  currentUser?: {
-    avatar?: string;
-    name?: string;
-    title?: string;
-    group?: string;
-    signature?: string;
-    geographic?: any;
-    tags?: any[];
-    unreadCount: number;
-  };
+export interface GlobalHeaderRightProps extends ConnectProps {
+  notices?: NoticeItem[];
+  currentUser?: CurrentUser;
   fetchingNotices?: boolean;
   onNoticeVisibleChange?: (visible: boolean) => void;
   onMenuClick?: (param: ClickParam) => void;
   onNoticeClear?: (tabName: string) => void;
   theme?: SiderTheme;
 }
+
 export default class GlobalHeaderRight extends Component<GlobalHeaderRightProps> {
-  getNoticeData() {
+  getNoticeData = (): { [key: string]: NoticeItem[] } => {
     const { notices = [] } = this.props;
     if (notices.length === 0) {
       return {};
     }
     const newNotices = notices.map(notice => {
       const newNotice = { ...notice };
       if (newNotice.datetime) {
-        newNotice.datetime = moment(notice.datetime).fromNow();
+        newNotice.datetime = moment(notice.datetime as string).fromNow();
       }
       if (newNotice.id) {
         newNotice.key = newNotice.id;
@@ -62,10 +55,10 @@ export default class GlobalHeaderRight extends Component<GlobalHeaderRightProps>
       return newNotice;
     });
     return groupBy(newNotices, 'type');
-  }
+  };
 
-  getUnreadData: (noticeData: object) => any = noticeData => {
-    const unreadMsg = {};
+  getUnreadData = (noticeData: { [key: string]: NoticeItem[] }) => {
+    const unreadMsg: { [key: string]: number } = {};
     Object.entries(noticeData).forEach(([key, value]) => {
       if (!unreadMsg[key]) {
         unreadMsg[key] = 0;
@@ -77,10 +70,10 @@ export default class GlobalHeaderRight extends Component<GlobalHeaderRightProps>
     return unreadMsg;
   };
 
-  changeReadState = clickedItem => {
+  changeReadState = (clickedItem: NoticeItem) => {
     const { id } = clickedItem;
     const { dispatch } = this.props;
-    dispatch({
+    dispatch!({
       type: 'global/changeNoticeReadState',
       payload: id,
     });
@@ -133,10 +126,10 @@ export default class GlobalHeaderRight extends Component<GlobalHeaderRightProps>
             formatMessage({ id: 'component.globalHeader.search.example3' }),
           ]}
           onSearch={value => {
-            console.log('input', value); // eslint-disable-line
+            console.log('input', value); // tslint:disable-line no-console
           }}
           onPressEnter={value => {
-            console.log('enter', value); // eslint-disable-line
+            console.log('enter', value); // tslint:disable-line no-console
           }}
         />
         <Tooltip title={formatMessage({ id: 'component.globalHeader.help' })}>
@@ -152,23 +145,23 @@ export default class GlobalHeaderRight extends Component<GlobalHeaderRightProps>
 
         <NoticeIcon
           className={styles.action}
-          count={currentUser.unreadCount}
+          count={currentUser && currentUser.unreadCount}
           onItemClick={(item, tabProps) => {
-            console.log(item, tabProps); // eslint-disable-line
-            this.changeReadState(item);
+            console.log(item, tabProps); // tslint:disable-line no-console
+            this.changeReadState(item as NoticeItem);
           }}
           loading={fetchingNotices}
           locale={{
             emptyText: formatMessage({ id: 'component.noticeIcon.empty' }),
             clear: formatMessage({ id: 'component.noticeIcon.clear' }),
-            viewMore: formatMessage({ id: 'component.noticeIcon.view-more' }), // todo:node_modules/ant-design-pro/lib/NoticeIcon/index.d.ts 21 [key: string]: string;
+            viewMore: formatMessage({ id: 'component.noticeIcon.view-more' }),
             notification: formatMessage({ id: 'component.globalHeader.notification' }),
             message: formatMessage({ id: 'component.globalHeader.message' }),
             event: formatMessage({ id: 'component.globalHeader.event' }),
           }}
           onClear={onNoticeClear}
           onPopupVisibleChange={onNoticeVisibleChange}
-          onViewMore={() => message.info('Click on view more')} // todo:onViewMore?: (tabProps: INoticeIconProps) => void;
+          onViewMore={() => message.info('Click on view more')}
           clearClose
         >
           <NoticeIcon.Tab
@@ -196,7 +189,7 @@ export default class GlobalHeaderRight extends Component<GlobalHeaderRightProps>
             showViewMore
           />
         </NoticeIcon>
-        {currentUser.name ? (
+        {currentUser && currentUser.name ? (
           <HeaderDropdown overlay={menu}>
             <span className={`${styles.action} ${styles.account}`}>
               <Avatar

src/components/GlobalHeader/index.tsx

@@ -3,31 +3,35 @@ import { Icon } from 'antd';
 import Link from 'umi/link';
 import debounce from 'lodash/debounce';
 import styles from './index.less';
-import RightContent from './RightContent';
+import RightContent, { GlobalHeaderRightProps } from './RightContent';
 
-interface GlobalHeaderProps {
+type PartialGlobalHeaderRightProps = {
+  [K in
+    | 'onMenuClick'
+    | 'onNoticeClear'
+    | 'onNoticeVisibleChange'
+    | 'currentUser']?: GlobalHeaderRightProps[K]
+};
+
+export interface GlobalHeaderProps extends PartialGlobalHeaderRightProps {
   collapsed?: boolean;
   onCollapse?: (collapsed: boolean) => void;
   isMobile?: boolean;
   logo?: string;
-  onNoticeClear?: (type: string) => void;
-  onMenuClick?: ({ key: string }) => void;
-  onNoticeVisibleChange?: (b: boolean) => void;
 }
 
 export default class GlobalHeader extends Component<GlobalHeaderProps> {
-  componentWillUnmount() {
-    this.triggerResizeEvent.cancel();
-  }
   triggerResizeEvent = debounce(() => {
-    // eslint-disable-line
     const event = document.createEvent('HTMLEvents');
     event.initEvent('resize', true, false);
     window.dispatchEvent(event);
   });
+  componentWillUnmount() {
+    this.triggerResizeEvent.cancel();
+  }
   toggle = () => {
     const { collapsed, onCollapse } = this.props;
-    onCollapse(!collapsed);
+    if (onCollapse) onCollapse(!collapsed);
     this.triggerResizeEvent();
   };
   render() {

src/components/PageLoading/index.tsx

@@ -3,7 +3,7 @@ import { Spin } from 'antd';
 
 // loading components from code split
 // https://umijs.org/plugin/umi-plugin-react.html#dynamicimport
-const PageLoding: React.SFC = () => (
+const PageLoding: React.FunctionComponent = () => (
   <div style={{ paddingTop: 100, textAlign: 'center' }}>
     <Spin size="large" />
   </div>

src/components/SelectLang/index.tsx

@@ -8,7 +8,7 @@ import styles from './index.less';
 interface SelectLangProps {
   className?: string;
 }
-const SelectLang: React.SFC<SelectLangProps> = props => {
+const SelectLang: React.FunctionComponent<SelectLangProps> = props => {
   const { className } = props;
   const selectedLang = getLocale();
   const changeLang = ({ key }) => {

src/components/SettingDrawer/BlockCheckbox.tsx

@@ -7,7 +7,7 @@ interface BlockChecboxProps {
   onChange: (key: string) => void;
   list: any[];
 }
-const BlockChecbox: React.SFC<BlockChecboxProps> = ({ value, onChange, list }) => (
+const BlockChecbox: React.FunctionComponent<BlockChecboxProps> = ({ value, onChange, list }) => (
   <div className={style.blockChecbox} key={value}>
     {list.map(item => (
       <Tooltip title={item.title} key={item.key}>

src/components/SettingDrawer/ThemeColor.tsx

@@ -9,7 +9,7 @@ interface TagProps {
   className?: string;
   onClick?: () => void;
 }
-const Tag: React.SFC<TagProps> = ({ color, check, ...rest }) => (
+const Tag: React.FunctionComponent<TagProps> = ({ color, check, ...rest }) => (
   <div
     {...rest}
     style={{
@@ -27,7 +27,12 @@ interface ThemeColorProps {
   onChange: (color: string) => void;
 }
 
-const ThemeColor: React.SFC<ThemeColorProps> = ({ colors, title, value, onChange }) => {
+const ThemeColor: React.FunctionComponent<ThemeColorProps> = ({
+  colors,
+  title,
+  value,
+  onChange,
+}) => {
   let colorList = colors;
   if (!colors) {
     colorList = [

src/components/SettingDrawer/index.tsx

@@ -15,7 +15,7 @@ interface BodyProps {
   style?: React.CSSProperties;
 }
 
-const Body: React.SFC<BodyProps> = ({ children, title, style }) => (
+const Body: React.FunctionComponent<BodyProps> = ({ children, title, style }) => (
   <div
     style={{
       ...style,
@@ -221,6 +221,7 @@ class SettingDrawer extends Component<SettingDrawerProps, SettingDrawerState> {
             <List.Item
               actions={[
                 <Switch
+                  key="Switch"
                   size="small"
                   checked={!!colorWeak}
                   onChange={checked => this.changeSetting('colorWeak', checked)}