深入学习TypeScript 、React、 Redux和Ant-Design的最佳实践


Posted in Javascript onJune 17, 2019

前言

阿特伍德定律,指的是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 的配置

深入学习TypeScript 、React、 Redux和Ant-Design的最佳实践

深入学习TypeScript 、React、 Redux和Ant-Design的最佳实践

深入学习TypeScript 、React、 Redux和Ant-Design的最佳实践

配置没看懂不要紧,架子我都全部给你搭好了,按着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的世界,那么你会发现你写代码很少会出错,除非是业务逻辑的问题~

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于jQuery的公告无限循环滚动实现代码
May 11 Javascript
Jquery1.9.1源码分析系列(六)延时对象应用之jQuery.ready
Nov 24 Javascript
jquery对象和DOM对象的任意相互转换
Feb 21 Javascript
jQuery实现下拉加载功能实例代码
Apr 01 Javascript
整理关于Bootstrap导航的慕课笔记
Mar 29 Javascript
浅谈Vue 初始化性能优化
Aug 31 Javascript
jQuery滑动效果实现方法分析
Sep 05 jQuery
vue微信分享到朋友圈 vue微信发送给好友
Nov 28 Javascript
javascript中contains是否包含功能实现代码(扩展字符、数组、dom)
Apr 07 Javascript
详解Vue3中对VDOM的改进
Apr 23 Javascript
基于脚手架创建Vue项目实现步骤详解
Aug 03 Javascript
解决基于 keep-alive 的后台多级路由缓存问题
Dec 23 Javascript
Vue程序调试的方法
Jun 17 #Javascript
Vue拖拽组件列表实现动态页面配置功能
Jun 17 #Javascript
javascript实现日历效果
Jun 17 #Javascript
如何使用Node.js爬取任意网页资源并输出PDF文件到本地
Jun 17 #Javascript
javascript使用substring实现的展开与收缩文字功能示例
Jun 17 #Javascript
vue+element加入签名效果(移动端可用)
Jun 17 #Javascript
详解Vue.js中引入图片路径的几种方式
Jun 17 #Javascript
You might like
傻瓜化配置PHP环境――Appserv
2006/12/13 PHP
通过JavaScript或PHP检测Android设备的代码
2011/03/09 PHP
完美的2个php检测字符串是否是utf-8编码函数分享
2014/07/28 PHP
PHP+MYSQL中文乱码问题
2015/07/01 PHP
10条php编程小技巧
2015/07/07 PHP
Javascript代码在页面加载时的执行顺序介绍
2013/05/03 Javascript
javascript实现下雪效果【实例代码】
2016/05/03 Javascript
Select2.js下拉框使用小结
2016/10/24 Javascript
JavaScript中访问id对象 属性的方式访问属性(实例代码)
2016/10/28 Javascript
Nodejs搭建wss服务器教程
2017/05/24 NodeJs
浅谈AngularJS中使用$resource(已更新)
2017/09/14 Javascript
jQuery图片查看插件Magnify开发详解
2017/12/25 jQuery
jQuery实现的回车触发按钮事件功能示例
2018/03/25 jQuery
Vue.js 十五分钟入门图文教程
2018/09/12 Javascript
python回调函数的使用方法
2014/01/23 Python
Python多线程编程(三):threading.Thread类的重要函数和方法
2015/04/05 Python
python中的常量和变量代码详解
2018/07/25 Python
Python将json文件写入ES数据库的方法
2019/04/10 Python
Python中函数的基本定义与调用及内置函数详解
2019/05/13 Python
浅析Python3中的对象垃圾收集机制
2019/06/06 Python
Python实现一个带权无回置随机抽选函数的方法
2019/07/24 Python
python3光学字符识别模块tesserocr与pytesseract的使用详解
2020/02/26 Python
Python基于mediainfo批量重命名图片文件
2020/12/29 Python
浅谈cookie和localStorage那些事
2019/08/27 HTML / CSS
经贸日语毕业生自荐信
2013/11/03 职场文书
优秀应届毕业生自荐信
2013/11/16 职场文书
最新优秀教师个人先进事迹材料
2014/05/06 职场文书
个人考核材料
2014/05/15 职场文书
令人印象深刻的自荐信
2014/05/25 职场文书
2014年安全生产目标责任书
2014/07/23 职场文书
2014年手术室工作总结
2014/11/26 职场文书
初中教师个人总结
2015/02/10 职场文书
2016母亲节感恩话语
2015/12/09 职场文书
初一数学教学反思
2016/02/17 职场文书
MySQL复制问题的三个参数分析
2021/04/07 MySQL
Python 机器学习工具包SKlearn的安装与使用
2021/05/14 Python