摘要：使用官方的的另外一種版本和一起使用自動配置了一個項目支持。需要的依賴都在文件中。帶靜態類型檢驗，現在的第三方包基本上源碼都是，方便查看調試。大型項目首選和結合，代碼調試維護起來極其方便。

阿特伍德定律，指的是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的世界，那么你會發現你寫代碼很少會出錯，除非是業務邏輯的問題~