TypeScript 、React、 Redux和Ant-Design的最佳实践-CSDN博客

阿特伍德定律，指的是any application that can be written in JavaScript, will eventually be written in JavaScript，意即“任何可以用JavaScript来写的应用，最终都将用JavaScript来写”

在使用新技术的时候，切忌要一步一步的来，如果当你尝试把两门不熟悉的新技术一起结合使用，你很大概率会被按在地上摩擦，会yarn/npm和React脚手架等技术是前提，后面我会继续写PWA深入和Node.js集群负载均衡Nginx，webpack原理解析等~谢谢思否官方对我上篇文章的加精~

在使用TypeScript前，请你务必万分投入学习好以下内容再尝试：

TypeScript必须知识点：
- javaScript,特别是[阮一峰的ES6教程][2]必须要多看几遍，看仔细了,否则你会被TS按在地上摩擦
- TypeScript文档，[什么是TypeScript][3]，一定要看得非常仔细，因为有可能开发时一个极小的问题是你不会的知识点，那么可能会耗费你大量的时间去解决
- [前端性能优化不完全手册][4] ，这是本人的一篇文章，也应该看看。哈哈哈~
- 介绍完了配置，后面会有大量的总结~
React直接看文档，[React官方中文文档][5]，我认为React的中文文档已经写得非常好了，学起来还是比较简单的~
Redux,学习Redux之前，建议把官方文档看几遍，然后props context 自定义事件 pubsub-js这些组件传递数据的方式都用熟悉后再上Redux，因为Redux写法非常固定，只是在TS中无法使用修饰器而已，需要最原始的写法。后面的代码有注释，到时候可以看看。(HOOKS和HOC都可以尝试使用，因为React的未来可能大概率使用这些写法)[Redux官方文档][6]
Ant-Design,目前React生态最好的UI组件库，百分90的使用率，移动端、PC端都支持，pro还可以开箱即用，强烈推荐，开启配置按需加载，后台TO-B项目用起来不要太舒服。[Ant-Design官网~][7]

学技术切忌过分急躁，一步登天，什么都想学却什么都学不好。作者的心得，持之以恒的努力，把每个技术逐个击破，最后结合起来使用，如鱼得水，基础不牢，地动山摇，本文的代码会把所有配置和Redux，Ant-Design全部配好，开箱即用，其他的功能你看Ant-Design的文档往里面加就行了~

正式开启：

本文介绍如何配置，已经整体的业务流程如何搭建 [GitHub源码地址][8]
包管理器，使用yarn或者npm都可以，这里建议使用yarn，因为Ant-Design官方推荐yarn，它会自动添加依赖。
使用官方的 create-react-app的另外一种版本和 Create React App 一起使用 TypeScript
react-scripts-ts 自动配置了一个create-react-app 项目支持 TypeScript。你可以像这样使用：create-react-app my-app --scripts-version=react-scripts-ts, -前提你必须全局下载 create-react-app 请注意它是一个第三方项目，而且不是 Create React App 的一部分。
需要的依赖：都在package.json文件中。

