深入学习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 相关文章推荐
收藏Javascript中常用的55个经典技巧
Aug 12 Javascript
远离JS灾难css灾难之 js私有函数和css选择器作为容器
Dec 11 Javascript
修改js Calendar日历控件 兼容IE9/谷歌/火狐
Jan 04 Javascript
javaScript面向对象继承方法经典实现
Aug 20 Javascript
javascript文本框内输入文字倒计数的方法
Feb 24 Javascript
Javascript中With语句用法实例
May 14 Javascript
Webpack+Vue如何导入Jquery和Jquery的第三方插件
Feb 20 Javascript
微信小程序实现缓存根据不同的id来进行设置和读取缓存
Jun 12 Javascript
React组件之间的通信的实例代码
Jun 27 Javascript
基于bootstrop常用类总结(推荐)
Sep 11 Javascript
详解Element 指令clickoutside源码分析
Feb 15 Javascript
在node中使用jwt签发与验证token的方法
Apr 03 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无限分类的深入理解
2013/06/02 PHP
php 多进程编程父进程的阻塞与非阻塞实例分析
2020/02/22 PHP
JS多物体 任意值 链式 缓冲运动
2012/08/10 Javascript
引用其它js时如何同时处理多个window.onload事件
2014/09/02 Javascript
js获取微信版本号的方法
2015/05/12 Javascript
JavaScript模版引擎的基本实现方法浅析
2016/02/15 Javascript
AngularJS使用ng-inlude指令加载页面失败的原因与解决方法
2017/01/19 Javascript
jQuery插件HighCharts绘制简单2D折线图效果示例【附demo源码】
2017/03/21 jQuery
Node.js使用gm拼装sprite图片
2017/07/04 Javascript
最通俗易懂的javascript变量提升详解
2017/08/05 Javascript
基于vue2实现左滑删除功能
2017/11/28 Javascript
vue检测对象和数组的变化分析
2018/06/30 Javascript
Vue加载组件、动态加载组件的几种方式
2018/08/31 Javascript
JavaScript实现捕获鼠标坐标
2020/04/12 Javascript
Openlayers+EasyUI Tree动态实现图层控制
2020/09/28 Javascript
分数霸榜! python助你微信跳一跳拿高分
2018/01/08 Python
matplotlib 输出保存指定尺寸的图片方法
2018/05/24 Python
python 实时得到cpu和内存的使用情况方法
2018/06/11 Python
Python Series从0开始索引的方法
2018/11/06 Python
对django views中 request, response的常用操作详解
2019/07/17 Python
Python实现结构体代码实例
2020/02/10 Python
python实现引用其他路径包里面的模块
2020/03/09 Python
在ipython notebook中使用argparse方式
2020/04/20 Python
Python如何脚本过滤文件中的注释
2020/05/27 Python
在Keras中实现保存和加载权重及模型结构
2020/06/15 Python
python和go语言的区别是什么
2020/07/20 Python
python二维图制作的实例代码
2020/12/03 Python
CSS3制作日历实现代码
2012/01/21 HTML / CSS
前端隐藏出边界内容的实现方法
2016/04/14 HTML / CSS
美国嘻哈首饰购物网站:Hip Hop Bling
2016/12/30 全球购物
AURALog面试题软件测试方面
2013/10/22 面试题
四年的大学生生活自我评价
2013/12/09 职场文书
售后客服个人自我评价
2014/09/14 职场文书
公司给客户的感谢信
2015/01/23 职场文书
2015年度物业公司工作总结
2015/04/27 职场文书
深入浅出的讲解:信号调制到底是如何实现的
2022/02/18 无线电