这ts真难配啊

Author: javaLuo

.travis.yml

@@ -1,7 +1,6 @@
 language: node_js
 node_js:
-  - '10'
-  - '8'
+  - "10"
+  - "8"
 script:
-  - yarn dll
   - yarn build

package.json

@@ -28,6 +28,8 @@
     "@types/axios": "^0.14.0",
     "@types/react": "^16.9.5",
     "@types/react-dom": "^16.9.1",
+    "@types/react-loadable": "^5.5.1",
+    "@types/react-router-dom": "^5.1.0",
     "antd": "^3.23.6",
     "axios": "^0.19.0",
     "core-js": "^3.2.1",

src/container/routers/index.js renamed to src/container/routers/index.tsx

@@ -24,29 +24,30 @@ import "./index.less";
 const Home = Loadable({
   loader: () => import(/* webpackChunkName:'home' */ "../home"),
   loading: Loading, // 自定义的Loading动画组件
-  timeout: 10000 // 可以设置一个超时时间(s)来应对网络慢的情况（在Loading动画组件中可以配置error信息）
+  timeout: 10000, // 可以设置一个超时时间(s)来应对网络慢的情况（在Loading动画组件中可以配置error信息）
 });
 const Test = Loadable({
   loader: () => import(/* webpackChunkName:'test' */ "../test"),
-  loading: Loading
+  loading: Loading,
 });
 const TestClass = Loadable({
   loader: () => import(/* webpackChunkName:'testclass' */ "../testclass"),
-  loading: Loading
+  loading: Loading,
 });
 const Features = Loadable({
   loader: () => import(/* webpackChunkName:'features' */ "../features"),
-  loading: Loading
+  loading: Loading,
 });
 const NotFound = Loadable({
   loader: () => import(/* webpackChunkName:'notfound' */ "../notfound"),
-  loading: Loading
+  loading: Loading,
 });
 
 const history = createHistory(); // 实例化history对象
 
 /** 组件 **/
