AccountSettings is finsh

AccountCenter/.umirc.js

-export default {
-  plugins: [
-    ['umi-plugin-block-dev', { layout: 'ant-design-pro' }],
-    [
-      'umi-plugin-react',
-      {
-        dva: true,
-        locale: true,
-        antd: true,
-      },
-    ],
-  ],
-};

AccountCenter/src/model.ts

@@ -22,7 +22,7 @@ export default {
         call,
         put,
       }: {
-        call: callType<Function, [], Promise<any>>;
+        call: callType<Function, [], ReturnType<typeof queryCurrent>>;
         put: Dispatch;
       }
     ) {

AccountSettings/.umirc.js

-export default {
-  plugins: [
-    [
-      'umi-plugin-block-dev',
-      {
-        layout: 'ant-design-pro',
-      },
-    ],
-    [
-      'umi-plugin-react',
-      {
-        dva: true,
-        locale: true,
-        antd: true,
-      },
-    ],
-  ],
-};

AccountSettings/jsconfig.json

-{
-  "compilerOptions": {
-    "emitDecoratorMetadata": true,
-    "experimentalDecorators": true,
-    "baseUrl": ".",
-    "paths": {
-      "@/*": ["./src/*"]
-    }
-  }
-}

AccountSettings/src/_mock.js → AccountSettings/src/_mock.ts

 import city from './geographic/city.json';
 import province from './geographic/province.json';
 
-function getProvince(req, res) {
+function getProvince(req: any, res: { json: (arg0: { name: string; id: string }[]) => void }) {
   return res.json(province);
 }
 
-function getCity(req, res) {
+function getCity(
+  req: { params: { province: string | number } },
+  res: { json: (arg: any) => void }
+) {
   return res.json(city[req.params.province]);
 }
 // 代码中会兼容本地 service mock 以及部署站点的静态数据

AccountSettings/src/components/GeographicView.js → AccountSettings/src/components/GeographicView.tsx

-import React, { PureComponent } from 'react';
+import React, { Component } from 'react';
 import { Select, Spin } from 'antd';
 import { connect } from 'dva';
 import styles from './GeographicView.less';
-
+import { Dispatch } from 'redux';
+import { ProvinceData, CityData } from '../data';
 const { Option } = Select;
 
-const nullSlectItem = {
+interface SelectItem {
+  label: string;
+  key: string;
+}
+const nullSlectItem: SelectItem = {
   label: '',
   key: '',
 };
 
-@connect(({ BLOCK_NAME_CAMEL_CASE, loading }) => {
-  const { province, city } = BLOCK_NAME_CAMEL_CASE;
-  return {
-    province,
-    city,
-    loading: loading.models.BLOCK_NAME_CAMEL_CASE,
+interface GeographicViewProps {
+  dispatch?: Dispatch;
+  province?: ProvinceData[];
+  city?: CityData[];
+  value?: {
+    province: SelectItem;
+    city: SelectItem;
   };
-})
-class GeographicView extends PureComponent {
+  loading?: boolean;
+  onChange?: (value: { province: SelectItem; city: SelectItem }) => void;
+}
+
+@connect(
+  ({
+    BLOCK_NAME_CAMEL_CASE,
+    loading,
+  }: {
+    BLOCK_NAME_CAMEL_CASE: {
+      province: ProvinceData[];
+      city: CityData[];
+    };
+    loading: any;
+  }) => {
+    const { province, city } = BLOCK_NAME_CAMEL_CASE;
+    return {
+      province,
+      city,
+      loading: loading.models.BLOCK_NAME_CAMEL_CASE,
+    };
+  }
+)
+class GeographicView extends Component<GeographicViewProps> {
   componentDidMount = () => {
     const { dispatch } = this.props;
-    dispatch({
-      type: 'BLOCK_NAME_CAMEL_CASE/fetchProvince',
-    });
+    dispatch &&
+      dispatch({
+        type: 'BLOCK_NAME_CAMEL_CASE/fetchProvince',
+      });
   };
 
-  componentDidUpdate(props) {
+  componentDidUpdate(props: GeographicViewProps) {
     const { dispatch, value } = this.props;
 
     if (!props.value && !!value && !!value.province) {
-      dispatch({
-        type: 'BLOCK_NAME_CAMEL_CASE/fetchCity',
-        payload: value.province.key,
-      });
+      dispatch &&
+        dispatch({
+          type: 'BLOCK_NAME_CAMEL_CASE/fetchCity',
+          payload: value.province.key,
+        });
     }
   }
 
   getProvinceOption() {
     const { province } = this.props;
-    return this.getOption(province);
+    if (province) {
+      return this.getOption(province);
+    }
+    return [];
   }
 
   getCityOption = () => {
     const { city } = this.props;
-    return this.getOption(city);
+    if (city) {
+      return this.getOption(city);
+    }
+    return [];
   };
 
-  getOption = list => {
+  getOption = (list: CityData[] | ProvinceData[]) => {
     if (!list || list.length < 1) {
       return (
         <Option key={0} value={0}>
@@ -55,31 +91,37 @@ class GeographicView extends PureComponent {
         </Option>
       );
     }
-    return list.map(item => (
+    return (list as CityData[]).map(item => (
       <Option key={item.id} value={item.id}>
         {item.name}
       </Option>
     ));
   };
 
-  selectProvinceItem = item => {
+  selectProvinceItem = (item: SelectItem) => {
     const { dispatch, onChange } = this.props;
-    dispatch({
-      type: 'BLOCK_NAME_CAMEL_CASE/fetchCity',
-      payload: item.key,
-    });
-    onChange({
-      province: item,
-      city: nullSlectItem,
-    });
+
+    dispatch &&
+      dispatch({
+        type: 'BLOCK_NAME_CAMEL_CASE/fetchCity',
+        payload: item.key,
+      });
+
+    onChange &&
+      onChange({
+        province: item,
+        city: nullSlectItem,
+      });
   };
 
-  selectCityItem = item => {
+  selectCityItem = (item: SelectItem) => {
     const { value, onChange } = this.props;
-    onChange({
-      province: value.province,
-      city: item,
-    });
+    if (value && onChange) {
+      onChange({
+        province: value.province,
+        city: item,
+      });
+    }
   };
 
   conversionObject() {

AccountSettings/src/components/PhoneView.js → AccountSettings/src/components/PhoneView.tsx

@@ -2,7 +2,12 @@ import React, { Fragment, PureComponent } from 'react';
 import { Input } from 'antd';
 import styles from './PhoneView.less';
 
-class PhoneView extends PureComponent {
+interface PhoneViewProps {
+  value?: string;
+  onChange?: (value: string) => void;
+}
+
+class PhoneView extends PureComponent<PhoneViewProps> {
   render() {
     const { value, onChange } = this.props;
     let values = ['', ''];
@@ -15,13 +20,13 @@ class PhoneView extends PureComponent {
           className={styles.area_code}
           value={values[0]}
           onChange={e => {
-            onChange(`${e.target.value}-${values[1]}`);
+            onChange && onChange(`${e.target.value}-${values[1]}`);
           }}
         />
         <Input
           className={styles.phone_number}
           onChange={e => {
-            onChange(`${values[0]}-${e.target.value}`);
+            onChange && onChange(`${values[0]}-${e.target.value}`);
           }}
           value={values[1]}
         />

AccountSettings/src/components/base.js → AccountSettings/src/components/base.tsx

 import React, { Component, Fragment } from 'react';
-import { formatMessage, FormattedMessage } from 'umi/locale';
+import { formatMessage, FormattedMessage } from 'umi-plugin-react/locale';
 import { Form, Input, Upload, Select, Button } from 'antd';
+import { FormComponentProps } from 'antd/lib/form';
 import { connect } from 'dva';
 import styles from './BaseView.less';
 import GeographicView from './GeographicView';
 import PhoneView from './PhoneView';
-
+import { CurrentUser } from '../data';
 const FormItem = Form.Item;
 const { Option } = Select;
 
 // 头像组件 方便以后独立，增加裁剪之类的功能
-const AvatarView = ({ avatar }) => (
+const AvatarView = ({ avatar }: { avatar: string }) => (
   <Fragment>
     <div className={styles.avatar_title}>
       <FormattedMessage id="BLOCK_NAME.basic.avatar" defaultMessage="Avatar" />
@@ -27,8 +28,19 @@ const AvatarView = ({ avatar }) => (
     </Upload>
   </Fragment>
 );
+interface SelectItem {
+  label: string;
+  key: string;
+}
 
-const validatorGeographic = (rule, value, callback) => {
+const validatorGeographic = (
+  _: any,
+  value: {
+    province: SelectItem;
+    city: SelectItem;
+  },
+  callback: (message?: string) => void
+) => {
   const { province, city } = value;
   if (!province.key) {
     callback('Please input your province!');
@@ -39,7 +51,7 @@ const validatorGeographic = (rule, value, callback) => {
   callback();
 };
 
-const validatorPhone = (rule, value, callback) => {
+const validatorPhone = (rule: any, value: string, callback: (message?: string) => void) => {
   const values = value.split('-');
   if (!values[0]) {
     callback('Please input your area code!');
@@ -50,11 +62,14 @@ const validatorPhone = (rule, value, callback) => {
   callback();
 };
 
-@connect(({ BLOCK_NAME_CAMEL_CASE }) => ({
+interface BaseViewProps extends FormComponentProps {
+  currentUser: CurrentUser;
+}
+
+@connect(({ BLOCK_NAME_CAMEL_CASE }: { BLOCK_NAME_CAMEL_CASE: { currentUser: CurrentUser } }) => ({
   currentUser: BLOCK_NAME_CAMEL_CASE.currentUser,
 }))
-@Form.create()
-class BaseView extends Component {
+class BaseView extends Component<BaseViewProps> {
   componentDidMount() {
     this.setBaseInfo();
   }
@@ -76,8 +91,9 @@ class BaseView extends Component {
     const url = 'https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png';
     return url;
   }
+  view: HTMLDivElement | undefined;
 
-  getViewDom = ref => {
+  getViewDom = (ref: HTMLDivElement) => {
     this.view = ref;
   };
 
@@ -88,7 +104,7 @@ class BaseView extends Component {
     return (
       <div className={styles.baseView} ref={this.getViewDom}>
         <div className={styles.left}>
-          <Form layout="vertical" onSubmit={this.handleSubmit} hideRequiredMark>
+          <Form layout="vertical" hideRequiredMark>
             <FormItem label={formatMessage({ id: 'BLOCK_NAME.basic.email' })}>
               {getFieldDecorator('email', {
                 rules: [
@@ -185,4 +201,4 @@ class BaseView extends Component {
   }
 }
 
-export default BaseView;
+export default Form.create()(BaseView);

AccountSettings/src/components/binding.js → AccountSettings/src/components/binding.tsx

 import React, { Component, Fragment } from 'react';
-import { formatMessage, FormattedMessage } from 'umi/locale';
+import { formatMessage, FormattedMessage } from 'umi-plugin-react/locale';
 import { Icon, List } from 'antd';
 
 class BindingView extends Component {

AccountSettings/src/components/notification.js → AccountSettings/src/components/notification.tsx

 import React, { Component, Fragment } from 'react';
-import { formatMessage } from 'umi/locale';
+import { formatMessage } from 'umi-plugin-react/locale';
 import { Switch, List } from 'antd';
 
+type Unpacked<T> = T extends (infer U)[] ? U : T;
+
 class NotificationView extends Component {
   getData = () => {
     const Action = (
@@ -31,11 +33,12 @@ class NotificationView extends Component {
   };
 
   render() {
+    const data = this.getData();
     return (
       <Fragment>
-        <List
+        <List<Unpacked<typeof data>>
           itemLayout="horizontal"
-          dataSource={this.getData()}
+          dataSource={data}
           renderItem={item => (
             <List.Item actions={item.actions}>
               <List.Item.Meta title={item.title} description={item.description} />

AccountSettings/src/components/security.js → AccountSettings/src/components/security.tsx

 import React, { Component, Fragment } from 'react';
-import { formatMessage, FormattedMessage } from 'umi/locale';
+import { formatMessage, FormattedMessage } from 'umi-plugin-react/locale';
 import { List } from 'antd';
-// import { getTimeDistance } from '@/utils/utils';
+
+type Unpacked<T> = T extends (infer U)[] ? U : T;
 
 const passwordStrength = {
   strong: (
-    <font className="strong">
+    <span className="strong">
       <FormattedMessage id="BLOCK_NAME.security.strong" defaultMessage="Strong" />
-    </font>
+    </span>
   ),
   medium: (
-    <font className="medium">
+    <span className="medium">
       <FormattedMessage id="BLOCK_NAME.security.medium" defaultMessage="Medium" />
-    </font>
+    </span>
   ),
   weak: (
-    <font className="weak">
+    <span className="weak">
       <FormattedMessage id="BLOCK_NAME.security.weak" defaultMessage="Weak" />
       Weak
-    </font>
+    </span>
   ),
 };
 
@@ -83,11 +84,12 @@ class SecurityView extends Component {
   ];
 
   render() {
+    const data = this.getData();
     return (
       <Fragment>
-        <List
+        <List<Unpacked<typeof data>>
           itemLayout="horizontal"
-          dataSource={this.getData()}
+          dataSource={data}
           renderItem={item => (
             <List.Item actions={item.actions}>
               <List.Item.Meta title={item.title} description={item.description} />

AccountSettings/src/data.d.ts

+export interface ITag {
+  key: string;
+  label: string;
+}
+
+export interface Province {
+  label: string;
+  key: string;
+}
+
+export interface City {
+  label: string;
+  key: string;
+}
+
+export interface Geographic {
+  province: Province;
+  city: City;
+}
+export interface ProvinceData {
+  name: string;
+  id: string;
+}
+export interface CityData {
+  province: string;
+  name: string;
+  id: string;
+}
+export interface Notice {
+  id: string;
+  title: string;
+  logo: string;
+  description: string;
+  updatedAt: string;
+  member: string;
+  href: string;
+  memberLink: string;
+}
+
+export interface CurrentUser {
+  name: string;
+  avatar: string;
+  userid: string;
+  notice: Notice[];
+  email: string;
+  signature: string;
+  title: string;
+  group: string;
+  tags: ITag[];
+  notifyCount: number;
+  unreadCount: number;
+  country: string;
+  geographic: Geographic;
+  address: string;
+  phone: string;
+}

AccountSettings/src/index.js → AccountSettings/src/index.tsx

 import React, { Component } from 'react';
 import { connect } from 'dva';
-import { FormattedMessage } from 'umi/locale';
+import { FormattedMessage } from 'umi-plugin-react/locale';
 import { Menu } from 'antd';
 import styles from './style.less';
 import BaseView from './components/base';

AccountSettings/src/service.js → AccountSettings/src/service.ts

@@ -8,7 +8,7 @@ export async function queryProvince() {
   return request('/api/BLOCK_NAME/province');
 }
 
-export async function queryCity(province) {
+export async function queryCity(province: string) {
   return request(`/api/BLOCK_NAME/city/${province}`);
 }
 

AdvancedForm/src/components/PageHeaderWrapper/index.js

 import React from 'react';
-import { FormattedMessage } from 'umi/locale';
+import { FormattedMessage } from 'umi-plugin-react/locale';
 import Link from 'umi/link';
 import { PageHeader } from 'ant-design-pro';
 import styles from './index.less';

AdvancedProfile/src/components/PageHeaderWrapper/index.js

 import React from 'react';
-import { FormattedMessage } from 'umi/locale';
+import { FormattedMessage } from 'umi-plugin-react/locale';
 import Link from 'umi/link';
 import { PageHeader } from 'ant-design-pro';
 import styles from './index.less';

Analysis/src/components/IntroduceRow.js

 import React, { memo } from 'react';
 import { Row, Col, Icon, Tooltip } from 'antd';
-import { FormattedMessage } from 'umi/locale';
+import { FormattedMessage } from 'umi-plugin-react/locale';
 import { Charts, Trend } from 'ant-design-pro';
 import numeral from 'numeral';
 import styles from '../style.less';

Analysis/src/components/OfflineData.js

 import React, { memo } from 'react';
 import { Card, Tabs, Row, Col } from 'antd';
-import { formatMessage, FormattedMessage } from 'umi/locale';
+import { formatMessage, FormattedMessage } from 'umi-plugin-react/locale';
 import { Charts, NumberInfo } from 'ant-design-pro';
 import styles from '../style.less';
 

Analysis/src/components/ProportionSales.js

 import React, { memo } from 'react';
 import { Card, Radio } from 'antd';
 import { Charts } from 'ant-design-pro';
-import { FormattedMessage } from 'umi/locale';
+import { FormattedMessage } from 'umi-plugin-react/locale';
 import styles from '../style.less';
 import Yuan from '../utils/Yuan';
 

Analysis/src/components/SalesCard.js

 import React, { memo } from 'react';
 import { Row, Col, Card, Tabs, DatePicker } from 'antd';
-import { FormattedMessage, formatMessage } from 'umi/locale';
+import { FormattedMessage, formatMessage } from 'umi-plugin-react/locale';
 import numeral from 'numeral';
 import { Charts } from 'ant-design-pro';
 import styles from '../style.less';

Analysis/src/components/TopSearch.js

 import React, { memo } from 'react';
 import { Row, Col, Table, Tooltip, Card, Icon } from 'antd';
-import { FormattedMessage } from 'umi/locale';
+import { FormattedMessage } from 'umi-plugin-react/locale';
 import { Trend, NumberInfo, Charts } from 'ant-design-pro';
 import numeral from 'numeral';
 import styles from '../style.less';

BasicForm/src/components/PageHeaderWrapper/index.js

 import React from 'react';
-import { FormattedMessage } from 'umi/locale';
+import { FormattedMessage } from 'umi-plugin-react/locale';
 import Link from 'umi/link';
 import { PageHeader } from 'ant-design-pro';
 import styles from './index.less';

BasicForm/src/index.js

 import React, { PureComponent } from 'react';
 import { connect } from 'dva';
-import { formatMessage, FormattedMessage } from 'umi/locale';
+import { formatMessage, FormattedMessage } from 'umi-plugin-react/locale';
 import {
   Form,
   Input,

BasicList/src/index.js

 import React, { PureComponent } from 'react';
-import { FormattedMessage } from 'umi/locale';
+import { FormattedMessage } from 'umi-plugin-react/locale';
 import { findDOMNode } from 'react-dom';
 import moment from 'moment';
 import { connect } from 'dva';

BasicProfile/src/components/PageHeaderWrapper/index.js

 import React from 'react';
-import { FormattedMessage } from 'umi/locale';
+import { FormattedMessage } from 'umi-plugin-react/locale';
 import Link from 'umi/link';
 import { PageHeader } from 'ant-design-pro';
 import styles from './index.less';

CardList/src/components/PageHeaderWrapper/index.js

 import React from 'react';
-import { FormattedMessage } from 'umi/locale';
+import { FormattedMessage } from 'umi-plugin-react/locale';
 import Link from 'umi/link';
 import { PageHeader } from 'ant-design-pro';
 import styles from './index.less';

Monitor/src/index.js

 import React, { PureComponent } from 'react';
 import { connect } from 'dva';
-import { formatMessage, FormattedMessage } from 'umi/locale';
+import { formatMessage, FormattedMessage } from 'umi-plugin-react/locale';
 import { Row, Col, Card, Tooltip } from 'antd';
 import { NumberInfo, Charts } from 'ant-design-pro';
 import CountDown from 'ant-design-pro/lib/CountDown';

ResultFail/src/index.js

 import React, { Fragment } from 'react';
-import { formatMessage, FormattedMessage } from 'umi/locale';
+import { formatMessage, FormattedMessage } from 'umi-plugin-react/locale';
 import { Button, Icon, Card } from 'antd';
 import { Result } from 'ant-design-pro';
 

ResultSuccess/src/index.js

 import React, { Fragment } from 'react';
-import { formatMessage, FormattedMessage } from 'umi/locale';
+import { formatMessage, FormattedMessage } from 'umi-plugin-react/locale';
 import { Button, Row, Col, Icon, Steps, Card } from 'antd';
 import { Result } from 'ant-design-pro';
 

SearchListApplications/src/components/PageHeaderWrapper/index.js

 import React from 'react';
-import { FormattedMessage } from 'umi/locale';
+import { FormattedMessage } from 'umi-plugin-react/locale';
 import Link from 'umi/link';
 import { PageHeader } from 'ant-design-pro';
 import styles from './index.less';

SearchListArticles/src/components/PageHeaderWrapper/index.js

 import React from 'react';
-import { FormattedMessage } from 'umi/locale';
+import { FormattedMessage } from 'umi-plugin-react/locale';
 import Link from 'umi/link';
 import { PageHeader } from 'ant-design-pro';
 import styles from './index.less';

SearchListProjects/src/components/PageHeaderWrapper/index.js

 import React from 'react';
-import { FormattedMessage } from 'umi/locale';
+import { FormattedMessage } from 'umi-plugin-react/locale';
 import Link from 'umi/link';
 import { PageHeader } from 'ant-design-pro';
 import styles from './index.less';

StepForm/src/components/PageHeaderWrapper/index.js

 import React from 'react';
-import { FormattedMessage } from 'umi/locale';
+import { FormattedMessage } from 'umi-plugin-react/locale';
 import Link from 'umi/link';
 import { PageHeader } from 'ant-design-pro';
 import styles from './index.less';

UserLogin/src/index.js

 import React, { Component } from 'react';
 import { connect } from 'dva';
-import { formatMessage, FormattedMessage } from 'umi/locale';
+import { formatMessage, FormattedMessage } from 'umi-plugin-react/locale';
 import Link from 'umi/link';
 import { Checkbox, Alert, Icon } from 'antd';
 import { Login } from 'ant-design-pro';

UserRegister/src/index.js

 import React, { Component } from 'react';
 import { connect } from 'dva';
-import { formatMessage, FormattedMessage } from 'umi/locale';
+import { formatMessage, FormattedMessage } from 'umi-plugin-react/locale';
 import Link from 'umi/link';
 import router from 'umi/router';
 import { Form, Input, Button, Select, Row, Col, Popover, Progress } from 'antd';

UserRegisterResult/src/index.js

 import React from 'react';
-import { formatMessage, FormattedMessage } from 'umi/locale';
+import { formatMessage, FormattedMessage } from 'umi-plugin-react/locale';
 import { Button } from 'antd';
 import Link from 'umi/link';
 import { Result } from 'ant-design-pro';

Workplace/src/components/PageHeaderWrapper/index.js

 import React from 'react';
-import { FormattedMessage } from 'umi/locale';
+import { FormattedMessage } from 'umi-plugin-react/locale';
 import Link from 'umi/link';
 import { PageHeader } from 'ant-design-pro';
 import styles from './index.less';

tsconfig.json

@@ -15,6 +15,7 @@
     "suppressImplicitAnyIndexErrors": true,
     "noUnusedLocals": true,
     "allowJs": true,
+    "resolveJsonModule": true,
     "experimentalDecorators": true,
     "strict": true,
     "paths": {