ts 未完待续

Author: javaLuo

package.json

@@ -25,6 +25,9 @@
   },
   "dependencies": {
     "@rematch/core": "^1.2.0",
+    "@types/axios": "^0.14.0",
+    "@types/react": "^16.9.5",
+    "@types/react-dom": "^16.9.1",
     "antd": "^3.23.6",
     "axios": "^0.19.0",
     "core-js": "^3.2.1",
@@ -39,18 +42,20 @@
     "redux": "^4.0.4"
   },
   "devDependencies": {
-    "@babel/core": "^7.6.2",
+    "@babel/core": "^7.6.3",
     "@babel/plugin-proposal-class-properties": "^7.5.5",
     "@babel/plugin-proposal-decorators": "^7.6.0",
     "@babel/plugin-proposal-nullish-coalescing-operator": "^7.4.4",
     "@babel/plugin-proposal-object-rest-spread": "^7.6.2",
     "@babel/plugin-proposal-optional-chaining": "^7.6.0",
     "@babel/plugin-syntax-dynamic-import": "^7.2.0",
     "@babel/plugin-transform-runtime": "^7.6.2",
-    "@babel/preset-env": "^7.6.2",
-    "@babel/preset-react": "^7.0.0",
-    "@babel/runtime": "^7.6.2",
+    "@babel/preset-env": "^7.6.3",
+    "@babel/preset-react": "^7.6.3",
+    "@babel/runtime": "^7.6.3",
+    "@types/react-redux": "^7.1.4",
     "autoprefixer": "^9.6.4",
+    "awesome-typescript-loader": "^5.2.1",
     "babel-eslint": "^10.0.3",
     "babel-loader": "^8.0.6",
     "babel-plugin-import": "^1.12.2",
@@ -75,9 +80,11 @@
     "optimize-css-assets-webpack-plugin": "^5.0.3",
     "postcss-loader": "^3.0.0",
     "prettier": "1.18.2",
+    "source-map-loader": "^0.2.4",
     "style-loader": "^1.0.0",
     "sw-precache-webpack-plugin": "^0.11.5",
     "terser-webpack-plugin": "^2.1.2",
+    "typescript": "^3.6.3",
     "url-loader": "^2.2.0",
     "webpack": "^4.41.0",
     "webpack-cli": "^3.3.9",

src/global.d.ts

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

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

@@ -15,6 +15,6 @@ ReactDOM.render(<Root />, document.getElementById("app-root"));
 
 serviceWorker.register();
 
-if (module.hot) {
-  module.hot.accept();
+if ((module as any).hot) {
+  (module as any).hot.accept();
 }

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

@@ -10,10 +10,12 @@ import { Provider } from "react-redux";
 import store from "../store";
 import Routers from "../container/routers";
 
-export default function RootContainer() {
+const RootContainer: React.FC = () => {
   return (
     <Provider store={store}>
       <Routers />
     </Provider>
   );
-}
+};
+
+export default RootContainer;

src/root/index.js renamed to src/root/index.tsx

@@ -8,30 +8,38 @@
 // resources are updated in the background.
 
 // To learn more about the benefits of this model and instructions on how to
-// opt-in, read http://bit.ly/CRA-PWA
+// opt-in, read https://bit.ly/CRA-PWA
 
 const isLocalhost = Boolean(
-  window.location.hostname === "localhost" ||
+  window.location.hostname === 'localhost' ||
     // [::1] is the IPv6 localhost address.
-    window.location.hostname === "[::1]" ||
+    window.location.hostname === '[::1]' ||
     // 127.0.0.1/8 is considered localhost for IPv4.
     window.location.hostname.match(
       /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
     )
 );
 
-export function register(config) {
-  if (process.env.NODE_ENV === "production" && "serviceWorker" in navigator) {
+type Config = {
+  onSuccess?: (registration: ServiceWorkerRegistration) => void;
+  onUpdate?: (registration: ServiceWorkerRegistration) => void;
+};
+
+export function register(config?: Config) {
+  if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
     // The URL constructor is available in all browsers that support SW.
-    const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
+    const publicUrl = new URL(
+      (process as { env: { [key: string]: string } }).env.PUBLIC_URL,
+      window.location.href
+    );
     if (publicUrl.origin !== window.location.origin) {
       // Our service worker won't work if PUBLIC_URL is on a different origin
       // from what our page is served on. This might happen if a CDN is used to
       // serve assets; see https://github.com/facebook/create-react-app/issues/2374
       return;
     }
 
-    window.addEventListener("load", () => {
+    window.addEventListener('load', () => {
       const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
 
       if (isLocalhost) {
@@ -42,8 +50,8 @@ export function register(config) {
         // service worker/PWA documentation.
         navigator.serviceWorker.ready.then(() => {
           console.log(
-            "This web app is being served cache-first by a service " +
-              "worker. To learn more, visit http://bit.ly/CRA-PWA"
+            'This web app is being served cache-first by a service ' +
+              'worker. To learn more, visit https://bit.ly/CRA-PWA'
           );
         });
       } else {
@@ -54,7 +62,7 @@ export function register(config) {
   }
 }
 
-function registerValidSW(swUrl, config) {
+function registerValidSW(swUrl: string, config?: Config) {
   navigator.serviceWorker
     .register(swUrl)
     .then(registration => {
@@ -64,14 +72,14 @@ function registerValidSW(swUrl, config) {
           return;
         }
         installingWorker.onstatechange = () => {
-          if (installingWorker.state === "installed") {
+          if (installingWorker.state === 'installed') {
             if (navigator.serviceWorker.controller) {
               // At this point, the updated precached content has been fetched,
               // but the previous service worker will still serve the older
               // content until all client tabs are closed.
               console.log(
-                "New content is available and will be used when all " +
-                  "tabs for this page are closed. See http://bit.ly/CRA-PWA."
+                'New content is available and will be used when all ' +
+                  'tabs for this page are closed. See https://bit.ly/CRA-PWA.'
               );
 
               // Execute callback
@@ -82,7 +90,7 @@ function registerValidSW(swUrl, config) {
               // At this point, everything has been precached.
               // It's the perfect time to display a
               // "Content is cached for offline use." message.
-              console.log("Content is cached for offline use.");
+              console.log('Content is cached for offline use.');
 
               // Execute callback
               if (config && config.onSuccess) {
@@ -94,19 +102,19 @@ function registerValidSW(swUrl, config) {
       };
     })
     .catch(error => {
-      console.error("Error during service worker registration:", error);
+      console.error('Error during service worker registration:', error);
     });
 }
 
-function checkValidServiceWorker(swUrl, config) {
+function checkValidServiceWorker(swUrl: string, config?: Config) {
   // Check if the service worker can be found. If it can't reload the page.
   fetch(swUrl)
     .then(response => {
       // Ensure service worker exists, and that we really are getting a JS file.
-      const contentType = response.headers.get("content-type");
+      const contentType = response.headers.get('content-type');
       if (
         response.status === 404 ||
-        (contentType != null && contentType.indexOf("javascript") === -1)
+        (contentType != null && contentType.indexOf('javascript') === -1)
       ) {
         // No service worker found. Probably a different app. Reload the page.
         navigator.serviceWorker.ready.then(registration => {
@@ -121,13 +129,13 @@ function checkValidServiceWorker(swUrl, config) {
     })
     .catch(() => {
       console.log(
-        "No internet connection found. App is running in offline mode."
+        'No internet connection found. App is running in offline mode.'
       );
     });
 }
 
 export function unregister() {
-  if ("serviceWorker" in navigator) {
+  if ('serviceWorker' in navigator) {
     navigator.serviceWorker.ready.then(registration => {
       registration.unregister();
     });

src/serviceWorker.js renamed to src/serviceWorker.ts

@@ -0,0 +1,20 @@
+/**
+ * 自己封装的异步请求函数
+ * APP中的所有请求都将汇聚于此
+ * **/
+
+import axios, { Method } from "axios";
+
+export default class ApiService {
+  static newServer(url: string, bodyObj: object = {}, method: Method = "post") {
+    return axios({
+      url,
+      method,
+      headers: {
+        "Content-Type": "application/json;charset=utf-8",
+      },
+      withCredentials: true,
+      data: JSON.stringify(bodyObj),
+    });
+  }
+}

src/store/index.js renamed to src/store/index.ts

@@ -9,7 +9,7 @@ const tools = {
       str - 数字或字符串
       x   - 保留几位小数点
   */
-  pointX(str, x = 0) {
+  pointX(str: string | number, x: number = 0) {
     if (!str && str !== 0) {
       return str;
     }
@@ -23,7 +23,7 @@ const tools = {
   /**
      去掉字符串两端空格
   */
-  trim(str) {
+  trim(str: string) {
     const reg = /^\s*|\s*$/g;
     return str.replace(reg, "");
   },
@@ -33,7 +33,7 @@ const tools = {
     如：将123456转换为1****6，最多将字符串中间6个字符变成*
     如果字符串长度小于等于2，将不会有效果
   */
-  addMosaic(str) {
+  addMosaic(str: string | number) {
     const s = String(str);
     const lenth = s.length;
     const howmuch = (() => {
@@ -59,7 +59,7 @@ const tools = {
     字符串加密
     简单的加密方法
   */
-  compile(code) {
+  compile(code: string) {
     let c = String.fromCharCode(code.charCodeAt(0) + code.length);
     for (let i = 1; i < code.length; i++) {
       c += String.fromCharCode(code.charCodeAt(i) + code.charCodeAt(i - 1));
@@ -71,14 +71,14 @@ const tools = {
     字符串解谜
     对应上面的字符串加密方法
   */
-  uncompile(code) {
+  uncompile(code: string) {
     let c = String.fromCharCode(code.charCodeAt(0) - code.length);
     for (let i = 1; i < code.length; i++) {
       c += String.fromCharCode(code.charCodeAt(i) - c.charCodeAt(i - 1));
     }
     console.log("解谜：", code, c);
     return c;
-  }
+  },
 };
 
 export default tools;