ReScript vs. TypeScript: Overview and comparison

Written by Clara Ekekenta✏️

Many modern web developers are embracing emerging technologies that improve the speed of development as well as the quality of their code. For example, JavaScript has a reputation for its flexibility, but is often criticized for its lack of type safety, leading developers to turn to languages like TypeScript and ReScript.

TypeScript and ReScript are type-safe concepts that extend JavaScript functionalities. That means developers can enjoy static typing to complement JavaScript’s dynamism. In this tutorial, we'll compare ReScript with TypeScript with an overview of the latest release of ReScript, which is v11 as of January 2024.

What is ReScript?

ReScript is a lightweight typed language that efficiently compiles into human-readable JavaScript. It comes with a very fast compiler toolchain that is capable of scaling to meet any project requirements.

Using OCaml’s strong typing system, ReScript ensures that developers have a powerful system with type interferences, built-in support for JSX, and a very efficient and fast build that can compile to a clean and performant JavaScript. This makes ReScript a good choice for any JavaScript framework.

ReScript is also built to simplify its adoption by developers of all levels.

What's new in Rescript v11

ReScript v11 comes with a lot of new features and fixes to improve on its existing features. Some of these updates are breaking changes. Let's look at the new features introduced in ReScript v11:

• Supports @deriving(accessors) outputs
• Allows coercing integers and floats to unboxed versions that have a catch-all unboxed int or float case
• Type coercion is now supported for invariant type parameters like array payloads
• Begins treating the rescript command as the rescript build command, so now you can do rescript -w
• Allows tuples in untagged variants
• You can use record fields to pass comments to emitted TypeScript types
• Building dependencies no longer requires the --with-deps parameter. Instead, it’s done automatically when you run the rescript build command
• You can now use the @as property to rename fields in inline entries
• The @as attribute allows you to rename object attributes in @obj external PPX
• Supports promises, RegExes, dates, files, blobs, and bool types
• Allows you to coerce unboxed variants with strings to primitive strings
• Supports coercing integers to floats
• Supports a customizable suffix for generated JavaScript files

Comparing ReScript vs. Typescript

TypeScript has been around for a while and has set the rules regarding how we use variables and functions in JavaScript, making it easier to spot mistakes before they cause problems. It has also inspired others to adopt similar ideas, making coding cleaner and less error-prone for everyone.

ReScript was developed to address the same problem, but uses a different approach. We'll see what ReScript adds as well as what it leaves behind by comparing both tools through syntax and language features, type system interoperability with JavaScript, ecosystem, tooling, and learning curve.

Syntax and language features

ReScript’s syntax is influenced by OCaml, which uses a functional programming style that aims at simplifying things for developers who understand functional paradigms. It has a clear syntax, especially for defining types and pattern matching, making it more readable for those accustomed to functional programming languages.

Here’s an example of defining a type and function in ReScript:

// Defining a type and function in ReScript
type person = {
  name: string,
  age: int
}

let greet = (p: person) => "Hello, " ++ p.name

Meanwhile, TypeScript extends JavaScript with static types, which integrate seamlessly with existing JavaScript syntax. It supports both object-oriented and functional programming paradigms.

Being a superset of JavaScript, any valid JavaScript code is also valid TypeScript — after adding type annotations — which makes it very accessible for JavaScript developers.

Here’s an example of defining an interface and function in TypeScript:

// Defining an interface and function in TypeScript
interface Person {
  name: string;
  age: number;
}

const greet = (p: Person): string => `Hello, ${p.name}`;

Type system

ResScript uses auto-detection on most data types, minimizing manual coding, efficiently dealing with complex data, and controlling the program flow:

// Pattern matching in ReScript
type shape =
  | Circle(float) // radius
  | Rectangle(float, float) // width, height

let area = (s: shape) =>
  switch s {
  | Circle(r) => 3.14 *. r *. r
  | Rectangle(w, h) => w *. h
  }

Unlike ReScript, which has a strict and powerful type system in which the developer must explicitly type their comments, TypeScript is designed for JavaScript. It performs type checking, but in less strict way:

// Using union types and type guards in TypeScript
type Shape = 
  | { kind: "circle"; radius: number }
  | { kind: "rectangle"; width: number; height: number };

function area(s: Shape): number {
  if (s.kind === "circle") {
    return Math.PI * s.radius ** 2;
  } else {
    return s.width * s.height;
  }
}
=

Interoperability with JavaScript

ReScript’s efficient code compilation makes it a machine-readable language. On the other hand, combining it with languages such as Java can be tricky and requires some customization, thus making its adoption a little bit slow:

// Binding to a JavaScript function in ReScript
@val external alert: string => unit = "alert"

alert("Hello from ReScript!")

TypeScript, which works well with JavaScript, is later on compiled to be an enhanced version of JavaScript that communicates with other languages effortlessly. It’s also compatible enough for different languages to be effortlessly molded into TypeScript, which makes the learning process much faster and easier:

// Directly calling a JavaScript function in TypeScript
alert("Hello from TypeScript!");

Ecosystem and tooling

Being an open source language that originated in 2012, TypeScript has a huge community of developers. Consequently, it has a large number of useful resources, which include tutorial videos and forums where anyone can come and learn something easily.

Moreover, TypeScript provides ease of operation as it includes the use of tools such as linters, IDEs, and build tools. You’re even free to choose and use the multiple libraries readily available for most functionalities that you may need to look into, along with easy-to-access resources.

