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