ReScript and TypeScript, who is the "popular hot chicken" in the front-end circle

Abstract: ReScript and TypeScript appeared to make better use of JavaScript, but there is still a big difference between the two.

This article is shared from Huawei Cloud Community " [Cloud Creation Co-resident] What are the similarities and differences between ReScript and TypeScript? ", author: Hu Qi.

"Where there are people, there are rivers and lakes, and where there are rivers and lakes, there are disputes." The front-end development field is also like this river and lake. The birth of new technologies is often accompanied by endless chattering debates. As a practitioner, a rational view is, after all, " Regardless of business scenarios, technology selection is a hooliganism." However, today we will be "playing rogue" and talk about ReScript and TypeScript.

background

Regarding "What are the similarities and differences between ReScript and TypeScript?", Zhihu has already been discussing it. As a "meat-eating crowd" in the industry, I found that He Shijun also paid attention to this issue. Maybe the discussion about ReScript and TypeScript In the days to come, it will become more and more intense. After all, ReScript is "fast, simple and full-type JavaScript from the future". Although the Chinese community of ReScript is not perfect yet, it is from search engines (PS: exclude a certain degree here) You can also find articles such as "Another Alternative to JavaScript: ReScript: ReScript" and "What is ReScript, a better TypeScript?", but most of them are translated articles, so the smell of gunpowder is not so strong, but it is known. The discussion on is more intense:

Netizen 1: ReScript is a weapon for masters, and TypeScript is more like Java, so it's so recruiting.

Netizen 2: Five years ago, everyone would say "TypeScript is a weapon for masters, and JavaScript is more like Java, so it's good for recruiting people."

I believe everyone is familiar with TypeScript, VS Code is written in TypeScript, and the front-end circle is now circulating that "any application system that can be implemented in JavaScript will eventually be implemented in TypeScript". Almost all front-end open source projects are embracing TypeScript. , It is simply the "popular spicy chicken" in the front-end circle. In contrast, ReScript is not so famous for the time being, but it belongs to the future after all. Although at present, from the number of stars on Github, ReScript is not enough to shake TypeScript's near-monopoly "dominance", but as the saying goes, "Three Ten years in Hedong, 30 years in Hexi", with a view to the future, ReScript is currently the "most underestimated technology". From another perspective, the core developers of ReScript have a familiar Chinese name like Vue.js – Zhang Hongbo. I also hope that ReScript will also have a strong Chinese community.

Same goal

The biggest similarity between ReScript and TypeScript is that they both solve "how to solve the problem of ultra-large-scale programming on the JavaScript platform". Why do we emphasize "ultra-large-scale" here? If you have participated in a multi-person collaborative project without type constraints, you may encounter problems such as " Cannot read property'xxx' on undefined " like the author, and then look for this "xxx" line by line of code and solve it The problem, as early as 2018, the abnormal monitoring platform Rollbar counted the Top10 error types in front-end projects from 1000+ projects, and 7 of them were type errors:

It turns out that many of them are null or undefined errors. If you use strict compiler options, a static type checking system like TypeScript can help you avoid these errors, and using ReScript can also solve such pain points. After all, JavaScript is just a language created in a week, and languages such as ReScript and TypeScript fill in the flaws in JavaScript.

ReScript VS TypeScript

Although both ReScript and TypeScript appeared to make better use of JavaScript, there are still big differences between the two, such as:

• The realization of the type system is different. The goal of TypeScript is to cover the entire JavaScript feature set, while ReScript only covers a selected subset of JavaScript;
• ReScript code has no null/undefined errors;
• ReScript is very fast, it is one of the fastest compiler and build system tool chains for JavaScript development;
• No need for type annotations, these types are inferred by the language and are very correct;
• Migrating to TypeScript is breadth first, while migrating to ReScript is depth first.

How to understand? Let’s take a look at the most classic Hello World

Hello, TypeScript

TypeScript provides online PlayGround, and you can even share it, such as the share url of the following code: https://www.typescriptlang.org/play?#code/MYewdgziA2CmB00QHMAUAiAEraSAEAKgJ4AOsAysAE4CWJALugJRA

We put the mouse on the console.log and you will see the prompt: (method) Console.log(message?: any, ...optionalParams: any[]): void (+1 overload), this is the magic of TypeScript Place.

Hello, ReScript

ReScript also provides online PlayGround, and also supports sharing, such as the share url of the following code: https://rescript-lang.org.cn/try?code=FIZwdANg9g5gFAIgBIFMLQAQCUUGUDGATgJYAOALggJRA

Here we cannot use console.log, we need to use Js.log, Js.log("HelloWorld") may be a relatively small example, the same mouse will prompt string => unit, and the string here Must be wrapped in double quotes, the type is inferred to be string.

Run ReScript locally

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

• Compilation speed

The author tried to run ReScript locally, installed the official document, downloaded Hello World to the local, and executed npm run start. I felt the compiling speed of ReScript, too fast! Can't help but think of the very big Vite-"fast! fast! fast!"

The compilation speed of TypeScript is not compared here. According to netizens:

Most of the projects that use ReScript can be compiled in 200ms increments, and TypeScript may be directly memory overflow and hang up in a monorepo with a 10K file.

• Type inference

In ReScript, there is no need for type annotations. These types are inferred by the language and are very correct. In TypeScript, if type annotations are not displayed, the default is any. As shown in the code below, ReScript can infer input parameters normally. Should be int, and TypeScript can be compiled.

In addition, ReScript has pipelines, pattern matching, unique if statements, etc. These are hugely different from TypeScript in details. If you are interested in ReScript and TypeScript, welcome to explore and share with me!

Click to follow, and learn about Huawei Cloud's fresh technology for the first time~