广告位联系
返回顶部
分享到

Typescript是必须要学习吗?如何学习TS全栈开发

JavaScript 来源:互联网 作者:佚名 发布时间:2023-01-01 17:25:25 人浏览
摘要

Typescript目前在前端,网站,小程序中的位置基本无可替代,同时也可以构建完美的CLI应用。在移动,桌面,后端方面,性能不是要求很高的情况下完全可以胜任,并且在区块链,嵌入式

Typescript目前在前端,网站,小程序中的位置基本无可替代,同时也可以构建完美的CLI应用。在移动,桌面,后端方面,性能不是要求很高的情况下完全可以胜任,并且在区块链,嵌入式,人工智能方面也开始茁壮成长。

TS的全面性

目前来说前端基本是React,Vue,Angular这三框架占据主流。而现在这三个框架对TS基本是默认支持与推荐的。

接着我们再来说说移动方面。虽然Flutter目前的流行度非常高,但是需要学习Dart语言,这就多了一个学习成本,而React Native+TS的流行度依然跟Flutter不相上下,在性能方面对比Flutter有所差距,不过既然使用这种跨平台开发,那么基本都是社交,电商等或者展示类的APP,一般不会是系统型或者超大型APP的话,这个方面RN也足够应付,如果是游戏或者系统型APP的话,我相信你也不会去选择Flutter而会直接使用原生了。

接着说说桌面应用方面,Electron框架一直在低性能要求的跨平台桌面应用这块占据主流,如果你的桌面应用是以web页面为主或者对性能要求不是非常高的话,Electron足够应付,如果对性能要求比较高的话,那么同样可以使用原生的c#,swift去开发。

在小程序方面毋庸置疑,无论是原生的微信小程序,还是跨平台的Taro,Uniapp,肯定使用JS/TS来编写的。在开发网站方面,拥有大量的SSR框架,最为占据主流的就是基于React的Nextjs和基于Vue的Nuxtjs。

而在编写后端API这部分,Node.js的性能并不比传统的PHP,Python,Ruby这类动态语言差,尤其在IO和高并发方面因为异步机制和自带Cluster集群功能,性能表现非常优秀,再加上Nestjs这种企业级的开发框架和越来越完善的生态,完全可以作为和其它动态后端语言平分秋色。

当然与Java,C#尤其是Go这种编译型的语言还是有一定差距,不过与RN,Electron一样在性能要求并不是非常高的情况下完全可以应付,而99%的应用或网站是不需要这么高的性能的。在CLI构建方面,一个Yargs基本可以扛起所有,不用多做解释。并且目前Node已经在区块链,嵌入式甚至人工智能方面的生态也已经遍地开花,以前区块链基本是go的天下,而嵌入式则是C,Rust这类占据主流,人工智能一般都是用Python。而现在大量的区块链,嵌入式的招聘中开始出现Node.js的身影。就连人工智能也出现支持Node的框架。

TS的必学性

现在来说,Typescript已经成为一门必学的编程语言。

如果你是编程入门者,建议第一门语言就选择TS,后面打算往职业后端发展可以增加学习一下Go或者Java Spring全家桶,或者往职业移动开发者方向发展,可以学习一下Swift或者Java,如果长期从事C/S系统开发,则可以尝试一下C#。

如果你已经对另一种技术栈掌握的比较深入,那么多学一门TS语言是非常有帮助的。比如说你是职业的Java Spring开发者,那么学习一下React+TS,瞬间可以成为一名全栈开发者,一个人可以把小程序,前端,APP客户端,桌面应用等通通搞定

TS目前可以做这些事

  • 使用React等框架可以编写Spa应用,比如中后台,数据可视化等
  • 使用Nextjs等框架可以编写SSR网站
  • 使用Electron可以开发C/S类的桌面应用
  • 使用React Native可以开发跨平台的移动APP
  • 使用Taro等框架可以编写跨平台的小程序
  • 使用Nestjs可以编写企业级高性能的后端API
  • 使用Yargs可以开发CLI工具
  • 并且目前已经开始在区块链,嵌入式,人工智能方面出现一些高可用的框架