There is a growing community for ReScript, but it's not as big as that of TypeScript. This is because ReScript is yet to be widely adopted by organizations and the community.

ReScript in action

To further see how ReScript does things differently from TypeScript, let’s explore a real-world application of ReScript in a React application. To get started, create a new ReScript application by running the command below:

npx create-rescript-app

The above command will prompt you to select the project name my-rescript-app. For the template, we'll use Next.js and ReScript‘s latest version as well as its latest ReScript Core version: Now you can build and run the Next.js application by running the command below:

npm run res:build && npm run dev

Now that the application is running is running, let’s update the project to build a to-do application.

Creating types

We’ll start by creating the types for the todo application. In the src/index.rs file, update it to add the code below:

type todo = {
  title: string,
  status: bool,
}

type state = {
  todos: array<todo>,
  inputValue: string,
}

The above code defines the the type for what each todo object would look like. It will have a title and status fields. Then we defined another type for the state of the application, for handling the todos state, and the form input value for creating new todos.

Creating actions and reducers

Next, create actions and reducers to handle the creating, deleting and input change. Add the code snippet below to the index.rs file:

...
type actions =
  | CreateTodo(todo)
  | DeleteTodo
  | InputChange(string)

let reducer = (state, action) =>
  switch action {
  | CreateTodo(todo) => {
      todos: state.todos->Js.Array.concat([todo]),
      inputValue: state.inputValue,
    }
  | DeleteTodo => {todos: [], inputValue: state.inputValue}
  | InputChange(newValue) => {todos: state.todos, inputValue: newValue}
  }

The above code snippet will define a reducer function that will allow us to manage the state of our to-do application. We defined three actions that can be dispatched to the reducer:

• CreateTodo for adding a new to-do item to the existing list of todos
• DeleteTodo to clear all the todos
• InputChange methods to handle the input field state change when the user starts typing

The reducer function takes the current state and an action and then returns a new state based on the action type to allow for predictable state transitions.

Rendering the to-do items

Now let’s use the actions and reducers we created to render the to-dos. We’ll also add event listeners to handle creating new to-do items:

let default = () => {
  let (state, dispatch) = React.useReducer(reducer, initialState)
  let handleInput = e => {
    let newValue = ReactEvent.Form.target(e)["value"]
    newValue->InputChange->dispatch
  }
  <div>
    <h1 className="text-3xl font-semibold"> {"My Todo List"->React.string} </h1>
    <div className="my-4">
      <input
        type_="text"
        className="w-full rounded-full p-2 border border-gray-500 placeholder-gray-400"
        value=state.inputValue
        onChange={handleInput}
      />
      <button
        className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded mt-4"
        onClick={_ => {
          let newTodo = {title: state.inputValue, status: false}
          newTodo->CreateTodo->dispatch
        }}>
        {"Create Todo"->React.string}
      </button>
    </div>
    {state.todos
    ->Array.map(todo =>
      <div key=todo.title className="mb-4">
        <h2 className="text-xl font-bold"> {todo.title->React.string} </h2>
      </div>
    )
    ->React.array}
  </div>
}

In the above code snippet, we used the useReducer Hook to initialize the state of our component, which will accept a reducer function and the value of the initialState then returns the current state and dispatches to update the state of the component.

Lastly, run the command below to build and re-start the application:

npm run build && npm run dev

The resulting application should look something like the below:

Choosing between ReScript and TypeScript

When choosing between ReScript and TypeScript for application development, the project scope and planned application features are two issues that come to mind.

ReScript is among the most popular tools because it supports functional programming. It also lets programmers leverage the big React ecosystem, including TypeScript-based tools for managing processes in this ecosystem and the set of functional programming approach that are safely typed.

TypeScript is the perfect language for projects that use the larger JavaScript ecosystem in a significant way, including third-party libraries and tools. It brings both JavaScript and TypeScript together to reduce or even eliminate the transition requirement and allow you to use the same language in the frontend and backend for deployment in a variety of cases.

ReScript vs. TypeScript comparison table

To help you in choosing between ReScript and Typescript, I've summarized the features that both tools share and their ideal use cases:

Ultimately, it’s necessary for the option you choose to be consistent with the aims of your project, strengths of your team, and the type of environment spatial development that will take place.

Conclusion

In this tutorial, we’ve covered the difference between ReScript and Typescript to understand what each of them brings to table and what they both do differently.

We discussed what ReScript is and looked at the new features in ReScript v11. Then we went further to compare the features of ReScript with those of TypeScript. Finally, we built a to-do application to demonstrate how to use ReScript in a practical scenario.

Now that you’ve learned the features ReScript brings to web development, would you use it in your next project?

LogRocket: Full visibility into your web and mobile apps

LogRocket is a frontend application monitoring solution that lets you replay problems as if they happened in your own browser. Instead of guessing why errors happen or asking users for screenshots and log dumps, LogRocket lets you replay the session to quickly understand what went wrong. It works perfectly with any app, regardless of framework, and has plugins to log additional context from Redux, Vuex, and @ngrx/store.

In addition to logging Redux actions and state, LogRocket records console logs, JavaScript errors, stacktraces, network requests/responses with headers + bodies, browser metadata, and custom logs. It also instruments the DOM to record the HTML and CSS on the page, recreating pixel-perfect videos of even the most complex single-page and mobile apps.

Try it for free.