typehints

Author: lsaint

umi/config/config.ts

@@ -1,5 +1,6 @@
 // ref: https://umijs.org/config/
 export default {
+  title: 'todos',
   antd: {},
   dva: { hmr: true },
   dynamicImport: {},

umi/package.json

@@ -8,34 +8,34 @@
     "precommit": "lint-staged"
   },
   "dependencies": {
-    "ahooks": "^2.10.0",
-    "antd": "^4.15.1",
-    "axios": "^0.21.1",
+    "ahooks": "^2.10.12",
+    "antd": "^4.16.13",
+    "axios": "^0.24.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
   },
   "devDependencies": {
-    "@ant-design/icons": "^4.6.2",
-    "@types/node": "^14.14.41",
-    "@types/react": "17.0.3",
-    "@typescript-eslint/eslint-plugin": "^4.22.0",
+    "@ant-design/icons": "^4.7.0",
+    "@types/node": "^16.11.7",
+    "@types/react": "17.0.35",
+    "@typescript-eslint/eslint-plugin": "^5.4.0",
     "@umijs/plugin-blocks": "^2.2.2",
     "@umijs/plugin-sass": "^1.1.1",
-    "@umijs/preset-react": "^1.8.4",
+    "@umijs/preset-react": "^1.8.29",
     "@umijs/preset-ui": "^2.2.9",
     "babel-eslint": "^10.1.0",
-    "eslint": "^7.24.0",
+    "eslint": "^8.2.0",
     "eslint-config-umi": "^1.6.0",
-    "eslint-plugin-flowtype": "^5.7.0",
-    "eslint-plugin-import": "^2.22.1",
-    "eslint-plugin-jsx-a11y": "^6.4.1",
-    "eslint-plugin-react": "^7.23.2",
-    "eslint-plugin-react-hooks": "^4.2.0",
-    "husky": "^6.0.0",
-    "lint-staged": "^10.5.4",
+    "eslint-plugin-flowtype": "^8.0.3",
+    "eslint-plugin-import": "^2.25.3",
+    "eslint-plugin-jsx-a11y": "^6.5.1",
+    "eslint-plugin-react": "^7.27.0",
+    "eslint-plugin-react-hooks": "^4.3.0",
+    "husky": "^7.0.4",
+    "lint-staged": "^12.0.2",
     "react-test-renderer": "^17.0.2",
-    "typescript": "^4.2.4",
-    "umi": "3.4.8"
+    "typescript": "^4.5.2",
+    "umi": "3.5.20"
   },
   "lint-staged": {},
   "engines": {

umi/src/pages/todos/model.ts

@@ -8,7 +8,7 @@
 // 更新model层中state –>
 // 触发view层的render方法进行重新渲染 –>
 // 页面更新
-import { Effect, Reducer } from 'umi';
+import { Effect, ImmerReducer } from 'umi';
 import { getRemoteItems, getUser } from '@/services/remoteItems';
 import { delay } from '@/utils';
 
@@ -26,8 +26,8 @@ interface TodosModelType {
   namespace: 'todos';
   state: TodosState;
   reducers: {
-    addTodo: Reducer<TodosState>;
-    delTodo: Reducer<TodosState>;
+    addTodo: ImmerReducer<TodosState>;
+    delTodo: ImmerReducer<TodosState>;
   };
   effects: {
     addTodoAsync: Effect;
@@ -36,11 +36,6 @@ interface TodosModelType {
   };
 }
 
-interface TodosAction<T> {
-  type: string;
-  payload: T;
-}
-
 const TodosModel: TodosModelType = {
   namespace: 'todos',
 
@@ -53,7 +48,7 @@ const TodosModel: TodosModelType = {
 
   // type Reducer<S, A> = (state: S, action: A) => S
   reducers: {
-    addTodo(state: TodosState, action: TodosAction<{ memo: string }>) {
+    addTodo(state, action) {
       let { id } = state;
       id++;
       const { memo } = action.payload;
@@ -66,18 +61,18 @@ const TodosModel: TodosModelType = {
       };
     },
 
-    delTodo(state: TodosState, action: TodosAction<{ id: number }>) {
+    delTodo(state, action) {
       const { id } = action.payload;
       const items = { ...state.items };
       delete items[id];
       return { id: state.id, items };
     },
   }, // end reducers
 
-  // yield call 调用异步方法
-  // put 调用同步方法, 必须触发Action
+  // call 调用异步方法
+  // put 触发Action
   effects: {
-    *addTodoAsync({ payload }: TodosAction<{ id: number }>, { put }: any) {
+    *addTodoAsync({ payload }, { put }) {
       yield delay(1000);
       yield put({
         type: 'addTodo',