深入學習TypeScript 、React、 Redux和Ant-Design的最佳實踐

更新時間：2019年06月17日 08:58:18 作者：Peter譚金杰

這篇文章主要介紹了深入學習TypeScript 、React、 Redux和Ant-Design的最佳實踐，TypeScript 增加了代碼的可讀性和可維護性，擁有活躍的社區(qū)，,需要的朋友可以參考下

前言

阿特伍德定律，指的是any application that can be written in JavaScript, will eventually be written in JavaScript，意即“任何可以用JavaScript來寫的應用，最終都將用JavaScript來寫”

在使用新技術(shù)的時候，切忌要一步一步的來，如果當你嘗試把兩門不熟悉的新技術(shù)一起結(jié)合使用，你很大概率會被按在地上摩擦，會yarn/npm和React腳手架等技術(shù)是前提，后面我會繼續(xù)寫PWA深入和Node.js集群負載均衡Nginx，webpack原理解析等~謝謝思否官方對我上篇文章的加精~

在使用TypeScript前，請你務必萬分投入學習好以下內(nèi)容再嘗試：

TypeScript必須知識點：
- javaScript教程必須要多看幾遍，看仔細了,否則你會被TS按在地上摩擦
- TypeScript文檔，什么是TypeScript，一定要看得非常仔細，因為有可能開發(fā)時一個極小的問題是你不會的知識點，那么可能會耗費你大量的時間去解決
- 前端性能優(yōu)化不完全手冊，這是本人的一篇文章，也應該看看。哈哈哈~
- 介紹完了配置，后面會有大量的總結(jié)~
React直接看文檔，React官方中文文檔，我認為React的中文文檔已經(jīng)寫得非常好了，學起來還是比較簡單的~
Redux,學習Redux之前，建議把官方文檔看幾遍，然后props context 自定義事件 pubsub-js這些組件傳遞數(shù)據(jù)的方式都用熟悉后再上Redux，因為Redux寫法非常固定，只是在TS中無法使用修飾器而已，需要最原始的寫法。后面的代碼有注釋，到時候可以看看。(HOOKS和HOC都可以嘗試使用，因為React的未來可能大概率使用這些寫法)Redux官方文檔
Ant-Design,目前React生態(tài)最好的UI組件庫，百分90的使用率，移動端、PC端都支持，pro還可以開箱即用，強烈推薦，開啟配置按需加載，后臺TO-B項目用起來不要太舒服。Ant-Design官網(wǎng)~

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

正式開啟

本文介紹如何配置，已經(jīng)整體的業(yè)務流程如何搭建 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的官網(wǎng)去操作就OK

我們重點理理思路，首先為什么要使用TypeScript?
- 使用TypeScript最終會被編譯成JS，所以說它是JS的超集。
- TypeScript帶靜態(tài)類型檢驗，現(xiàn)在的第三方包基本上源碼都是TS，方便查看調(diào)試。
- 使用TS后，我感覺我調(diào)試BUG能力變強了很多，而且很少出錯了，思維更嚴謹了，畢竟這是一個引入順序不對都會報錯的語言。
- 如果你在使用TS時候還一直使用any public ，那么我建議你退出TS
- 一旦上了TS,一切都不一樣，比如修飾器無法使用。
- 大型項目首選React和TS結(jié)合，代碼調(diào)試維護起來極其方便。
React如何優(yōu)化？我開頭的文章有鏈接~
Ant-Design這么火，該怎么學習？它是一個標簽屬性帶方法的組件庫，一切都藏在文檔里。
React的Redux和VUEX一樣，都是單向數(shù)據(jù)流，寫法固定，掌握了寫起來非常容易~ 難的永遠不是API，而是整體的技術(shù)架構(gòu)，以及實現(xiàn)原理。