ReScript 與 TypeScript,誰是前端圈的“當紅辣子雞”

華為雲開發者社群 發表於 2021-09-06
前端
摘要: ReScript 和 TypeScript 的出現都是為了更好地使用JavaScript,但兩者還是有很大的不同。

本文分享自華為雲社群《【雲創共駐】ReScript 和 TypeScript 有什麼異同?》,作者: 胡琦 。

“有人的地方就有江湖,有江湖的地方就有爭論”,前端開發領域也如同這個江湖,新技術誕生的同時往往也會伴隨著喋喋不休的爭論,作為從業者,理性看待便是,畢竟“拋開業務場景談技術選型都是耍流氓”。不過,今天我們就“耍耍流氓”,談一談 ReScript 和 TypeScript 。

背景

ReScript 與 TypeScript,誰是前端圈的“當紅辣子雞”

關於“ReScript 和 TypeScript 有什麼異同?”,知乎上已經有大佬在討論了,筆者作為行業裡的“吃瓜群眾”,發現賀師俊也關注了這個問題,也許關於 ReScript 和 TypeScript 的討論再未來的日子裡會越來越激烈,畢竟 ReScript 是“來自未來的快速、簡單、全型別的 JavaScript”,儘管 ReScript的中文社群還不太完善,但從搜尋引擎(PS:此處排除某度)中也能找到“JavaScript 的另一個替代品:ReScript”、“ReScript 是什麼梗,更好的 TypeScript?”之類的文章,不過大都是翻譯過來的文章,因此火藥味沒有那麼濃,反而是知乎上的討論比較激烈:

網友1: ReScript 是高手的武器, TypeScript 更像是 Java,好招人。

網友2:五年以前大家也會說「TypeScript 是高手的武器,JavaScript 更像是 Java,好招人」。

ReScript 與 TypeScript,誰是前端圈的“當紅辣子雞”

相信大家對 TypeScript 不陌生了吧,VS Code 就是使用 TypeScript 編寫的,前端圈現在流傳“任何能夠用JavaScript實現的應用系統,最終都必將用TypeScript實現”,幾乎所有的前端開源專案都在擁抱 TypeScript,簡直是前端圈的“當紅辣子雞”。相比之下, ReScript 暫時沒有這麼有名氣,但畢竟是屬於未來的,儘管目前從 Github 的 star 數量來看,ReScript 還不足以撼動 TypeScript 近乎“壟斷”的“統治地位”,但常言道“三十年河東,三十年河西”,著眼於未來,ReScript 目前是“最被低估的技術”。從另一個角度來看, ReScript 的核心開發者如同 Vue.js 一樣就有熟悉的中文姓名–張巨集波,筆者在這裡也希望 ReScript 也會擁有強大的中文社群。

ReScript 與 TypeScript,誰是前端圈的“當紅辣子雞”

相同的目標

ReScript 和 TypeScript 最大的相同點就是都是解決“如何在JavaScript平臺上解決超大規模程式設計的問題”,這裡為什麼強調“超大規模”?如果您參與過沒有型別約束的多人協作專案,可能會和筆者一樣遇到諸如 “Cannot read property ‘xxx’ on undefined“ 之類的問題,然後一行一行程式碼去找這個”xxx“再解決問題,早在 2018年,異常監控平臺Rollbar從 1000+ 專案中統計了前端專案中 Top10 的錯誤型別,其中就有 7 個是型別錯誤:

ReScript 與 TypeScript,誰是前端圈的“當紅辣子雞”

事實證明,其中很多都是 null 或 undefined 的錯誤。如果您使用嚴格的編譯器選項,像TypeScript這樣的靜態型別檢查系統可以幫助您避免這些錯誤, 使用 ReScript 同樣也能解決這樣的痛點。畢竟 JavaScript 只是一個星期造出的語言,ReScript 和 TypeScript 等語言填補了 JavaScript 中存在的缺陷。

ReScript VS TypeScript

儘管 ReScript 和 TypeScript 的出現都是為了更好地使用JavaScript,但兩者還是有很大的不同,比如:

  • 型別系統的實現思路就不一樣,TypeScript 的目標是涵蓋整個 JavaScript 功能集,而 ReScript 僅涵蓋 JavaScript 的一個精選子集;
  • ReScript 程式碼沒有 null/undefined 錯誤;
  • ReScript 速度非常快,它是用於 JavaScript 開發的最快的編譯器和構建系統工具鏈之一;
  • 不需要型別註釋,這些型別是由語言推斷出來的,並且非常正確;
  • 遷移到 TypeScript 是廣度優先的,而遷移到 ReScript 是深度優先的。

如何理解?我們先看看最經典的Hello World

Hello, TypeScript

TypeScript 提供線上的 PlayGround,甚至還可以分享,比如以下程式碼的share url: https://www.typescriptlang.org/play?#code/MYewdgziA2CmB00QHMAUAiAEraSAEAKgJ4AOsAysAE4CWJALugJRA

ReScript 與 TypeScript,誰是前端圈的“當紅辣子雞”

我們把滑鼠放到console.log上就會看到提示:(method) Console.log(message?: any, ...optionalParams: any[]): void (+1 overload),這就是 TypeScript 的神奇之處。

Hello, ReScript

ReScript 同樣也提供線上的 PlayGround,同樣也支援分享,比如以下程式碼的share url: https://rescript-lang.org.cn/try?code=FIZwdANg9g5gFAIgBIFMLQAQCUUGUDGATgJYAOALggJRA

ReScript 與 TypeScript,誰是前端圈的“當紅辣子雞”

此處我們並不能使用console.log,需要用Js.log,Js.log("HelloWorld")可能是比較小的一個示例,同樣的滑鼠放上去會提示string => unit,而且此處的字串必須用雙引號包裹,型別推斷為 string 。

本地執行 ReScript

git clone https://github.com/rescript-lang/rescript-project-template
cd rescript-project-template
npm install
npm run build
node src/Demo.bs.js

ReScript 與 TypeScript,誰是前端圈的“當紅辣子雞”

  • 編譯速度

筆者嘗試了本地執行 ReScript,安裝官方文件下載了 Hello World 到本地,執行 npm run start,感受到了 ReScript 的編譯速度,太快了!不由得想起尤大的 Vite – “fast!fast!fast!”

ReScript 與 TypeScript,誰是前端圈的“當紅辣子雞”

此處沒有對比 TypeScript 的編譯速度,按照網友的說法:

使用ReScript的絕大部分專案200ms能增量編譯完,而TypeScript可能在一個10K檔案的monorepo就直接記憶體溢位掛掉了。

  • 型別推斷

在 ReScript 中,不需要型別註釋,這些型別是由語言推斷出來的,並且非常正確;而在 TypeScript 中,如果沒有顯現新增型別註釋,則預設是 any ,如下圖中程式碼,ReScript 能正常推斷出入參應為 int, 而 TypeScript 則能夠編譯通過。

ReScript 與 TypeScript,誰是前端圈的“當紅辣子雞”

除此之外, ReScript 還有管道、模式匹配、獨特的 if 語句等等,這些和 TypeScript 在細節上有巨大的不同,如果您對 ReScript 和 TypeScript 感興趣,歡迎探索並與我分享!

 

點選關注,第一時間瞭解華為雲新鮮技術~