共计 3698 个字符，预计需要花费 10 分钟才能阅读完成。
阿特伍德定律，指的是
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的世界，那么你会发现你写代码很少会出错，除非是业务逻辑的问题~
