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

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

• TypeScript 必须知识点：

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

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

正式开启：

• 本文介绍如何配置，已经整体的业务流程如何搭建 GitHub源码地址

  • 包管理器，使用 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 的配置

  

  

  

配置没看懂不要紧，架子我都全部给你搭好了，按着 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 的世界，那么你会发现你写代码很少会出错，除非是业务逻辑的问题~