乐趣区

关于TypeScript:ReScript-与-TypeScript谁是前端圈的当红辣子鸡

摘要: 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.or…

咱们把鼠标放到 console.log 上就会看到提醒:(method) Console.log(message?: any, …optionalParams: any[]): void (+1 overload), 这就是 TypeScript 的神奇之处。

Hello, ReScript

ReScript 同样也提供在线的 PlayGround, 同样也反对分享,比方以下代码的 share url:https://rescript-lang.org.cn/…

此处咱们并不能应用 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 感兴趣,欢送摸索并与我分享!

点击关注,第一工夫理解华为云陈腐技术~

退出移动版