update

configs/.eslintrc.js

@@ -21,7 +21,7 @@ module.exports = {
         'eslint:recommended',
         'plugin:import/errors',
         'plugin:import/warnings',
-        'plugin:@typescript-eslint/recommended'
+        'plugin:@typescript-eslint/recommended',
     ],
     'settings': {
         'react': {
@@ -30,6 +30,7 @@ module.exports = {
         'import/resolver': 'webpack',
     },
     'rules': {
+        '@typescript-eslint/ban-ts-comment': 0,
         'import/order': [
             'error',
             {'groups': ['builtin', 'object', 'external', 'internal', 'parent', 'index', 'sibling']},

package.json

@@ -10,7 +10,7 @@
     "test": "jest --config ./configs/jest.config.js",
     "test:watch": "jest --config ./configs/jest.config.js --watch",
     "lint": "yarn lint-es && yarn lint-type",
-    "lint-es": "eslint src --ext .tsx,.ts --config ./configs/.eslintrc.js --ignore-path ./configs/.eslintignore",
+    "lint-es": "eslint src --ext .tsx,.ts,.js,.jsx --config ./configs/.eslintrc.js --ignore-path ./configs/.eslintignore",
     "lint-type": "tsc",
     "lint:report": "yarn lint-es -f node_modules/eslint-rich-reporter/reporter.js -o eslint-report.html",
     "generateAnalyzeFile": "mkdir -p ./dist/assets && webpack --mode production --profile --json > ./dist/assets/stats.json",
@@ -74,6 +74,7 @@
     "jest": "^24.1.0",
     "less": "^3.9.0",
     "less-loader": "^4.0.6",
+    "lint-staged": "^11.0.0",
     "postcss-loader": "^3.0.0",
     "react-transform-hmr": "^1.0.4",
     "speed-measure-webpack-plugin": "^1.3.1",
@@ -106,9 +107,16 @@
   },
   "husky": {
     "hooks": {
-      "pre-push": "yarn lint && yarn test"
+      "pre-push": "yarn lint && yarn test",
+      "pre-commit": "lint-staged"
     }
   },
+  "lint-staged": {
+    "*.{ts,tsx,js,jsx}": [
+      "eslint --config ./configs/.eslintrc.js --ignore-path ./configs/.eslintignore --fix",
+      "git add ."
+    ]
+  },
   "browserslist": [
     "defaults"
   ]

src/api/request.ts

@@ -0,0 +1,133 @@
+import axios, {AxiosPromise, AxiosRequestConfig} from 'axios';
+import {get as lodashGet, assign, lowerCase} from 'lodash';
+
+const defaultOptions = {
+    withCredentials: true,
+    headers: {'Content-Type': 'application/json;charset=utf-8'},
+};
+
+const formHttpOptions = {
+    withCredentials: true,
+    headers: {'Content-Type': 'multipart/form-data'},
+};
+
+const http = axios.create(defaultOptions);
+
+const formHttp = axios.create(formHttpOptions);
+
+const handleError = error => {
+    const response = lodashGet(error, 'response');
+
+    throw assign(lodashGet(response, 'data'), {
+        status: lodashGet(response, 'status', -1),
+    });
+};
+
+const handleResponse = ({data, headers}) => {
+    if ('x-total-count' in headers) {
+        return {
+            totalCount: +lodashGet(headers, 'x-total-count'),
+            results: data,
+        };
+    }
+    return data;
+};
+
+const request = method => (url, data, ...extraOptions) => {
+    const config = {
+        url,
+        method,
+        ...extraOptions,
+    };
+
+    if (data) {
+        const key = method === 'GET' ? 'params' : 'data';
+        config[key] = data;
+    }
+
+    return http.request(config).catch(handleError).then(handleResponse);
+};
+
+const formatDataToFormData = data => {
+    const formData = new FormData();
+
+    Object.keys(data).forEach(key => {
+        formData.append(key, data[key]);
+    });
+
+    return formData;
+};
+
+const formRequest = method => (url, data, ...extraOptions) => {
+    const config = {
+        url,
+        method,
+        data: formatDataToFormData(data),
+        ...extraOptions,
+    };
+
+    return formHttp.request(config).catch(handleError).then(handleResponse);
+};
+
+// type Method = 'GET' | 'POST' | 'PUT' | 'PATCH' | 'DELETE';
+
+// type RequestParams<T = any> = T | { params: T } | { data: T };
+
+// const getRequestParams = <P = any>(method: Method, originParams?: P): RequestParams<P> => {
+//     const params = (originParams || {}) as P;
+//     if (method === 'GET') {
+//         return {params};
+//     } else if (method === 'DELETE') {
+//         return {data: params};
+//     }
+//     return params;
+// };
+
+// export const createApi = <Params = any, Data = any>(
+//     method: Method,
+//     url: string,
+//     configs?: AxiosRequestConfig
+// ) => {
+//     return (params: Params): AxiosPromise<Data> => {
+//         const requestFn = http[lowerCase(method)];
+
+//         const requestParams = getRequestParams<Params>(method, params);
+
+//         const requestConfigs = configs || {};
+
+//         // http://axios-js.com/zh-cn/docs/index.html#%E8%AF%B7%E6%B1%82%E6%96%B9%E6%B3%95%E7%9A%84%E5%88%AB%E5%90%8D
+//         if (['GET', 'DELETE'].includes(method)) {
+//             return requestFn(url, {...requestParams, ...requestConfigs});
+//         } else {
+//             return requestFn(url, requestParams, requestConfigs);
+//         }
+//     };
+// };
+
+// // 用于开发时mock接口返回
+// export const createMock = <Params = any, Data = any>(
+//     mockData: Data
+// ) => {
+//     return (params: Params): AxiosPromise<Data> => {
+//     // eslint-disable-next-line no-console
+//         console.log(params);
+
+//         // @ts-ignore
+//         return Promise.resolve({
+//             headers: {retcode: 0},
+//             data: mockData,
+//         });
+//     };
+// };
+
+export const get = request('GET');
+
+export const post = request('POST');
+
+export const put = request('PUT');
+
+export const remove = request('DELETE');
+
+export const patch = request('PATCH');
+
+export const postAsForm = formRequest('POST');

src/components/Home/index.tsx

@@ -11,7 +11,7 @@ import styles from './index.less';
 
 const request = [fetchUserInfo];
 
-const Counter = () => {
+const Counter: FC = () => {
     const [count, setCount] = useState<number>(0);
 
     const handleAdd = useCallback(

tsconfig.json

@@ -21,6 +21,7 @@
     "forceConsistentCasingInFileNames": true,
     "skipLibCheck": true,
     "strict": true,                           /* Enable all strict type-checking options. */
+    "noImplicitAny": false,
     "noImplicitThis": true,                   /* Raise error on 'this' expressions with an implied 'any' type. */
     "noImplicitReturns": true,                /* Report error when not all code paths in function return a value. */
     "moduleResolution": "node",               /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */