Quick Links
  • -Overview
  • -Language Features
  • -JS Interop
  • -Build System
Documentation
Language Manual
Reference for all language features
ReScript & React
First class bindings for ReactJS
GenType
Seamless TypeScript integration
Reanalyze
Dead Code & Termination analysis
Exploration
Packages
Explore third party libraries and bindings
Syntax Lookup
Discover all syntax constructs
APIPlaygroundBlogCommunity
  • Playground
  • Blog
  • Twitter
  • GitHub
  • Forum
Language Manual
Overview
  • Introduction
  • Installation
  • Editor Plugins
  • Migrate to ReScript Syntax
  • Try
Language Features
  • Overview
  • Let Binding
  • Type
  • Primitive Types
  • Tuple
  • Record
  • Object
  • Variant
  • Null, Undefined and Option
  • Array & List
  • Function
  • If-Else & Loops
  • Pipe
  • Pattern Matching / Destructuring
  • Mutation
  • JSX
  • Exception
  • Lazy Values
  • Promise
  • Module
  • Import & Export
  • Reserved Keyword
JavaScript Interop
  • Embed Raw JavaScript
  • Shared Data Types
  • External (Bind to Any JS Library)
  • Bind to JS Object
  • Bind to JS Function
  • Import from / Export to JS
  • Bind to Global JS Values
  • JSON
  • Use Illegal Identifier Names
  • Generate Converters & Helpers
  • Browser Support & Polyfills
  • Interop Cheatsheet
    • Raw JS
    • Global Value
    • Global Module's Value
    • Nullable
    • JS Object
    • Function
    • JS Module Interop
    • Dangerous Type Cast
    • List of @bs Decorators
Build System
  • Build System Overview
  • Build System Configuration
  • Interop with JS Build Systems
  • Build Performance
Guides
  • Converting from JS
  • Libraries
Extra
  • Newcomer Examples
  • Project Structure
  • FAQ
Docs / Language Manual / Interop Cheatsheet
Edit

You are currently looking at the v6.0 - v8.2 docs (Reason v3.6 syntax edition). You can find the latest manual page here.

(These docs are equivalent to the old BuckleScript docs before the ReScript rebrand)

Interop Cheatsheet

Raw JS

Reason (Old Syntax)ML (Older Syntax)JS Output
let add = [%raw "(a, b) => a + b"];
[%%raw "const a = 1"];

Global Value

Reason (Old Syntax)ML (Older Syntax)JS Output
[@bs.val] external setTimeout: (unit => unit, int) => float = "setTimeout";

Global Module's Value

Reason (Old Syntax)ML (Older Syntax)JS Output
[@bs.val] [@bs.scope "Math"]
external random: unit => float = "random";

let someNumber = random();

[@bs.val] [@bs.scope ("window", "location", "ancestorOrigins")]
external length: int = "length";

Nullable

Reason (Old Syntax)ML (Older Syntax)JS Output
let a = Some(5); // compiles to 5
let b = None; // compiles to undefined

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

Reason (Old Syntax)ML (Older Syntax)JS Output
let jsNull = Js.Nullable.null;
let jsUndefined = Js.Nullable.undefined;
let result1: Js.Nullable.t(string) = Js.Nullable.return("hello");
let result2: Js.Nullable.t(int) = Js.Nullable.fromOption(Some(10));
let result3: option(int) = Js.Nullable.toOption(Js.Nullable.return(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

Reason (Old Syntax)ML (Older Syntax)JS Output
[@bs.send] external map: (array('a), 'a => 'b) => array('b) = "map";
[@bs.send] external filter: (array('a), 'a => 'b) => array('b) = "filter";
[|1, 2, 3|]
  ->map(a => a + 1)
  ->filter(a => a mod 2 == 0)
  ->Js.log;

Variadic Arguments

Reason (Old Syntax)ML (Older Syntax)JS Output
[@bs.module "path"] [@bs.variadic]
external join: array(string) => string = "join";

Polymorphic Function

Reason (Old Syntax)ML (Older Syntax)JS Output
[@bs.module "Drawing"] external drawCat: unit => unit = "draw";
[@bs.module "Drawing"] external drawDog: (~giveName: string) => unit = "draw";
Reason (Old Syntax)ML (Older Syntax)JS Output
[@bs.val]
external padLeft: (
  string,
  [@bs.unwrap] [
    | `Str(string)
    | `Int(int)
  ])
  => string = "padLeft";

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

JS Module Interop

See here

Dangerous Type Cast

Final escape hatch converter. Do not abuse.

Reason (Old Syntax)ML (Older Syntax)JS Output
external convertToFloat: int => float = "%identity";
let age = 10;
let gpa = 2.1 +. convertToFloat(age);

List of @bs Decorators

  • @bs.as

  • @bs.get

  • @bs.inline

  • @bs.int

  • @bs.meth

  • @bs.new

  • @bs.return

  • @bs.scope

  • @bs.send

  • @bs.set

  • @bs.string

  • @bs.this

  • @bs.uncurry

  • @bs.unwrap

  • @bs.val

  • @bs.variadic

Browser Support & PolyfillsBuild System Overview

© 2024 The ReScript Project

Software and assets distribution powered by KeyCDN.

About
  • Community
  • ReScript Association
Find us on