Atwood定律是指任何可以用JavaScript编写的应用程序，最终都会用JavaScript编写，也就是说“任何可以用JavaScript编写的应用程序，最终都将用JavaScript编写《应用程序最终会用JavaScript编写》使用新技术时，不要一步步来，如果你试图将两种不熟悉的新技术结合在一起，你很可能会被按在地上摩擦，Yarn/npm和React脚手架技术是前提，后面会继续写PWA深入和Node.js集群负载均衡Nginx，webpack原理解析等，感谢思吾对我上篇文章的提炼~使用TypeScript在开始之前，请确保你在重试之前，已经用心学习了以下内容：TypeScript必知点：javaScript，尤其是阮一峰的ES6教程，一定要多看几遍，认真看，不然会被TypeScript蹭到TS在地上的文档，什么是TypeScript，一定要看得很仔细，因为开发中很可能一个很小的问题就是一个你不知道的知识点，可能要花很多时间去解决前端性能优化的不完全手册。这是我的一篇文章，你也应该看看。哈哈哈~介绍完配置，后面会有很多总结~React直接看文档，React的官方中文文档，我觉得React的中文文档已经写的很好了，也比较容易学~Redux，学习Redux之前，建议多看几遍官方文档，熟悉Redux后再使用propscontext自定义事件pubsub-js组件传输数据，因为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和CreateReactApp使用TypeScriptreact-scripts-ts来自动配置一个create-react-app项目来支持TypeScript。你可以这样使用它：create-react-appmy-app--scripts-version=react-scripts-ts,-provided你必须全局下载create-react-app注意它是第三方项目而不是创建应用程序的React部分。所需的依赖项：都在package.json文件中。这里请注意，大部分的ts包需要下载两个，一个native，一个@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-rewiredstart","build":"react-app-rewiredbuild","test":"react-app-rewiredtest"},"eslintConfig":{"extends":"react-app"},"browserslist":{"production":[">0.2%","notdead","notop_miniall"],"development":["last1chromeversion","last1firefoxversion","last1safariversion"]}*`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“：正确，“skipLibCheck”：正确，“esModuleInterop”：正确，“allowSyntheticDefaultImports”：正确，“严格”：正确，“forceConsistentCasingInFileNames”：正确，“模块”：“esnext”，“moduleResolution”：“节点”，"resolveJsonModule":true,"isolatedModules":true,"noEmit":true,"jsx":"preserve"},"include":["src"]}不懂配置没关系Reduxless的，都给你设置好了，跟着TS和Ant-Design的官网操作就可以了，重点说说原理，首先为什么要用TypeScript，用TypeScript最终会编译成JS，所以是JSTypeScript的超集，带有静态类型检查，目前第三方包的源码基本都是TS，方便查看和调试，用了TS之后感觉调试BUG的能力变强了很多，而且我很少出错，思维也比较严谨，毕竟这是一门语言，引入顺序不对就会报错。如果你在使用TS的时候一直在使用任何public，那我建议你退出TS。一旦上了TS，一切都会不一样，比如不能使用装饰器。React和TS的结合是大型项目的首选，代码调试和维护极其方便。如何优化React？开头有我文章的链接~Ant-Design这么火，怎么学？它是一个带有标签属性和方法的组件库，一切都隐藏在文档中。React的Redux和VUEX一样，是单向数据流，有固定的写法，掌握后写起来非常容易~难点从来不在API，而是整体的技术架构和实现原理。在写TS代码的时候，总是问问自己，这可能吗？它是什么类型，是公共的还是私有的？这个函数返回什么类型，接受什么参数，需要什么，可能没有什么，然后再考虑命名空间接口合并、类合并、继承等问题。复杂的软件需要复杂的设计。面向对象是一种很好的设计方法。使用TS的好处之一是TS提供了业界公认的类（ES5+也支持）、泛型、封装、接口面向对象设计能力。增强JS的面向对象设计能力。当你在TS的世界里游历完回到JS的世界里，你会发现自己在写代码的时候很少出错，除非是业务逻辑问题~
