侯体宗的博客
  • 首页
  • Hyperf版
  • beego仿版
  • 人生(杂谈)
  • 技术
  • 关于我
  • 更多分类
    • 文件下载
    • 文字修仙
    • 中国象棋ai
    • 群聊
    • 九宫格抽奖
    • 拼图
    • 消消乐
    • 相册

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

前端  /  管理员 发布于 5年前   626

前言

阿特伍德定律,指的是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的世界,那么你会发现你写代码很少会出错,除非是业务逻辑的问题~

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

您可能感兴趣的文章:

  • Typescript 中的 interface 和 type 到底有什么区别详解
  • vue中typescript装饰器的使用方法超实用教程
  • 手把手教你使用TypeScript开发Node.js应用
  • TypeScript开发Node.js程序的方法
  • TypeScript中的方法重载详解
  • 简单了解TypeScript中如何继承 Error 类


  • 上一条:
    简谈创建React Component的几种方式
    下一条:
    React 全自动数据表格组件――BodeGrid的实现思路
  • 昵称:

    邮箱:

    1条评论 (评论内容有缓存机制,请悉知!)
    最新最热
    • 分类目录
    • 人生(杂谈)
    • 技术
    • linux
    • Java
    • php
    • 框架(架构)
    • 前端
    • ThinkPHP
    • 数据库
    • 微信(小程序)
    • Laravel
    • Redis
    • Docker
    • Go
    • swoole
    • Windows
    • Python
    • 苹果(mac/ios)
    • 相关文章
    • 使用 Alpine.js 排序插件对元素进行排序(0个评论)
    • 在js中使用jszip + file-saver实现批量下载OSS文件功能示例(0个评论)
    • 在vue中实现父页面按钮显示子组件中的el-dialog效果(0个评论)
    • 使用mock-server实现模拟接口对接流程步骤(0个评论)
    • vue项目打包程序实现把项目打包成一个exe可执行程序(0个评论)
    • 近期文章
    • 智能合约Solidity学习CryptoZombie第二课:让你的僵尸猎食(0个评论)
    • 智能合约Solidity学习CryptoZombie第一课:生成一只你的僵尸(0个评论)
    • 在go中实现一个常用的先进先出的缓存淘汰算法示例代码(0个评论)
    • 在go+gin中使用"github.com/skip2/go-qrcode"实现url转二维码功能(0个评论)
    • 在go语言中使用api.geonames.org接口实现根据国际邮政编码获取地址信息功能(1个评论)
    • 在go语言中使用github.com/signintech/gopdf实现生成pdf分页文件功能(0个评论)
    • gmail发邮件报错:534 5.7.9 Application-specific password required...解决方案(0个评论)
    • 欧盟关于强迫劳动的规定的官方举报渠道及官方举报网站(0个评论)
    • 在go语言中使用github.com/signintech/gopdf实现生成pdf文件功能(0个评论)
    • Laravel从Accel获得5700万美元A轮融资(0个评论)
    • 近期评论
    • 122 在

      学历:一种延缓就业设计,生活需求下的权衡之选中评论 工作几年后,报名考研了,到现在还没认真学习备考,迷茫中。作为一名北漂互联网打工人..
    • 123 在

      Clash for Windows作者删库跑路了,github已404中评论 按理说只要你在国内,所有的流量进出都在监控范围内,不管你怎么隐藏也没用,想搞你分..
    • 原梓番博客 在

      在Laravel框架中使用模型Model分表最简单的方法中评论 好久好久都没看友情链接申请了,今天刚看,已经添加。..
    • 博主 在

      佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 @1111老铁这个不行了,可以看看近期评论的其他文章..
    • 1111 在

      佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 网站不能打开,博主百忙中能否发个APP下载链接,佛跳墙或极光..
    • 2016-10
    • 2016-11
    • 2017-06
    • 2017-07
    • 2017-08
    • 2017-09
    • 2017-10
    • 2017-11
    • 2018-03
    • 2018-04
    • 2018-05
    • 2018-06
    • 2018-09
    • 2018-11
    • 2018-12
    • 2019-02
    • 2020-03
    • 2020-04
    • 2020-05
    • 2020-06
    • 2021-04
    • 2021-05
    • 2021-07
    • 2021-08
    • 2021-09
    • 2021-10
    • 2021-11
    • 2022-08
    • 2022-09
    • 2022-10
    • 2022-11
    • 2022-12
    • 2023-01
    • 2023-02
    • 2023-03
    • 2023-04
    • 2023-05
    • 2023-06
    • 2023-07
    • 2023-09
    • 2023-10
    • 2023-11
    • 2023-12
    • 2024-01
    • 2024-02
    • 2024-03
    • 2024-04
    Top

    Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

    侯体宗的博客