摘要： ReScript 和 TypeScript 的出現都是為了更好地使用JavaScript，但兩者還是有很大的不同。
本文分享自華為雲社群《【雲創共駐】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 感興趣，歡迎探索並與我分享！