interop-cheatsheet.mdx

title	description	canonical
Interop Cheatsheet	Cheatsheet for various interop scenarios in ReScript	/docs/manual/latest/interop-cheatsheet

Interop Cheatsheet

This is a glossary with examples. All the features are described by later pages.

List of Decorators

Note: In ReScript < 8.3, all our attributes started with the bs. prefix. This is no longer needed and our formatter automatically removes them in newer ReScript versions.

Attributes

• @as: here, here, here and here
• @deriving
• @get
• @get_index

• @inline
• @int

• @module

• @new

• @optional

• @return

• @send: here and here

• @scope

• @set

• @set_index

• @variadic

• @string

• @this

• @uncurry

• @unwrap

• @val

• @taggedTemplate

• @deprecated

• genType

• @JSX

• @react.component: here and here

• @warning

• @unboxed

Extension Points

• %debugger
• %external
• %raw
• %re
• %todo

Raw JS

<CodeTab labels={["ReScript", "JS Output"]}>

let add = %raw("(a, b) => a + b")
%%raw("const a = 1")

var add = ((a, b) => a + b);
const a = 1

Global Value

<CodeTab labels={["ReScript", "JS Output"]}>

@val external setTimeout: (unit => unit, int) => float = "setTimeout"

// Empty output

Global Module's Value

<CodeTab labels={["ReScript", "JS Output"]}>

@val @scope("Math")
external random: unit => float = "random"

let someNumber = random()

@val @scope(("window", "location", "ancestorOrigins"))
external length: int = "length"

var someNumber = Math.random();

Nullable

<CodeTab labels={["ReScript", "JS Output"]}>

let a = Some(5) // compiles to 5
let b = None // compiles to undefined

var a = 5;
var b;

Handling a value that can be undefined and null, by ditching the option type and using Nullable.t:

<CodeTab labels={["ReScript", "JS Output"]}>

let jsNull = Nullable.null
let jsUndefined = Nullable.undefined
let result1: Nullable.t<string> = Nullable.make("hello")
let result2: Nullable.t<int> = Nullable.fromOption(Some(10))
let result3: option<int> = Nullable.toOption(Nullable.make(10))

import * as Caml_option from "./stdlib/caml_option.js";
import * as Core__Nullable from "./stdlib/core__Nullable.js";

var result2 = Core__Nullable.fromOption(10);

var jsNull = null;

var jsUndefined;

var result1 = "hello";

var result3 = Caml_option.nullable_to_opt(10);

JS Object

• Bind to a JS object as a ReScript record.
• Bind to a JS object that acts like a hash map.
• Bind to a JS object that's a class.

Function

Object Method & Chaining

<CodeTab labels={["ReScript", "JS Output"]}>

@send external map: (array<'a>, 'a => 'b) => array<'b> = "map"
@send external filter: (array<'a>, 'a => 'b) => array<'b> = "filter"
[1, 2, 3]
  ->map(a => a + 1)
  ->filter(a => mod(a, 2) == 0)
  ->Console.log

console.log(
  [1, 2, 3]
    .map(function (a) {
      return (a + 1) | 0;
    })
    .filter(function (a) {
      return a % 2 === 0;
    })
);

Variadic Arguments

<CodeTab labels={["ReScript", "JS Output"]}>

@module("path") @variadic
external join: array<string> => string = "join"

// Empty output

Tagged template functions

<CodeTab labels={["ReScript", "JS Output"]}>

// see https://bun.sh/docs/runtime/shell
type result = {exitCode: int}
@module("bun") @taggedTemplate
external sh: (array<string>, array<string>) => promise<result> = "$"

let filename = "index.res"
let result = await sh`ls ${filename}`

import * as $$Bun from "bun";
var filename = "index.res";
var result = await $$Bun.$`ls ${filename}`;

Polymorphic Function

<CodeTab labels={["ReScript", "JS Output"]}>

@module("Drawing") external drawCat: unit => unit = "draw"
@module("Drawing") external drawDog: (~giveName: string) => unit = "draw"

// Empty output

<CodeTab labels={["ReScript", "JS Output"]}>

@val
external padLeft: (
  string,
  @unwrap [
    | #Str(string)
    | #Int(int)
  ])
  => string = "padLeft"

padLeft("Hello World", #Int(4))
padLeft("Hello World", #Str("Message from ReScript: "))

padLeft("Hello World", 4);
padLeft("Hello World", "Message from ReScript: ");

JS Module Interop

See here

Dangerous Type Cast

Final escape hatch converter. Do not abuse.

<CodeTab labels={["ReScript", "JS Output"]}>

external convertToFloat: int => float = "%identity"
let age = 10
let gpa = 2.1 +. convertToFloat(age)

var age = 10;
var gpa = 2.1 + 10;