深入学习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 相关文章推荐
prototype与jquery下Ajax实现的差别
Sep 13 Javascript
javascript向flash swf文件传递参数值注意细节
Dec 11 Javascript
Get中文乱码IE浏览器Get中文乱码解决方案
Dec 26 Javascript
5个书写JavaScript代码的坏习惯,看看你中枪了没?
Nov 06 Javascript
那些精彩的JavaScript代码片段
Jan 12 Javascript
Javascript自定义事件详解
Jan 13 Javascript
js事件冒泡与事件捕获详解
Feb 20 Javascript
Webpack之tree-starking 解析
Sep 11 Javascript
在Vue中使用icon 字体图标的方法
Jun 14 Javascript
Vue实现开心消消乐游戏算法
Oct 22 Javascript
原生js实现自定义消息提示框
Nov 19 Javascript
手写Vue源码之数据劫持示例详解
Jan 04 Vue.js
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
Centos 6.5下PHP 5.3安装ffmpeg扩展的步骤详解
2017/03/02 PHP
完美解决thinkphp唯一索引重复时出错的问题
2017/03/31 PHP
PHP实现将几张照片拼接到一起的合成图片功能【便于整体打印输出】
2017/11/14 PHP
Javascript 刷新全集常用代码
2009/11/22 Javascript
eval的两组性能测试数据
2012/08/17 Javascript
动态的创建一个元素createElement及删除一个元素
2014/01/24 Javascript
JavaScript使用Replace进行字符串替换的方法
2015/04/14 Javascript
详解JavaScript中循环控制语句的用法
2015/06/03 Javascript
jQuery结合AJAX之在页面滚动时从服务器加载数据
2015/06/30 Javascript
多功能jQuery树插件zTree实现权限列表简单实例
2016/07/12 Javascript
Javascript从数组中随机取出不同元素的两种方法
2016/09/22 Javascript
webpack+vue.js实现组件化详解
2016/10/12 Javascript
JS中位置与大小的获取方法
2016/11/22 Javascript
Javascript highcharts 饼图显示数量和百分比实例代码
2016/12/06 Javascript
JavaScript结合HTML DOM实现联动菜单
2017/04/05 Javascript
yarn的使用与升级Node.js的方法详解
2017/06/04 Javascript
详解Node中导入模块require和import的区别
2017/08/11 Javascript
webstrom Debug 调试vue项目的方法步骤
2018/07/17 Javascript
JavaScript设计模式之代理模式实例分析
2019/01/16 Javascript
Vue开发Html5微信公众号的步骤
2019/04/11 Javascript
小程序根据手机机型设置自定义底部导航距离
2019/06/04 Javascript
微信小程序和H5页面间相互跳转代码实例
2019/09/19 Javascript
python与caffe改变通道顺序的方法
2018/08/04 Python
Python中如何使用if语句处理列表实例代码
2019/02/24 Python
python算法与数据结构之冒泡排序实例详解
2019/06/22 Python
Python3环境安装Scrapy爬虫框架过程及常见错误
2019/07/12 Python
Python定时任务APScheduler的实例实例详解
2019/07/22 Python
python3 selenium自动化测试 强大的CSS定位方法
2019/08/23 Python
对YOLOv3模型调用时候的python接口详解
2019/08/26 Python
Matplotlib中%matplotlib inline如何使用
2020/07/28 Python
使用html2canvas.js实现页面截图并显示或上传的示例代码
2018/12/18 HTML / CSS
意大利奢侈品多品牌集合店:TheDoubleF
2019/08/24 全球购物
建筑投标担保书
2014/05/20 职场文书
服务承诺口号
2014/05/22 职场文书
初中数学教学反思范文
2016/02/17 职场文书
Javascript webpack动态import
2022/04/19 Javascript