摘要：使用官方的的另外一種版本和一起使用自動(dòng)配置了一個(gè)項(xiàng)目支持。需要的依賴都在文件中。帶靜態(tài)類型檢驗(yàn)，現(xiàn)在的第三方包基本上源碼都是，方便查看調(diào)試。大型項(xiàng)目首選和結(jié)合，代碼調(diào)試維護(hù)起來極其方便。

阿特伍德定律，指的是any application that can be written in JavaScript, will eventually be written in JavaScript，意即“任何可以用JavaScript來寫的應(yīng)用，最終都將用JavaScript來寫”
在使用新技術(shù)的時(shí)候，切忌要一步一步的來，如果當(dāng)你嘗試把兩門不熟悉的新技術(shù)一起結(jié)合使用，你很大概率會(huì)被按在地上摩擦，會(huì)yarn/npm和React腳手架等技術(shù)是前提，后面我會(huì)繼續(xù)寫PWA深入和Node.js集群負(fù)載均衡Nginx，webpack原理解析等~謝謝思否官方對(duì)我上篇文章的加精~

在使用TypeScript前，請(qǐng)你務(wù)必萬分投入學(xué)習(xí)好以下內(nèi)容再嘗試：

TypeScript必須知識(shí)點(diǎn)：

javaScript,特別是阮一峰的ES6教程必須要多看幾遍，看仔細(xì)了,否則你會(huì)被TS按在地上摩擦

TypeScript文檔，什么是TypeScript，一定要看得非常仔細(xì)，因?yàn)橛锌赡荛_發(fā)時(shí)一個(gè)極小的問題是你不會(huì)的知識(shí)點(diǎn)，那么可能會(huì)耗費(fèi)你大量的時(shí)間去解決

前端性能優(yōu)化不完全手冊(cè) ， 這是本人的一篇文章，也應(yīng)該看看。 哈哈哈~

介紹完了配置，后面會(huì)有大量的總結(jié)~

React直接看文檔，React官方中文文檔，我認(rèn)為React的中文文檔已經(jīng)寫得非常好了，學(xué)起來還是比較簡(jiǎn)單的~

Redux,學(xué)習(xí)Redux之前，建議把官方文檔看幾遍，然后props context 自定義事件 pubsub-js這些組件傳遞數(shù)據(jù)的方式都用熟悉后再上Redux，因?yàn)?b>Redux寫法非常固定，只是在TS中無法使用修飾器而已，需要最原始的寫法。后面的代碼有注釋，到時(shí)候可以看看。(HOOKS和HOC都可以嘗試使用，因?yàn)?b>React的未來可能大概率使用這些寫法)Redux官方文檔

Ant-Design,目前React生態(tài)最好的UI組件庫，百分90的使用率，移動(dòng)端、PC端都支持，pro還可以開箱即用，強(qiáng)烈推薦，開啟配置按需加載，后臺(tái)TO-B項(xiàng)目用起來不要太舒服。Ant-Design官網(wǎng)~

學(xué)技術(shù)切忌過分急躁，一步登天，什么都想學(xué)卻什么都學(xué)不好。作者的心得，持之以恒的努力，把每個(gè)技術(shù)逐個(gè)擊破，最后結(jié)合起來使用，如魚得水，基礎(chǔ)不牢，地動(dòng)山搖，本文的代碼會(huì)把所有配置和Redux，Ant-Design全部配好，開箱即用，其他的功能你看Ant-Design的文檔往里面加就行了~

正式開啟：

本文介紹如何配置，已經(jīng)整體的業(yè)務(wù)流程如何搭建 GitHub源碼地址

包管理器，使用yarn或者npm都可以，這里建議使用yarn，因?yàn)?b>Ant-Design官方推薦yarn，它會(huì)自動(dòng)添加依賴。

使用官方的 create-react-app的另外一種版本 和 Create React App 一起使用 TypeScript

react-scripts-ts 自動(dòng)配置了一個(gè) create-react-app 項(xiàng)目支持 TypeScript。你可以像這樣使用：create-react-app my-app --scripts-version=react-scripts-ts, -前提你必須全局下載 create-react-app

請(qǐng)注意它是一個(gè)第三方項(xiàng)目，而且不是 Create React App 的一部分。

需要的依賴：都在package.json文件中。

這里請(qǐng)萬分注意，TS的包大部分都是需要下兩個(gè)，一個(gè)原生，一個(gè)@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的配置文件 我基本上沒怎么改動(dòng)

    {
  "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的官網(wǎng)去操作就OK

我們重點(diǎn)理理思路，首先為什么要使用TypeScript?

使用TypeScript最終會(huì)被編譯成JS，所以說它是JS的超集。

TypeScript帶靜態(tài)類型檢驗(yàn)，現(xiàn)在的第三方包基本上源碼都是TS，方便查看調(diào)試。

使用TS后，我感覺我調(diào)試BUG能力變強(qiáng)了很多，而且很少出錯(cuò)了，思維更嚴(yán)謹(jǐn)了，畢竟這是一個(gè)引入順序不對(duì)都會(huì)報(bào)錯(cuò)的語言。

如果你在使用TS時(shí)候還一直使用any public ，那么我建議你退出TS

一旦上了TS,一切都不一樣，比如修飾器無法使用。

大型項(xiàng)目首選React和TS結(jié)合，代碼調(diào)試維護(hù)起來極其方便。

React如何優(yōu)化？ 我開頭的文章有鏈接~

Ant-Design這么火，該怎么學(xué)習(xí)？ 它是一個(gè)標(biāo)簽屬性帶方法的組件庫，一切都藏在文檔里。

React的Redux和VUEX一樣，都是單向數(shù)據(jù)流，寫法固定，掌握了寫起來非常容易~ 難的永遠(yuǎn)不是API，而是整體的技術(shù)架構(gòu)，以及實(shí)現(xiàn)原理。

寫TS代碼時(shí)候常常問問自己，這個(gè)到底可能是什么類型，這個(gè)到底是public 還是 private?這個(gè)函數(shù)要返回什么類型，接受什么參數(shù)，什么是必須的，什么是可能沒有的，再去考慮命名空間接口合并，類合并，繼承這些問題。

復(fù)雜軟件需要用復(fù)雜的設(shè)計(jì)，面向?qū)ο缶褪呛芎玫囊环N設(shè)計(jì)方式，使用 TS 的一大好處就是 TS 提供了業(yè)界認(rèn)可的類（ ES5+ 也支持）、泛型、封裝、接口面向?qū)ο笤O(shè)計(jì)能力，以提升 JS 的面向?qū)ο笤O(shè)計(jì)能力。

當(dāng)你在TS世界遨游過后，再回JS的世界，那么你會(huì)發(fā)現(xiàn)你寫代碼很少會(huì)出錯(cuò)，除非是業(yè)務(wù)邏輯的問題~