ReScript — The cousin of TypeScript

Gautam Paul
3 min readApr 13, 2021

What is ReScript?

ReScript acts like JS and also has a great type system. It compiles to the highest quality of clean, readable and performant JS which can directly run in browsers and Node. Plus it has a mean build tool chain.

Typically TypeScript transpiles into unreadable code but the auto-generated js file from ReScript is very concise & readable. The speed of transpilation and the performance of such code is surprising.

Installation

To install ReScript globally:

npm install -g bs-platform

New Project

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

That compiles your ReScript into JavaScript, then uses NodeJS to run said JavaScript. We recommend you use our unique workflow of keeping a tab open for the generated .bs.js file, so that you can learn how ReScript transforms into JavaScript.

Existing Project

Install ReScript locally as a devDependency:

npm install --save-dev bs-platform

Create a ReScript build configuration at the root:

{
"name": "your-project-name",
"sources": [
{
"dir": "src", // update this to wherever you're putting ReScript files
"subdirs": true
}
],
"package-specs": [
{
"module": "es6",
"in-source": true
}
],
"suffix": ".bs.js",
"bs-dependencies": []
}

Add convenience npm scripts to package.json:

"scripts": {   "re:build": "bsb -make-world -clean-world",   "re:start": "bsb -make-world -clean-world -w" }

Since ReScript compiles to clean readable JS files, the rest of your existing toolchain (e.g. Babel and Webpack) should just work!

Advantages

  1. ReScript is faster than JavaScript. ReScript’s type system and compiler naturally guides you toward writing code that’s very often performant by default, with good leverage of various Just-In-Time optimizations (hidden classes, inline caching, avoiding deopts, etc).
  2. Function- and module-level dead code elimination is facilitated by the well-engineered type system and purity analysis.
  3. At the global level, ReScript generates code that is naturally friendly to dead code elimination done by bundling tools such as Rollup and Closure Compiler, after its own sophisticated elimination pass.
  4. The same dead code elimination logic applies for ReScript’s own tiny runtime which is written in ReScript itself
  5. A very tiny JS output . A Hello world ReScript program generates 20 bytes of JS code
  6. The standard libraries required are only included when needed.
  7. It has the fastest iteration loop timings. ReScript’s build time is one or two orders of magnitude faster than any alternatives.
  8. ReScript’s JS output is very readable. This is especially important while learning, where users might want to understand how the code’s compiled, and to audit for bugs.
  9. The readability characteristic, combined with a fully-featured JS interop system, allows ReScript code to be inserted into an existing JavaScript codebase almost unnoticed.

Difference with TypeScript

ReScript shares some of the same goals as TypeScript but has some stark differences:

  1. TypeScript covers the entire JavaScript feature set and more but ReScript covers only a curated subset of JavaScript.
  2. ReScript code has no null/undefined errors.
  3. ReScript is extremely fast due to its simplicity and curation. It’s one of the fastest compiler & build system toolchains for JavaScript development.
  4. Doesn’t need type annotations. The types are inferred by the language & highly correct.
  5. Migrating to TypeScript is done breadth-first whereas migrating to ReScript is done depth-first.

Finally

ReScript is worth trying out. It can definitely change the way we look at JS. Even better, it might give us a more liberated coding experience.

GitHub : https://github.com/rescript-lang

Official Page : https://rescript-lang.org/

You should also look at ELM.

--

--

Gautam Paul

Engineering Director / Software Architect / Writer