Js全栈到Ts全栈之入门实战分享

2018年10月份的时候,我使用Js全栈为我的小女朋友开发了一套培训学生信息和作品管理系统,10月底已经部署到阿里云投入试用。

第一期因为对需要了解其培训业务,且我对ts只是略懂,所以没有立即使用typescript, 但考虑到之后系统的复杂性,所以近期计划尽早把之前的项目使用ts 重构。

关于typescript

ts并不神秘,虽然它出自微软之手,却不像IE浏览器那样,折腾得前端同学们伤不起,而是对Js生态的一个良好的补充。本质上,ts就是未来的js,ts不仅完全兼容js,并且会将一些主流还未支持的ECMA规范特性让我们提前用上,因为它最后还是需要转成js部署到线上。

从typescript的命名来看,其关键字是type,就是让js这一门动态语言,通过引入类型机制,在开发的时候享受静态语言的好处,让编程更规范且提前在编译阶段发现大量未知错误,让js可以像java, c++等语言一样具备开发大型复杂应用的能力。

目前世界上和国内主流互联网公司都有很多团队在大量使用ts, 微软不必说,google和facebook, 阿里腾讯等都可以看到他们有大量Js开发在使用Ts作为日常工作编程的语言。

同时,三大主流前端技术栈,react、vue、angular等核心库及其配置库,以及koa等node开发生态中的主流框架和库,都提供了对ts的支持,有的甚至直接就是使用ts从0开发的。

因此,作为一名有追求的前端,不管是否有机会在工作中使用到ts,有时间的时候还是需要动动手,了解一下ts。

实战概述

作为开源的部分,没有涉及任何的业务场景,只是具备基本的登录注册、修改密码、上传图片和更改用户信息等特别基本的功能,重在把ts进行全栈开发遇到的坑先填了。

整个系统前后端分离,后端使用ts基于koa开发,前端使用ts基于vue开发,而微信小程序目前还是使用js开发,后期有时间再把它改成ts。

总共有三个工程,代码都托管在github上面,后期计划也会使用ts写一下react 的h5和pc, 以及以及使用ts基于rn写一下原生APP,所以大家记得关注公众号哦,特别是我最熟悉的rn,之后肯定基于最新版本做技术调研。代码地址如下:

  • 后端:https://github.com/yibiankeji/yb-server-koa.git
  • h5: https://github.com/yibiankeji/yb-h5-vue.git
  • 小程序:https://github.com/yibiankeji/yb-mp.git
  • 如果觉得不错就记得点 star 哦

所有使用到的依赖库,都是基于2018年11月初的最新版本,具体的依赖库和版本号请直接查看没有项目中的readme文件。

关于 koa后端

之所以选用koa,是因为近几年,koa相比express使用人数更多,对ES规范的新特性也支持同步得更及时,同时也是为了更好地去掌握实际工作可能用到的egg或thinkjs等框架。

因为之前已经使用js开发过多个koa项目了,所以很多基本的token验证,操作数据库等基础知识都没有遇到什么问题。

主要是配置一下对ts的支持,对模块引入的改写,以及增加一些必要的类型声明,具体请看项目代码,自己把项目跑起来,看看就懂!

关于vue h5

使用vue-cli 3.x生成项目代码,项目对ts的支持,脚手架在选择的时候就已经自动完成,不过还是会有一些小问题,因为刚出来不久,有bug很正常。

使用ts去写vue总体来看并不复杂,只需要熟悉了就可以,本工程中几乎涵盖了多数的场景,其他类似的参照已有的即可,主要还是写法改变比较大,以及需要清楚的知道自己使用变量的类型,否则vscode就会有良好的提醒。

关于小程序

其实使用ts开发小程序也是可以的,如果基于官方的开发者工具进行开发,配置需要点时间,我大概知道怎么去弄,但因为精力有限,有空再配。

而如果基于vue去写小程序,推荐使用美团维护的框架mpvue, 我感觉只要让它支持ts即可,相当于多转一下,不过现在微信小程序已经相对完善了,使用微信官方开发方式对小团队或个人更好,因为使用vue开发小程序,无事则安,若遇到框架的问题可能会让你哭都哭不出来。

总结

对于前端小白,还是老老实实使用先把js全栈开发掌握好,因为等多数人真正用到ts的一些功能特性了,js可能已经支持了。

而对于有老司机带领的团队,或者想去大公司做前端开发,或者已经在大公司开发的前端,深入掌握ts进行全栈开发还是很有必要的,带来的不仅是效率和薪资的提升,而且能有更多时间陪陪老婆孩子了。

总之,ts确实不错,因为这是时间表明的,当我们熟练掌握使用ts+vs code进行js全栈开发的时候,你会。。。

你可能感兴趣的:(Js全栈到Ts全栈之入门实战分享)