Typescript是必須要學(xué)習(xí)嗎?如何學(xué)習(xí)TS全棧開(kāi)發(fā)
Typescript目前在前端,網(wǎng)站,小程序中的位置基本無(wú)可替代,同時(shí)也可以構(gòu)建完美的CLI應(yīng)用。在移動(dòng),桌面,后端方面,性能不是要求很高的情況下完全可以勝任,并且在區(qū)塊鏈,嵌入式,人工智能方面也開(kāi)始茁壯成長(zhǎng)。
TS的全面性
目前來(lái)說(shuō)前端基本是React,Vue,Angular這三框架占據(jù)主流。而現(xiàn)在這三個(gè)框架對(duì)TS基本是默認(rèn)支持與推薦的。
接著我們?cè)賮?lái)說(shuō)說(shuō)移動(dòng)方面。雖然Flutter目前的流行度非常高,但是需要學(xué)習(xí)Dart語(yǔ)言,這就多了一個(gè)學(xué)習(xí)成本,而React Native+TS的流行度依然跟Flutter不相上下,在性能方面對(duì)比Flutter有所差距,不過(guò)既然使用這種跨平臺(tái)開(kāi)發(fā),那么基本都是社交,電商等或者展示類(lèi)的APP,一般不會(huì)是系統(tǒng)型或者超大型APP的話(huà),這個(gè)方面RN也足夠應(yīng)付,如果是游戲或者系統(tǒng)型APP的話(huà),我相信你也不會(huì)去選擇Flutter而會(huì)直接使用原生了。
接著說(shuō)說(shuō)桌面應(yīng)用方面,Electron框架一直在低性能要求的跨平臺(tái)桌面應(yīng)用這塊占據(jù)主流,如果你的桌面應(yīng)用是以web頁(yè)面為主或者對(duì)性能要求不是非常高的話(huà),Electron足夠應(yīng)付,如果對(duì)性能要求比較高的話(huà),那么同樣可以使用原生的c#,swift去開(kāi)發(fā)。
在小程序方面毋庸置疑,無(wú)論是原生的微信小程序,還是跨平臺(tái)的Taro,Uniapp,肯定使用JS/TS來(lái)編寫(xiě)的。在開(kāi)發(fā)網(wǎng)站方面,擁有大量的SSR框架,最為占據(jù)主流的就是基于React的Nextjs和基于Vue的Nuxtjs。
而在編寫(xiě)后端API這部分,Node.js的性能并不比傳統(tǒng)的PHP,Python,Ruby這類(lèi)動(dòng)態(tài)語(yǔ)言差,尤其在IO和高并發(fā)方面因?yàn)楫惒綑C(jī)制和自帶Cluster集群功能,性能表現(xiàn)非常優(yōu)秀,再加上Nestjs這種企業(yè)級(jí)的開(kāi)發(fā)框架和越來(lái)越完善的生態(tài),完全可以作為和其它動(dòng)態(tài)后端語(yǔ)言平分秋色。
當(dāng)然與Java,C#尤其是Go這種編譯型的語(yǔ)言還是有一定差距,不過(guò)與RN,Electron一樣在性能要求并不是非常高的情況下完全可以應(yīng)付,而99%的應(yīng)用或網(wǎng)站是不需要這么高的性能的。在CLI構(gòu)建方面,一個(gè)Yargs基本可以扛起所有,不用多做解釋。并且目前Node已經(jīng)在區(qū)塊鏈,嵌入式甚至人工智能方面的生態(tài)也已經(jīng)遍地開(kāi)花,以前區(qū)塊鏈基本是go的天下,而嵌入式則是C,Rust這類(lèi)占據(jù)主流,人工智能一般都是用Python。而現(xiàn)在大量的區(qū)塊鏈,嵌入式的招聘中開(kāi)始出現(xiàn)Node.js的身影。就連人工智能也出現(xiàn)支持Node的框架。
TS的必學(xué)性
現(xiàn)在來(lái)說(shuō),Typescript已經(jīng)成為一門(mén)必學(xué)的編程語(yǔ)言。
如果你是編程入門(mén)者,建議第一門(mén)語(yǔ)言就選擇TS,后面打算往職業(yè)后端發(fā)展可以增加學(xué)習(xí)一下Go或者Java Spring全家桶,或者往職業(yè)移動(dòng)開(kāi)發(fā)者方向發(fā)展,可以學(xué)習(xí)一下Swift或者Java,如果長(zhǎng)期從事C/S系統(tǒng)開(kāi)發(fā),則可以嘗試一下C#。
如果你已經(jīng)對(duì)另一種技術(shù)棧掌握的比較深入,那么多學(xué)一門(mén)TS語(yǔ)言是非常有幫助的。比如說(shuō)你是職業(yè)的Java Spring開(kāi)發(fā)者,那么學(xué)習(xí)一下React+TS,瞬間可以成為一名全棧開(kāi)發(fā)者,一個(gè)人可以把小程序,前端,APP客戶(hù)端,桌面應(yīng)用等通通搞定
TS目前可以做這些事
- 使用React等框架可以編寫(xiě)Spa應(yīng)用,比如中后臺(tái),數(shù)據(jù)可視化等
- 使用Nextjs等框架可以編寫(xiě)SSR網(wǎng)站
- 使用Electron可以開(kāi)發(fā)C/S類(lèi)的桌面應(yīng)用
- 使用React Native可以開(kāi)發(fā)跨平臺(tái)的移動(dòng)APP
- 使用Taro等框架可以編寫(xiě)跨平臺(tái)的小程序
- 使用Nestjs可以編寫(xiě)企業(yè)級(jí)高性能的后端API
- 使用Yargs可以開(kāi)發(fā)CLI工具
- 并且目前已經(jīng)開(kāi)始在區(qū)塊鏈,嵌入式,人工智能方面出現(xiàn)一些高可用的框架
如何學(xué)習(xí)TS
我個(gè)人建議的入門(mén)方法是從ES6入手先學(xué)習(xí)ES6+,這是TS的基石,必須理解了這些底層的東西,再學(xué)習(xí)JS的超集語(yǔ)言TS才會(huì)事半功倍。否則如果你會(huì)感覺(jué)有些東西會(huì)很難理解,比如TS的類(lèi)在底層JS上本身是一個(gè)對(duì)象,函數(shù)也是一個(gè)對(duì)象,萬(wàn)物皆為對(duì)象。但是你像Java一樣去使用就很不靈活,類(lèi)其實(shí)可以手動(dòng)使用對(duì)象描述構(gòu)建一個(gè)。又比如把裝飾器當(dāng)成Java注解去理解,那么代碼又變得很生硬了,其實(shí)裝飾器本質(zhì)上只是一個(gè)函數(shù)。還有像this
,apply
等,在ts中沒(méi)有直接學(xué)習(xí)的方案,必須從JS開(kāi)始
那么如果一步步把TS全部學(xué)會(huì)呢?
小編提供一下自己的學(xué)習(xí)路徑供參考。
學(xué)習(xí)經(jīng)歷
首先小編簡(jiǎn)單介紹一下自己,我是從08年開(kāi)始入手的php,前面學(xué)過(guò)delphi,從08-17年一直用的php,從18年開(kāi)始轉(zhuǎn)的TS,在學(xué)習(xí)TS前,JS方面只會(huì)一些簡(jiǎn)單的Jquery。我的學(xué)習(xí)路徑是這樣的
第一步學(xué)習(xí)ES6
看的是《阮一峰的ECMAScript6入門(mén)》這本電子書(shū)。大概瀏覽一遍做到心中有數(shù)后,接著學(xué)習(xí)了這本《Typescript入門(mén)教程》的電子書(shū)。
學(xué)習(xí)React
接下來(lái)就開(kāi)始學(xué)習(xí)React,看的是官方文檔,因?yàn)楫?dāng)時(shí)的官方文檔默認(rèn)是沒(méi)有Ts示例的,所以邊對(duì)著《深入理解Typescript》這本電子書(shū)查閱,邊寫(xiě)React。期間學(xué)習(xí)了各種庫(kù),比如Redux,Mobx,React-DND,Antd,React-Spring,Echarts等等,也爬了無(wú)數(shù)的坑,谷歌了無(wú)數(shù)次,看了無(wú)數(shù)次的StackoverFlow的問(wèn)答和各種庫(kù)的Issue,這期間遇到的最老大難的問(wèn)題就是配置vscode+eslint+prettier+stylelint,光這套學(xué)了很長(zhǎng)一段時(shí)間。后來(lái)技術(shù)慢慢的開(kāi)始熟練起來(lái),以至于現(xiàn)在拿起React就變成一把利劍一樣好用了,比如對(duì)于狀態(tài)管理,可以直接自己寫(xiě)或者使用一些輕量級(jí)的Zustand等,又比如說(shuō)React默認(rèn)沒(méi)有的keepalive功能,也是幾行代碼就能輕松實(shí)現(xiàn)。
學(xué)習(xí)Electron
在掌握了React后,又開(kāi)始爬坑Electron,當(dāng)然也有許許多多的問(wèn)題,小編花了無(wú)數(shù)的時(shí)間和精力去解決,一開(kāi)始使用的是webpack作為打包工具去編寫(xiě)桌面應(yīng)用,后面出來(lái)了一個(gè)極好的構(gòu)建工具--vite。嘗試了使用vite+ts+electron+react的方式去構(gòu)建,雖然當(dāng)時(shí)的vite還不成熟,坑非常多,也把一個(gè)個(gè)問(wèn)題通過(guò)自己思索或谷歌去解決了,隨著vite的不斷成熟,坑越來(lái)越少,這套技術(shù)棧也變得堅(jiān)實(shí),現(xiàn)在使用這套技術(shù)棧開(kāi)發(fā)桌面應(yīng)用已經(jīng)非常熟練,足可以應(yīng)付一般的業(yè)務(wù)需求。
學(xué)習(xí)Taro和React Native
因?yàn)樾【幖抑幸恍┰颍欢螘r(shí)期一直在自由職業(yè)的緣故,所以接到了一些各種各樣的單子。有一次客戶(hù)要求做一個(gè)SEO友好的電商網(wǎng)站,本來(lái)小編打算直接用熟練的jquery+laravel搞定,但是后來(lái)在各種反復(fù)考量下,小編決定采用一些新的技術(shù)棧。因?yàn)槟菚r(shí)候,Remix還沒(méi)有出來(lái),甚至同作者的React Router v6也沒(méi)發(fā)布,于是小編當(dāng)時(shí)唯一的選擇就是Nextjs(Gatsby太過(guò)復(fù)雜,因?yàn)槲也粫?huì)vue所以直接排除Nuxtjs).然后開(kāi)始嘗試使用Nextjs去構(gòu)建這個(gè)網(wǎng)站,當(dāng)然后端因?yàn)檫€沒(méi)學(xué)習(xí)Node,所以依舊使用擅長(zhǎng)的PHP去編寫(xiě),沒(méi)想到竟然全程基本無(wú)坑,一氣呵成,可見(jiàn)React的基礎(chǔ)技能對(duì)于其生態(tài)是有多重要了。。。
后面隨著一個(gè)新的客戶(hù)需要開(kāi)發(fā)一個(gè)小程序加APP,這并不在小編的技術(shù)棧范圍內(nèi),但是給出的報(bào)酬和支付訂金的爽快程度前所未見(jiàn),所以沒(méi)辦法,為了生活也只能硬著頭皮上。
一開(kāi)始去學(xué)微信的官方文檔,但是后來(lái)客戶(hù)說(shuō)最好能支持某寶,小編沒(méi)有精力去學(xué)習(xí)兩套SDK。這時(shí)候我就開(kāi)始各種搜索跨平臺(tái)小程序的開(kāi)發(fā)框架,找到了兩個(gè)比較成熟的,一個(gè)是Uniapp,但是沒(méi)有Vue開(kāi)發(fā)經(jīng)驗(yàn)再加上不喜歡他官網(wǎng)各種營(yíng)銷(xiāo)式的文檔樣式和自帶的IDE,那么只能選擇另一個(gè)京東出的Taro。沒(méi)想到使用Taro構(gòu)建小程序非常順利,除了官方的UI丑一點(diǎn)外(現(xiàn)在Taro已經(jīng)有很多好看的生態(tài)庫(kù)了),基本無(wú)坑。這時(shí),看到Taro也支持RN,于是乎抱著試一試的方式,邊學(xué)習(xí)React Native,邊使用Taro去構(gòu)建APP,那么結(jié)果大家都知道了,坑是有多多。。。后面只能裸用React Native去寫(xiě)APP,坑的確少了很多,APP也開(kāi)發(fā)成功了,但是唯一的缺憾是UI方面無(wú)法和小程序統(tǒng)一了。畢竟瑕不掩瑜,希望Taro對(duì)RN的支持會(huì)越來(lái)越好吧,后面有APP開(kāi)發(fā)還是會(huì)去嘗試Taro,而不是把它僅用于小程序開(kāi)發(fā)。
學(xué)習(xí)Nestjs
這幾年,接到的后端業(yè)務(wù)越來(lái)越多,但是因?yàn)镻HP的口碑撲街(其實(shí)個(gè)人認(rèn)為PHP并沒(méi)這么差),很多客戶(hù)也是人云亦云直接來(lái)一句PHP的不要。。。那么沒(méi)辦法,要么學(xué)習(xí)Java這個(gè)巨無(wú)霸體系,要么入手生態(tài)很差的Golang。一次在逛某乎的時(shí)候,看到有一名作者在布道一個(gè)node框架--Nestjs。憑我對(duì)10來(lái)年前,node剛出現(xiàn)時(shí)嘗試過(guò)的express框架的記憶,想著node不就是slim這種微框架嗎?這些項(xiàng)目得多累。但是鑒于當(dāng)時(shí)也沒(méi)有更好的選擇,并且TS語(yǔ)言也熟悉,然后抱著試一試的心態(tài)去嘗試Nestjs,沒(méi)想到?jīng)]試不知道,試了就知道撿到寶了。這個(gè)框架生態(tài)非常健全,ORM,消息列隊(duì),websockets,微服務(wù)等通通完美支持,然后測(cè)試了一下性能,對(duì)比swoole+symfony/laravel也不遑多讓。立馬拿來(lái)構(gòu)建第一個(gè)項(xiàng)目。因?yàn)楫?dāng)時(shí)的nestjs還是5.0版本,問(wèn)題頗多,大多集中在Typeorm方面,再加上Nestjs本身一大堆概念,比如DTO,驗(yàn)證器,攔截器,過(guò)濾器等等,在開(kāi)發(fā)第一個(gè)CRM項(xiàng)目的時(shí)候還是踩了非常多的坑,導(dǎo)致項(xiàng)目延期無(wú)數(shù)次,過(guò)了半年終于把項(xiàng)目開(kāi)發(fā)好,當(dāng)然報(bào)酬也少了許多。。。但是個(gè)人認(rèn)為這一切是值得的,后面就可以使用一種語(yǔ)言打遍天下了。
等到第二個(gè)項(xiàng)目來(lái)臨時(shí),Nestjs已經(jīng)使用地非常成熟了,這時(shí)候遇到一個(gè)老客戶(hù),他需要一個(gè)帶后臺(tái)的小程序,這是我發(fā)現(xiàn)了一個(gè)比較好的庫(kù)--lerna,可以用一種叫做monorepo的方式,把所有前后端的TS包放在一個(gè)倉(cāng)庫(kù)里,接口能相互調(diào)用,還能一鍵發(fā)布一些主應(yīng)用之外的包到npm的倉(cāng)庫(kù)里,甚至能按照依賴(lài)順序?qū)S進(jìn)行編譯,非常實(shí)用,所以直接使用lerna構(gòu)建起了整個(gè)應(yīng)用。
學(xué)習(xí)CLI構(gòu)建
后面發(fā)現(xiàn)了更加輕量的pnpm,然后pnpm不支持lerna,但是它本身沒(méi)有發(fā)布功能,并且無(wú)法按依賴(lài)順序執(zhí)行編譯命令,所以在空余時(shí)間我慢慢的嘗試自己編寫(xiě)一個(gè)命令行工具去使pnpm可以自己按順序執(zhí)行編譯和一鍵發(fā)布。于是發(fā)現(xiàn)了一個(gè)好用的node的命令行工具--yargs。當(dāng)然圍繞yargs還發(fā)現(xiàn)了execa,ora等好用CLI生態(tài)庫(kù)。并且同時(shí)深入整個(gè)Node重新學(xué)習(xí)了一遍,比如在使用CLI構(gòu)建長(zhǎng)時(shí)間命令式,使用fork開(kāi)子進(jìn)程等。同時(shí)發(fā)覺(jué)在開(kāi)發(fā)時(shí)nestjs的重啟速度實(shí)在太慢,于是在我的工具庫(kù)里添加了一個(gè)nodemon+swc熱更新nestjs的命令。
后面發(fā)現(xiàn)客戶(hù)部署上去的Nestjs應(yīng)用總是在進(jìn)程出現(xiàn)錯(cuò)誤后就掛掉,于是乎學(xué)習(xí)了一下cluster,使用PM2+Cluster的方式去部署應(yīng)用,當(dāng)然目前基本使用docker來(lái)部署了。
推薦給大家
小編以上的學(xué)習(xí)過(guò)程是非常痛苦且漫長(zhǎng)的,花了大概2年多,因?yàn)槎际瞧胀ㄈ?,并非天賦異稟。但是這么長(zhǎng)的學(xué)習(xí)和爬坑過(guò)程,甚至還是全職的情況下,是并不是誰(shuí)都有時(shí)間和精力去做的。尤其有些庫(kù)遇到的各種問(wèn)題去查官網(wǎng)文檔,不僅只有英文文檔,甚至大量還是語(yǔ)焉不詳?shù)那闆r下,只能不停地去查詢(xún)stackoverflow以及那些庫(kù)的issue,去github的discussions或者discord用英語(yǔ)提交問(wèn)題。這會(huì)浪費(fèi)大量的學(xué)習(xí)和工作時(shí)間。然后去各種QQ群提問(wèn)基本就是答非所問(wèn),各種灌水,去一些問(wèn)答社區(qū)提問(wèn)則大概率得不到想要的答案。
所以為了幫助大家能更快的解決開(kāi)發(fā)與工作中遇到的問(wèn)題。小編開(kāi)始做一套TS全系列的視頻教程并包含各個(gè)技術(shù)棧。目前以React18和Nestjs開(kāi)始制作,慢慢地涵蓋所有TS的技術(shù)棧,在學(xué)習(xí)和開(kāi)發(fā)過(guò)程中遇到問(wèn)題也可以讓小編幫助解決。但是視頻教程只針對(duì)已經(jīng)有一定基礎(chǔ)的同學(xué)來(lái)進(jìn)階學(xué)習(xí)。
如果沒(méi)有任何基礎(chǔ),可以找小編進(jìn)行基礎(chǔ)性學(xué)習(xí),幫助你盡快地掌握這個(gè)TS開(kāi)發(fā)體系。
總結(jié)
學(xué)會(huì)TS全棧開(kāi)發(fā)不僅有助于提升求職競(jìng)爭(zhēng)力,同時(shí)也可以成為一名完全自由的開(kāi)發(fā)者,比起需要長(zhǎng)期996的一端開(kāi)發(fā)者來(lái)說(shuō)優(yōu)勢(shì)不可為不大。尤其在某些編程語(yǔ)言和框架非常內(nèi)卷的情況下,還是非常有幫助的。同時(shí)希望我個(gè)人能幫助到一些同學(xué)快速掌握這套技術(shù)棧。
到此這篇關(guān)于Typescript是必須要學(xué)習(xí)嗎?如何學(xué)習(xí)TS全棧開(kāi)發(fā)的文章就介紹到這了,更多相關(guān)Typescript學(xué)習(xí)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
TypeScript與JavaScript的區(qū)別分析
TypeScript可以使用JavaScript中的所有代碼和編程概念,TypeScript是為了使JavaScript的開(kāi)發(fā)變得更加容易而創(chuàng)建的。推薦先精通JS的的前提下再學(xué)習(xí)TS,這樣更有利于同時(shí)學(xué)習(xí)兩門(mén)語(yǔ)言。2022-12-12TypeScript 交叉類(lèi)型使用方法示例總結(jié)
這篇文章主要為大家介紹了TypeScript 交叉類(lèi)型使用方法示例總結(jié),有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08TypeScript類(lèi)型級(jí)別和值級(jí)別示例詳解
這篇文章主要為大家介紹了TypeScript類(lèi)型級(jí)別和值級(jí)別示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-02-02typescript快速上手的基礎(chǔ)知識(shí)篇
靜態(tài)類(lèi)型的typescript與傳統(tǒng)動(dòng)態(tài)弱類(lèi)型語(yǔ)言javascript不同,在執(zhí)行前會(huì)先編譯成javascript,因?yàn)樗鼜?qiáng)大的type類(lèi)型系統(tǒng)加持,能讓我們?cè)诰帉?xiě)代碼時(shí)增加更多嚴(yán)謹(jǐn)?shù)南拗?。注意,它并不是一門(mén)全新的語(yǔ)言,所以并沒(méi)有增加額外的學(xué)習(xí)成本2022-12-12TypeScript?泛型接口具體使用實(shí)戰(zhàn)
這篇文章主要為大家介紹了TypeScript?泛型接口具體使用實(shí)戰(zhàn),有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-07-07ThreeJS使用紋理貼圖創(chuàng)建一個(gè)我的世界草地方塊
這篇文章主要為大家介紹了ThreeJS使用紋理貼圖創(chuàng)建一個(gè)我的世界草地方塊的實(shí)現(xiàn)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-06-06數(shù)據(jù)結(jié)構(gòu)Typescript之哈希表實(shí)現(xiàn)詳解
這篇文章主要為大家介紹了數(shù)據(jù)結(jié)構(gòu)Typescript之哈希表實(shí)現(xiàn)詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-01-01TypeScript實(shí)現(xiàn)十大排序算法之歸并排序示例詳解
這篇文章主要為大家介紹了TypeScript實(shí)現(xiàn)十大排序算法之歸并排序示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-02-02微信小程序?qū)崙?zhàn)之運(yùn)維小項(xiàng)目
這篇文章主要介紹了微信小程序?qū)崙?zhàn)之運(yùn)維小項(xiàng)目,就是利用微信小程序?qū)崿F(xiàn)了一個(gè)類(lèi)似138的功能,輸入IP就可以查看IP的詳細(xì)信心,有需要的朋友可以參考借鑒,下面來(lái)一起看看吧。2017-01-01