TypeScript’s Successor is Waiting, and You’ll Never Want to Turn Back

Today, TypeScript is one of the world’s most popular languages, and the preferred way by many to build applications with JavaScript. It’s easy to understand why – as a layer on top of JavaScript, TypeScript makes your code more reliable than ever.

But while TypeScript clearly brings advantages to the table, we’re going to look at an alternative that takes what TypeScript does to the next level – ReScript.

What is ReScript?

ReScript, just like TypeScript, is a typed language that compiles to JavaScript. Unlike TypeScript, however, ReScript brings more syntax & tooling, making it more like a different language than a JavaScript extension.

Syntax

ReScript’s syntax is designed to be robust, ergonomic, and naturally guide developers to writing performant code. Here’s a look at a React component, written in Rescript:

module Button = {
  @react.component
  let make = (~count) => {
    let times = switch count {
    | 1 => "once"
    | 2 => "twice"
    | n => n->Int.toString ++ " times"
    }
    let text = `Click me ${times}`

    <button> {text->React.string} </button>
  }
}

As you can see, Rescript freshens JavaScript with a large collection of new syntax and types. Here’s a look at some of the primary differences:

• Variables – let in Rescript is the equivalent to
  const in JavaScript, and var has (thankfully) been
  removed. If you want a mutable variable, use ref()
  and :=.

let x = ref(5); x := x.contents + 1

• Arrays must all be of one type (homogenous) – for arrays of multiple types (heterogenous), use tuples or variants:

(1, "Bob", true) // Tuple
[String("Hello"), Boolean(true), Boolean(false), Number(13.37)] // Untagged Variant

• None replaces null and undefined.

• Functions must follow variable syntax (e.g. let = () =>):

let named = (arg) => {...}
let named = async (arg) => {...}

• Easy returns – there’s no need for a return statement, just a normal line:

// myFun returns 2x + 2y
let myFun = (x, y) => {
  let doubleX = x + x
  let doubleY = y + y
  doubleX + doubleY
}

• If is slightly different – there’s no need for parenthesis (), and they are always expressions:

if a {b} else {c}
let result = if a {"hello"} else {"bye"}

• Blocks are equivalent to immediately invoked functions in JavaScript:

// JavaScript
let result = (function() {
  const x = 23;
  const y = 34;
  return x + y;
})();

// Rescript
let result = {
  let x = 23
  let y = 34
  x + y
}

Those are just the major changes Rescript brings – for a full comparison to JavaScript, see the docs.

Performance

Rescript was built from the start for performance, and in many cases is actually faster than JavaScript.

You might wonder how that’s even possible – after all, Rescript compiles to JavaScript – but it’s because Rescript syntax guides developers to writing performant code.

Under the Hood

Under the hood, Rescript uses a build system called Ninja. Ninja is similar to Make, but cross-platform and more minimal/performant.

ReScript reads into rescript.json and generates the Ninja build file in lib/bs. The file contains the low-level compiler commands, namespacing rules, intermediate artifacts generation & others. It then runs ninja for the actual build.

JS Wrapper

rescript itself is a Node.js wrapper which takes care of some miscellaneous tasks, plus the watcher. The lower-level, watcher-less, fast native rescript is called rescript.exe. It’s located at node_modules/rescript/{your-platform}/rescript.exe.

If you don’t need the watcher, you can run said rescript.exe. This side-steps Node.js’ long startup time, which can be in the order of 100ms. The editor plugin finds and uses this native rescript.exe for better performance.

Benchmark

Here’s the results from a stress test of Rescript, on a project with 10,000 files (2 directories, 5000 files each, first 5000 no dependencies, last 5000 10 dependencies on files from the former directory), on a Retina MacBook Pro Early 2015 (3.1 GHz Intel Core i7):

• No-op build of 10k files: 800ms (the minimum amount of time required to check the mtimes of 10k files).

• Clean build: <3 minutes.

• Incremental build: depends on the number of the dependents of the file. No dependent means 1s.

Conclusion

Overall, Rescript is a promising language that’s great for building robust and scalable projects.

It’s compilation to JavaScript ensures it can run nearly everywhere, and the compiler being built on Ninja means the compilation time is exceedingly fast.

What do you think about Rescript? Will developers switch to it from JavaScript and TypeScript, or is it better to just use a language like Go? What ideas do you have for using Rescript?

Reply in the comments below, and don’t forget to ❤️🦄🤯🙌🔥! Thanks for reading.