【云駐共創】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，好招人」。

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

相同的目標

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

事實證明，其中很多都是 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

我們把鼠標放到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

此處我們并不能使用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，安裝官方文檔下載了 Hello World 到本地，執行 npm run start,感受到了 ReScript 的編譯速度，太快了！不由得想起尤大的 Vite – “fast！fast！fast！”

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

使用ReScript的絕大部分項目200ms能增量編譯完，而TypeScript可能在一個10K文件的monorepo就直接內存溢出掛掉了。

類型推斷

在 ReScript 中，不需要類型注釋,這些類型是由語言推斷出來的，并且非常正確；而在 TypeScript 中，如果沒有顯現添加類型注釋，則默認是 any ，如下圖中代碼，ReScript 能正常推斷出入參應為 int， 而 TypeScript 則能夠編譯通過。

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

JavaScript TypeScript web前端

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。