如何学习TS

我个人建议的入门方法是从ES6入手先学习ES6+,这是TS的基石,必须理解了这些底层的东西,再学习JS的超集语言TS才会事半功倍。否则如果你会感觉有些东西会很难理解,比如TS的类在底层JS上本身是一个对象,函数也是一个对象,万物皆为对象。但是你像Java一样去使用就很不灵活,类其实可以手动使用对象描述构建一个。又比如把装饰器当成Java注解去理解,那么代码又变得很生硬了,其实装饰器本质上只是一个函数。还有像this,apply等,在ts中没有直接学习的方案,必须从JS开始

那么如果一步步把TS全部学会呢?

小编提供一下自己的学习路径供参考。

学习经历

首先小编简单介绍一下自己,我是从08年开始入手的php,前面学过delphi,从08-17年一直用的php,从18年开始转的TS,在学习TS前,JS方面只会一些简单的Jquery。我的学习路径是这样的

第一步学习ES6

看的是《阮一峰的ECMAScript6入门》这本电子书。大概浏览一遍做到心中有数后,接着学习了这本《Typescript入门教程》的电子书。

学习React

接下来就开始学习React,看的是官方文档,因为当时的官方文档默认是没有Ts示例的,所以边对着《深入理解Typescript》这本电子书查阅,边写React。期间学习了各种库,比如Redux,Mobx,React-DND,Antd,React-Spring,Echarts等等,也爬了无数的坑,谷歌了无数次,看了无数次的StackoverFlow的问答和各种库的Issue,这期间遇到的最老大难的问题就是配置vscode+eslint+prettier+stylelint,光这套学了很长一段时间。后来技术慢慢的开始熟练起来,以至于现在拿起React就变成一把利剑一样好用了,比如对于状态管理,可以直接自己写或者使用一些轻量级的Zustand等,又比如说React默认没有的keepalive功能,也是几行代码就能轻松实现。

学习Electron

在掌握了React后,又开始爬坑Electron,当然也有许许多多的问题,小编花了无数的时间和精力去解决,一开始使用的是webpack作为打包工具去编写桌面应用,后面出来了一个极好的构建工具--vite。尝试了使用vite+ts+electron+react的方式去构建,虽然当时的vite还不成熟,坑非常多,也把一个个问题通过自己思索或谷歌去解决了,随着vite的不断成熟,坑越来越少,这套技术栈也变得坚实,现在使用这套技术栈开发桌面应用已经非常熟练,足可以应付一般的业务需求。

学习Taro和React Native

因为小编家中一些原因,一段时期一直在自由职业的缘故,所以接到了一些各种各样的单子。有一次客户要求做一个SEO友好的电商网站,本来小编打算直接用熟练的jquery+laravel搞定,但是后来在各种反复考量下,小编决定采用一些新的技术栈。因为那时候,Remix还没有出来,甚至同作者的React Router v6也没发布,于是小编当时唯一的选择就是Nextjs(Gatsby太过复杂,因为我不会vue所以直接排除Nuxtjs).然后开始尝试使用Nextjs去构建这个网站,当然后端因为还没学习Node,所以依旧使用擅长的PHP去编写,没想到竟然全程基本无坑,一气呵成,可见React的基础技能对于其生态是有多重要了。。。

后面随着一个新的客户需要开发一个小程序加APP,这并不在小编的技术栈范围内,但是给出的报酬和支付订金的爽快程度前所未见,所以没办法,为了生活也只能硬着头皮上。

一开始去学微信的官方文档,但是后来客户说最好能支持某宝,小编没有精力去学习两套SDK。这时候我就开始各种搜索跨平台小程序的开发框架,找到了两个比较成熟的,一个是Uniapp,但是没有Vue开发经验再加上不喜欢他官网各种营销式的文档样式和自带的IDE,那么只能选择另一个京东出的Taro。没想到使用Taro构建小程序非常顺利,除了官方的UI丑一点外(现在Taro已经有很多好看的生态库了),基本无坑。这时,看到Taro也支持RN,于是乎抱着试一试的方式,边学习React Native,边使用Taro去构建APP,那么结果大家都知道了,坑是有多多。。。后面只能裸用React Native去写APP,坑的确少了很多,APP也开发成功了,但是唯一的缺憾是UI方面无法和小程序统一了。毕竟瑕不掩瑜,希望Taro对RN的支持会越来越好吧,后面有APP开发还是会去尝试Taro,而不是把它仅用于小程序开发。

学习Nestjs

这几年,接到的后端业务越来越多,但是因为PHP的口碑扑街(其实个人认为PHP并没这么差),很多客户也是人云亦云直接来一句PHP的不要。。。那么没办法,要么学习Java这个巨无霸体系,要么入手生态很差的Golang。一次在逛某乎的时候,看到有一名作者在布道一个node框架--Nestjs。凭我对10来年前,node刚出现时尝试过的express框架的记忆,想着node不就是slim这种微框架吗?这些项目得多累。但是鉴于当时也没有更好的选择,并且TS语言也熟悉,然后抱着试一试的心态去尝试Nestjs,没想到没试不知道,试了就知道捡到宝了。这个框架生态非常健全,ORM,消息列队,websockets,微服务等通通完美支持,然后测试了一下性能,对比swoole+symfony/laravel也不遑多让。立马拿来构建第一个项目。因为当时的nestjs还是5.0版本,问题颇多,大多集中在Typeorm方面,再加上Nestjs本身一大堆概念,比如DTO,验证器,拦截器,过滤器等等,在开发第一个CRM项目的时候还是踩了非常多的坑,导致项目延期无数次,过了半年终于把项目开发好,当然报酬也少了许多。。。但是个人认为这一切是值得的,后面就可以使用一种语言打遍天下了。

等到第二个项目来临时,Nestjs已经使用地非常成熟了,这时候遇到一个老客户,他需要一个带后台的小程序,这是我发现了一个比较好的库--lerna,可以用一种叫做monorepo的方式,把所有前后端的TS包放在一个仓库里,接口能相互调用,还能一键发布一些主应用之外的包到npm的仓库里,甚至能按照依赖顺序对TS进行编译,非常实用,所以直接使用lerna构建起了整个应用。

学习CLI构建

后面发现了更加轻量的pnpm,然后pnpm不支持lerna,但是它本身没有发布功能,并且无法按依赖顺序执行编译命令,所以在空余时间我慢慢的尝试自己编写一个命令行工具去使pnpm可以自己按顺序执行编译和一键发布。于是发现了一个好用的node的命令行工具--yargs。当然围绕yargs还发现了execa,ora等好用CLI生态库。并且同时深入整个Node重新学习了一遍,比如在使用CLI构建长时间命令式,使用fork开子进程等。同时发觉在开发时nestjs的重启速度实在太慢,于是在我的工具库里添加了一个nodemon+swc热更新nestjs的命令。

后面发现客户部署上去的Nestjs应用总是在进程出现错误后就挂掉,于是乎学习了一下cluster,使用PM2+Cluster的方式去部署应用,当然目前基本使用docker来部署了。

推荐给大家

小编以上的学习过程是非常痛苦且漫长的,花了大概2年多,因为都是普通人,并非天赋异禀。但是这么长的学习和爬坑过程,甚至还是全职的情况下,是并不是谁都有时间和精力去做的。尤其有些库遇到的各种问题去查官网文档,不仅只有英文文档,甚至大量还是语焉不详的情况下,只能不停地去查询stackoverflow以及那些库的issue,去github的discussions或者discord用英语提交问题。这会浪费大量的学习和工作时间。然后去各种QQ群提问基本就是答非所问,各种灌水,去一些问答社区提问则大概率得不到想要的答案。

