快捷導(dǎo)航

深入學(xué)習(xí)TypeScript 、React、 Redux和Ant-Design的最佳實(shí)踐

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

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

前言

阿特伍德定律，指的是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教程必須要多看幾遍，看仔細(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)镽edux寫法非常固定，只是在TS中無法使用修飾器而已，需要最原始的寫法。后面的代碼有注釋，到時(shí)候可以看看。(HOOKS和HOC都可以嘗試使用，因?yàn)镽eact的未來可能大概率使用這些寫法)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)锳nt-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ù)邏輯的問題~

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: