[v4] transform typescript

config/config.js → config/config.ts

@@ -1,13 +1,14 @@
 // https://umijs.org/config/
 import os from 'os';
-import webpackPlugin from './plugin.config';
-import defaultSettings from '../src/defaultSettings';
 import slash from 'slash2';
+import { IPlugin } from 'umi-types';
+import defaultSettings from './defaultSettings';
+import webpackPlugin from './plugin.config';
 
 const { pwa, primaryColor } = defaultSettings;
-const { NODE_ENV, APP_TYPE, TEST } = process.env;
+const { APP_TYPE, TEST } = process.env;
 
-const plugins = [
+const plugins: IPlugin[] = [
   [
     'umi-plugin-react',
     {

src/defaultSettings.js → config/defaultSettings.ts

@@ -1,11 +1,29 @@
-module.exports = {
+export declare type SiderTheme = 'light' | 'dark';
+
+export interface DefaultSettings {
+  navTheme: string | SiderTheme;
+  primaryColor: string;
+  layout: string;
+  contentWidth: string;
+  fixedHeader: boolean;
+  autoHideHeader: boolean;
+  fixSiderbar: boolean;
+  menu: { disableLocal: boolean };
+  title: string;
+  pwa: boolean;
+  iconfontUrl: string;
+  colorWeak: boolean;
+}
+
+export default {
   navTheme: 'dark', // theme for nav menu
   primaryColor: '#1890FF', // primary color of ant design
   layout: 'sidemenu', // nav menu position: sidemenu or topmenu
   contentWidth: 'Fluid', // layout of content: Fluid or Fixed, only works when layout is topmenu
   fixedHeader: false, // sticky header
   autoHideHeader: false, // auto hide header
   fixSiderbar: false, // sticky siderbar
+  colorWeak: false,
   menu: {
     disableLocal: false,
   },
@@ -15,4 +33,4 @@ module.exports = {
   // eg：//at.alicdn.com/t/font_1039637_btcrd5co4w.js
   // 注意：如果需要图标多色，Iconfont图标项目里要进行批量去色处理
   iconfontUrl: '',
-};
+} as DefaultSettings;

package.json

@@ -13,8 +13,8 @@
     "analyze": "cross-env ANALYZE=1 umi build",
     "lint:style": "stylelint 'src/**/*.less' --syntax less",
     "lint:prettier": "check-prettier lint",
-    "lint": "eslint --ext .js src mock tests && npm run lint:style && npm run lint:prettier",
-    "lint:fix": "eslint --fix --ext .js src mock tests && stylelint --fix 'src/**/*.less' --syntax less",
+    "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-staged": "lint-staged",
     "lint-staged:js": "eslint --ext .js",
     "test": "umi test",
@@ -47,9 +47,12 @@
     "react-copy-to-clipboard": "^5.0.1",
     "react-document-title": "^2.0.3",
     "react-media": "^1.8.0",
-    "umi-request": "^1.0.0"
+    "react-media-hook2": "^1.0.2",
+    "umi-request": "^1.0.0",
+    "umi-types": "^0.2.0"
   },
   "devDependencies": {
+    "@types/jest": "^24.0.11",
     "@types/react": "^16.8.1",
     "@types/react-dom": "^16.0.11",
     "antd-pro-merge-less": "^1.0.0",
@@ -90,8 +93,8 @@
     "tslint-react": "^3.6.0",
     "umi": "^2.4.4",
     "umi-plugin-ga": "^1.1.3",
-    "umi-plugin-react": "^1.3.4",
-    "umi-plugin-pro-block": "^1.2.0"
+    "umi-plugin-pro-block": "^1.2.0",
+    "umi-plugin-react": "^1.3.4"
   },
   "optionalDependencies": {
     "puppeteer": "^1.12.1"

src/app.js → src/app.ts

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

src/components/GlobalHeader/RightContent.js → src/components/GlobalHeader/RightContent.tsx

@@ -1,6 +1,7 @@
-import React, { PureComponent } from 'react';
-import { FormattedMessage, formatMessage } from 'umi/locale';
+import React, { Component } from 'react';
+import { FormattedMessage, formatMessage } from 'umi-plugin-locale';
 import { Spin, Tag, Menu, Icon, Avatar, Tooltip, message } from 'antd';
+import { ClickParam } from 'antd/es/menu';
 import moment from 'moment';
 import groupBy from 'lodash/groupBy';
 import { NoticeIcon } from 'ant-design-pro';
@@ -9,7 +10,29 @@ import HeaderDropdown from '../HeaderDropdown';
 import SelectLang from '../SelectLang';
 import styles from './index.less';
 
-export default class GlobalHeaderRight extends PureComponent {
+export declare 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;
+  };
+  fetchingNotices?: boolean;
+  onNoticeVisibleChange?: (visible: boolean) => void;
+  onMenuClick?: (param: ClickParam) => void;
+  onNoticeClear?: (tabName: string) => void;
+  theme?: SiderTheme;
+}
+export default class GlobalHeaderRight extends Component<GlobalHeaderRightProps> {
   getNoticeData() {
     const { notices = [] } = this.props;
     if (notices.length === 0) {
@@ -41,7 +64,7 @@ export default class GlobalHeaderRight extends PureComponent {
     return groupBy(newNotices, 'type');
   }
 
-  getUnreadData = noticeData => {
+  getUnreadData: (noticeData: object) => any = noticeData => {
     const unreadMsg = {};
     Object.entries(noticeData).forEach(([key, value]) => {
       if (!unreadMsg[key]) {
@@ -126,25 +149,26 @@ export default class GlobalHeaderRight extends PureComponent {
             <Icon type="question-circle-o" />
           </a>
         </Tooltip>
+
         <NoticeIcon
           className={styles.action}
           count={currentUser.unreadCount}
           onItemClick={(item, tabProps) => {
             console.log(item, tabProps); // eslint-disable-line
-            this.changeReadState(item, tabProps);
+            this.changeReadState(item);
           }}
           loading={fetchingNotices}
           locale={{
             emptyText: formatMessage({ id: 'component.noticeIcon.empty' }),
             clear: formatMessage({ id: 'component.noticeIcon.clear' }),
-            viewMore: formatMessage({ id: 'component.noticeIcon.view-more' }),
+            viewMore: formatMessage({ id: 'component.noticeIcon.view-more' }), // todo:node_modules/ant-design-pro/lib/NoticeIcon/index.d.ts 21 [key: string]: string;
             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')}
+          onViewMore={() => message.info('Click on view more')} // todo:onViewMore?: (tabProps: INoticeIconProps) => void;
           clearClose
         >
           <NoticeIcon.Tab
@@ -153,7 +177,7 @@ export default class GlobalHeaderRight extends PureComponent {
             title="notification"
             emptyText={formatMessage({ id: 'component.globalHeader.notification.empty' })}
             emptyImage="https://gw.alipayobjects.com/zos/rmsportal/wAhyIChODzsoKIOBHcBk.svg"
-            showViewMore
+            showViewMore // todo:showViewMore?: boolean;  skeletonProps?: SkeletonProps;
           />
           <NoticeIcon.Tab
             count={unreadMsg.message}

src/components/GlobalHeader/index.js → src/components/GlobalHeader/index.tsx

@@ -1,22 +1,30 @@
-import React, { PureComponent } from 'react';
+import React, { Component } from 'react';
 import { Icon } from 'antd';
 import Link from 'umi/link';
-import Debounce from 'lodash-decorators/debounce';
+import debounce from 'lodash/debounce';
 import styles from './index.less';
 import RightContent from './RightContent';
 
-export default class GlobalHeader extends PureComponent {
+interface GlobalHeaderProps {
+  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();
   }
-  /* eslint-disable*/
-  @Debounce(600)
-  triggerResizeEvent() {
+  triggerResizeEvent = debounce(() => {
     // eslint-disable-line
     const event = document.createEvent('HTMLEvents');
     event.initEvent('resize', true, false);
     window.dispatchEvent(event);
-  }
+  });
   toggle = () => {
     const { collapsed, onCollapse } = this.props;
     onCollapse(!collapsed);

src/components/HeaderDropdown/index.tsx

@@ -0,0 +1,22 @@
+import React, { Component } from 'react';
+import { Dropdown } from 'antd';
+import classNames from 'classnames';
+import styles from './index.less';
+
+declare type OverlayFunc = () => React.ReactNode;
+
+interface HeaderDropdownProps {
+  overlayClassName?: string;
+  overlay: React.ReactNode | OverlayFunc;
+  placement?: 'bottomLeft' | 'bottomRight' | 'topLeft' | 'topCenter' | 'topRight' | 'bottomCenter';
+}
+
+export default class HeaderDropdown extends Component<HeaderDropdownProps> {
+  render() {
+    const { overlayClassName, ...props } = this.props;
+
+    return (
+      <Dropdown overlayClassName={classNames(styles.container, overlayClassName)} {...props} />
+    );
+  }
+}