-function RootRouterContainer(props) {
+function RootRouterContainer(props: any) {
+  console.log("父级参数：", props);
   // 在组件加载完毕后触发
   useEffect(() => {
     // 可以手动在此预加载指定的模块：
@@ -57,7 +58,7 @@ function RootRouterContainer(props) {
   }, []);
 
   /** 简单权限控制 **/
-  function onEnter(Component, props) {
+  function onEnter(Component: any, props: any) {
     // 例子：如果没有登录，直接跳转至login页
     // if (sessionStorage.getItem('userInfo')) {
     //   return <Component {...props} />;
@@ -77,22 +78,10 @@ function RootRouterContainer(props) {
                 <div className="boss">
                   <Switch>
                     <Redirect exact from="/" to="/home" />
-                    <Route
-                      path="/home"
-                      render={props => onEnter(Home, props)}
-                    />
-                    <Route
-                      path="/features"
-                      render={props => onEnter(Features, props)}
-                    />
-                    <Route
-                      path="/test"
-                      render={props => onEnter(Test, props)}
-                    />
-                    <Route
-                      path="/testclass"
-                      render={props => onEnter(TestClass, props)}
-                    />
+                    <Route path="/home" render={props => onEnter(Home, props)} />
+                    <Route path="/features" render={props => onEnter(Features, props)} />
+                    <Route path="/test" render={props => onEnter(Test, props)} />
+                    <Route path="/testclass" render={props => onEnter(TestClass, props)} />
                     <Route component={NotFound} />
                   </Switch>
                   <Menu />
@@ -110,6 +99,6 @@ function RootRouterContainer(props) {
 export default connect(
   state => ({}),
   dispatch => ({
-    actions: {}
-  })
+    actions: {},
+  }),
 )(RootRouterContainer);

src/global.d.ts

@@ -1 +0,0 @@
-declare const axios: any;

src/index.tsx

@@ -1,8 +1,8 @@
 /** APP入口 **/
 import "core-js/stable";
 import "regenerator-runtime/runtime";
-import React from "react";
-import ReactDOM from "react-dom";
+import * as React from "react";
+import * as ReactDOM from "react-dom";
 
 import * as serviceWorker from "./serviceWorker";
 import Root from "./root";

src/models/app.ts

@@ -1,27 +1,34 @@
+import { prototype } from "stream";
+
 /**
  * 基本Model app.js, 在src/store/index.js中被挂载到store上，命名为app
  * 可用于存放通用信息，比如用户数据、角色、权限、省市区等通用数据
  * **/
+interface IParams {
+  id?: string | number;
+  [propName: string]: any;
+}
+
 export default {
   /** store数据 **/
   state: {
-    userinfo: null // 用户信息
+    userinfo: null, // 用户信息
   },
   /** reducers **/
   reducers: {
-    setUserInfo(state, payload) {
+    setUserInfo(state: object, payload: object) {
       return Object.assign({}, state, {
-        userinfo: payload
+        userinfo: payload,
       });
-    }
+    },
   },
   /** actions 可以是一个对象，也可以是一个函数，函数的第1个参数自动被注入dispatch **/
   effects: {
     // 模拟获取用户信息
-    async getUserinfo(params = {}) {
+    async getUserinfo(params: IParams = {}) {
       const user = { id: params.id, username: "admin" };
       this.setUserInfo(user);
       return user;
-    }
-  }
+    },
+  },
 };

src/models/test.js renamed to src/models/test.ts

@@ -6,34 +6,39 @@
 import { message } from "antd";
 import Server from "../util/server"; // 自己封装的异步请求方法
 
+interface IParams {
+  id?: string | number;
+  [propName: string]: any;
+}
+
 export default {
   /** store数据 **/
   state: {
     count: 0, // 测试数字
-    fetchvalue: [] // 异步请求的测试数据
+    fetchvalue: [], // 异步请求的测试数据
   },
 
   /** reducers **/
   reducers: {
-    setCount(state, payload) {
+    setCount(state: object, payload: number) {
       return Object.assign({}, state, {
-        count: payload
+        count: payload,
       });
     },
-    setFetchValue(state, payload) {
+    setFetchValue(state: object, payload: Array<any>) {
       return Object.assign({}, state, {
-        fetchvalue: payload
+        fetchvalue: payload,
       });
-    }
+    },
   },
   /** actions **/
-  effects: dispatch => ({
+  effects: (dispatch: Function) => ({
     // 测试 - 数字加1
-    onTestAdd(params) {
+    onTestAdd(params: number) {
       this.setCount(params + 1); // 这里会指向上面reducers中的setCount
     },
     // 测试 - 异步请求
-    async serverFetch(params = {}) {
+    async serverFetch(params: IParams = {}) {
       try {
         const res = await Server.newServer("url.ajax", params, "post");
         if (res && res.data.status === 200) {
@@ -43,6 +48,6 @@ export default {
       } catch (e) {
         message.error("网络错误", 1);
       }
-    }
-  })
+    },
+  }),
 };

src/root/index.tsx

@@ -5,7 +5,7 @@
  * */
 
 /** 所需的各种插件 **/
-import React from "react";
+import * as React from "react";
 import { Provider } from "react-redux";
 import store from "../store";
 import Routers from "../container/routers";

src/store/index.ts

@@ -7,6 +7,6 @@ import test from "../models/test";
 export default init({
   models: {
     app, // 这里的命名很重要，即这个模块的名字
-    test
-  }
+    test,
+  },
 });

src/util/server.ts

@@ -6,7 +6,7 @@
 import axios, { Method } from "axios";
 
 export default class ApiService {
-  static newServer(url: string, bodyObj: object = {}, method: Method = "post") {
+  static newServer(url: string, bodyObj: object = {}, method: Method = "post"): Promise<any> {
     return axios({
       url,
       method,