TypeScript 、React、 Redux和Ant-Design的最佳實踐

阿特伍德定律，指的是 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教程必需要多看幾遍，看仔細了,不然你會被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的世界，那麼你會發現你寫代碼不多會出錯，除非是業務邏輯的問題~