这里请万分注意，TS的包大部分都是需要下两个，一个原生，一个@types/开头

    {
    "name": "antd-demo-ts",
    "version": "0.1.0",
    "private": true,
    "dependencies": {
        "@types/jest": "24.0.11",
        "@types/node": "11.13.7",
        "@types/react": "16.8.14",
        "@types/react-dom": "16.8.4",
        "@types/react-redux": "^7.0.8",
        "@types/react-router-dom": "^4.3.2",
        "@types/redux-thunk": "^2.1.0",
        "babel-plugin-import": "^1.11.0",
        "customize-cra": "^0.2.12",
        "less": "^3.9.0",
        "less-loader": "^4.1.0",
        "prop-types": "^15.7.2",
        "react": "^16.8.6",
        "react-app-rewired": "^2.1.3",
        "react-dom": "^16.8.6",
        "react-redux": "^7.0.2",
        "react-router-dom": "^5.0.0",
        "react-scripts": "3.0.0",
        "redux-chunk": "^1.0.11",
        "redux-devtools-extension": "^2.13.8",
        "redux-thunk": "^2.3.0",
        "typescript": "3.4.5"
    },
    "scripts": {
        "start": "react-app-rewired start",
        "build": "react-app-rewired build",
        "test": "react-app-rewired test"
    },
    "eslintConfig": {
        "extends": "react-app"
    },
    "browserslist": {
        "production": [
            ">0.2%",
            "not dead",
            "not op_mini all"
        ],
        "development": [
            "last 1 chrome version",
            "last 1 firefox version",
            "last 1 safari version"
        ]
    }
}
复制代码

 * `Ant-Design`按需加载配置   `config-overrides.js`
    ```
    const { override, fixBabelImports, addLessLoader } = require('customize-cra');
    module.exports = override(
        fixBabelImports('import', {
            libraryName: 'antd',
            libraryDirectory: 'es',
            style: true,
        }),
        addLessLoader({
            javascriptEnabled: true,
            modifyVars: { '@primary-color': '#1DA57A' },
        })
    );
     ```
 * `tsconfig.json` ,`TS`的配置文件 我基本上没怎么改动 
    ```
        {
      "compilerOptions": {
        "target": "es5",
        "lib": [
          "dom",
          "dom.iterable",
          "esnext"
        ],
        "allowJs": true,
        "skipLibCheck": true,
        "esModuleInterop": true,
        "allowSyntheticDefaultImports": true,
        "strict": true,
        "forceConsistentCasingInFileNames": true,
        "module": "esnext",
        "moduleResolution": "node",
        "resolveJsonModule": true,
        "isolatedModules": true,
        "noEmit": true,
        "jsx": "preserve"
      },
      "include": [
        "src"
      ]
    }
    ```
 * `Redux less 的配置` 

    ![一些接口的定义][9] 
    ![Redux在TS中不能使用修饰器简写][10]
    ![store对象的配置，加上了异步处理中间件和开发者调试工具][11]
> 配置没看懂不要紧，架子我都全部给你搭好了，按着`TS`和`Ant-Design`的官网去操作就`OK` 

 * 我们重点理理思路，首先为什么要使用`TypeScript`?
    * 使用`TypeScript`最终会被编译成`JS`，所以说它是`JS`的超集。
    * `TypeScript`带静态类型检验，现在的第三方包基本上源码都是`TS`，方便查看调试。
    * 使用`TS`后，我感觉我调试`BUG`能力变强了很多，而且很少出错了，思维更严谨了，毕竟这是一个引入顺序不对都会报错的语言。
    * 如果你在使用`TS`时候还一直使用`any public `，那么我建议你退出`TS` 
    * 一旦上了`TS`,一切都不一样，比如修饰器无法使用。
    * 大型项目首选`React`和`TS`结合，代码调试维护起来极其方便。
 *  `React`如何优化？ 我开头的文章有链接~ 
 * `Ant-Design`这么火，该怎么学习？  它是一个标签属性带方法的组件库，一切都藏在文档里。
 * `React`的`Redux`和`VUEX`一样，都是单向数据流，写法固定，掌握了写起来非常容易~ 难的永远不是`API`，而是整体的技术架构，以及实现原理。

> 写`TS`代码时候常常问问自己，这个到底可能是什么类型，这个到底是`public 还是 private?`这个函数要返回什么类型，接受什么参数，什么是必须的，什么是可能没有的，再去考虑命名空间接口合并，类合并，继承这些问题。 

* 复杂软件需要用复杂的设计，面向对象就是很好的一种设计方式，使用` TS` 的一大好处就是` TS `提供了业界认可的类（ `ES5+ `也支持）、泛型、封装、接口面向对象设计能力，以提升 `JS` 的面向对象设计能力。

* 当你在`TS`世界遨游过后，再回`JS`的世界，那么你会发现你写代码很少会出错，除非是业务逻辑的问题~


  [1]: /img/bVbrTKz
  [2]: http://es6.ruanyifeng.com/#docs/promise
  [3]: https://ts.xcatliu.com/introduction/what-is-typescript.html
  [4]: https://segmentfault.com/a/1190000018827395
  [5]: https://react.docschina.org/docs/static-type-checking.html
  [6]: https://www.redux.org.cn/
  [7]: https://ant.design/docs/react/use-with-create-react-app-cn
  [8]: https://github.com/JinJieTan/TypeScript-Redux-Ant-Design.git
  [9]: /img/bVbrTNE
  [10]: /img/bVbrTNF
  [11]: /img/bVbrTNG复制代码