深入学习TypeScript 、React、 Redux和Ant-Design的最佳实践
前言
阿特伍德定律，指的是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教程必须要多看几遍，看仔细了,否则你会被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的世界，那么你会发现你写代码很少会出错，除非是业务逻辑的问题~
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。