Abstract: ReScript and TypeScript are both designed to make JavaScript work better, but they are very different.

This article is shared in huawei cloud community “What are the Similarities and Differences between ReScript and TypeScript?” , by Hu Qi.

“Where there are people, there are rivers and lakes, and where there are rivers and lakes, there will be debates”. The front-end development field is also like this river and lake. The birth of new technology is often accompanied by endless debates. Today, however, we’re going to talk about ReScript and TypeScript by going rogue.

background

ReScript VS TypeScript

What’s the difference between ReScript and TypeScript? There has been a discussion on Zhihu. I, as an industry fan, found that He Shijun also paid attention to this issue. Maybe the discussion about ReScript and TypeScript will become more and more heated in the future. After all, ReScript is “fast, easy, full-type JavaScript from the future,” and while ReScript’s Chinese community is not yet fully developed, “an alternative to JavaScript can also be found in search engines: “ReScript”, “ReScript is what meme, better TypeScript?” And so on, but most of the articles are translated, so the smell of gunpowder is not so strong, but the discussion on Zhihu is more intense:

Netizen 1:ReScript is the weapon of the master. TypeScript is more like Java.

Netizen 2: Five years ago, people would say “TypeScript is the weapon of the master. JavaScript is more like Java.

What’s the difference between ReScript and TypeScript?

If you’re familiar with TypeScript, VS Code is written in TypeScript, and the word on the front end is “any application that can be implemented in JavaScript will eventually be implemented in TypeScript.” Almost all open source front-end projects are embracing TypeScript, making it the hot dog of the front end. ReScript isn’t as well known, but it’s in the future. It’s not enough to break TypeScript’s near-monopoly based on the number of Stars on Github, but as the saying goes, Looking to the future, ReScript is currently the “most underrated technology”. On the other hand, the core developer of ReScript has a familiar Chinese name like Vue. Js — Zhang Hongbo, and I hope ReScript will have a strong Chinese community as well.

ReScript

Same goal

The main thing ReScript and TypeScript have in common is how to solve the problem of supersizing in JavaScript. Why the emphasis on supersizing? If you have ever worked on a multi-player collaboration project with no type constraints, you may have encountered the same problem as this author, such as “Cannot read property ‘XXX’ on undefined”, and then went code by code to find this “XXX” to solve the problem. Back in 2018, Rollbar, an exception monitoring platform, counted the Top10 error types in front-end projects from 1000+ projects, and 7 of them were type errors:

top-10-javascript-errors

Many of these, it turns out, are null or undefined errors. Static type checking systems like TypeScript can help you avoid these errors if you use strict compiler options, and ReScript can also address these pain points. After all, JavaScript was built in a week, and languages like ReScript and TypeScript fill in the gaps.

ReScript VS TypeScript

Although both ReScript and TypeScript were created to make JavaScript work better, there are some major differences between them. For example:

  • TypeScript aims to cover the entire set of JavaScript features, while ReScript covers only a select subset of JavaScript.

  • ReScript code has no NULL /undefined error;

  • ReScript is fast and one of the fastest compiler and build system toolchains for JavaScript development;

  • Type annotations are not required; these types are inferred from the language and are perfectly correct;

  • Moving to TypeScript is breadth-first, while moving to ReScript is depth-first.

How to understand? Let’s start with the classic HelloWorld

Hello, TypeScript

TypeScript provides PlayGround online and can even be shared, such as the following shareURL:

www.typescriptlang.org/play?#code/…

Hello, TypeScript

If you hover over console.log, you’ll see :(method) console.log (message? : any, … OptionalParams: any[]): void (+1 overload), that’s the magic of TypeScript.

Hello, ReScript

ReScript also provides PlayGround online and also supports sharing, such as the share URL in the following code:

Rescript-lang.org.cn/try?code=FI…

Hello, ReScript

Log (“HelloWorld”) is probably a smaller example, the same mouse over it will prompt string => unit, and the string must be wrapped in double quotation marks and inferred to be of type 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
Copy the code

  • Compilation speed

I tried to run ReScript locally, installed the official documentation to download Hello World locally, executed NPM run start, and felt ReScript compilation speed was too fast! Can not help but think of especially big Vite – “fast! Fast!!! Fast!”

ReScript

There is no comparison of TypeScript compilation speed.

Most projects with ReScript can compile increments at 200ms, whereas TypeScript can run out of memory in a 10K monorepo and die.

  • Type inference

In ReScript, there is no need for type annotations; these types are inferred from the language and are perfectly correct; In TypeScript, the default is any if no type annotation is displayed. In the code below, ReScript can normally infer that the entry and exit argument should be int, and TypeScript compiles.

ReScript VS TypeScript

ReScript also includes pipes, pattern matching, and unique if statements, which are very different from TypeScript in detail. If you’re interested in ReScript and TypeScript, feel free to explore and share with me!

Click to follow, the first time to learn about Huawei cloud fresh technology ~