所以为了帮助大家能更快的解决开发与工作中遇到的问题。小编开始做一套TS全系列的视频教程并包含各个技术栈。目前以React18和Nestjs开始制作,慢慢地涵盖所有TS的技术栈,在学习和开发过程中遇到问题也可以让小编帮助解决。但是视频教程只针对已经有一定基础的同学来进阶学习。

如果没有任何基础,可以找小编进行基础性学习,帮助你尽快地掌握这个TS开发体系。

总结

学会TS全栈开发不仅有助于提升求职竞争力,同时也可以成为一名完全自由的开发者,比起需要长期996的一端开发者来说优势不可为不大。尤其在某些编程语言和框架非常内卷的情况下,还是非常有帮助的。同时希望我个人能帮助到一些同学快速掌握这套技术栈。


版权声明 : 本文内容来源于互联网或用户自行发布贡献,该文观点仅代表原作者本人。本站仅提供信息存储空间服务和不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权, 违法违规的内容, 请发送邮件至2530232025#qq.cn(#换@)举报,一经查实,本站将立刻删除。
原文链接 :
相关文章
  • JavaScript实现雪花飘落效果特效
    没有雪的冬天失去了冬天的美景,不见了千里冰封,万里雪飘的北国之美,诗人无从写雪,画家画不出雪景,摄影师拍不到冬天的美丽。雪,是冬天
  • Typescript是必须要学习吗?如何学习TS全栈开发
    Typescript目前在前端,网站,小程序中的位置基本无可替代,同时也可以构建完美的CLI应用。在移动,桌面,后端方面,性能不是要求很高的
  • 解读Vue实例的属性及模板渲染

    解读Vue实例的属性及模板渲染
    1 概述 Vue.js是通过new Vue({...})来声明一个实例的,在这个实例中包含了当前页面的HTML结构、数据和事件。 Vue实例是MVVM模式中的ViewModel,实现
  • JavaScript中字符串的常用方法总结
    1.字符串长度 length属性返回字符串的长度: 1 2 var str = 字符串常用方法总结-东东吖; str.length; //13 2.查找字符串中的位置 有三种查找字符串中
  • 解决React报错Expected `onClick` listener to be a function

    解决React报错Expected `onClick` listener to be a function
    当我们为元素的onClick属性传递一个值,但是该值却不是函数时,会产生ExpectedonClicklistener to be a function报错。为了解决该报错,请确保只为元
  • ESLint规范TypeScript代码使用方法
    ESLint 是一种 JavaScript linter,可以用来规范 JavaScript 或 TypeScript 代码,本文教你怎么在项目中快速把 ESLint 安排上。 怎么写出优雅的代码是一
  • Vue屏幕自适应三种实现方法介绍
    使用 scale-box 组件 属性: width宽度 默认1920 height高度 默认1080 bgc背景颜色 默认transparent delay自适应缩放防抖延迟时间(ms) 默认100 vue2版本:
  • 在web worker中使用fetch实例介绍
    1.Web Worker意义 由于 JS 是单线程的,费时的 JS 操作将会导致整个页面的阻塞。Web Worker 提供了创建多线程的方法,将一些耗时且 UI 无关的工
  • 实时通信Socket io的使用介绍

    实时通信Socket io的使用介绍
    最近在工作中,遇到了一个需求,需要和后台服务实时通信,获取各种设备的实时状态、以及对设备下发指令。后端这边选择了socket.io这个
  • js中如何对url进行编码和解码
    js 对url进行编码和解码 三种编码和解码函数 encodeURI和 decodeURI 它着眼于对整个URL进行编码,因此除了常见的符号以外,对其他一些在网址中
  • 本站所有内容来源于互联网或用户自行发布,本站仅提供信息存储空间服务,不拥有版权,不承担法律责任。如有侵犯您的权益,请您联系站长处理!
  • Copyright © 2017-2022 F11.CN All Rights Reserved. F11站长开发者网 版权所有 | 苏ICP备2022031554号-1 | 51LA统计