This is the latest docs version
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
  • Migrate to v11
  • Editor Plugins
  • Try
Language Features
  • Overview
  • Let Binding
  • Type
  • Primitive Types
  • Tuple
  • Record
  • Object
  • Variant
  • Polymorphic Variant
  • Null, Undefined and Option
  • Array & List
  • Function
  • If-Else & Loops
  • Pipe
  • Pattern Matching / Destructuring
  • Mutation
  • JSX
  • Exception
  • Lazy Value
  • Promises
  • Async / Await
  • Tagged templates
  • Module
  • Import & Export
  • Attribute (Decorator)
  • Reserved Keywords
  • Equality and Comparison
Advanced Features
  • Extensible Variant
  • Scoped Polymorphic Types
JavaScript Interop
  • Interop Cheatsheet
    • List of Decorators
    • Raw JS
    • Global Value
    • Global Module's Value
    • Nullable
    • JS Object
    • Function
    • JS Module Interop
    • Dangerous Type Cast
  • 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
  • Inlining Constants
  • Use Illegal Identifier Names
  • Generate Converters & Helpers
  • Browser Support & Polyfills
  • Libraries & Publishing
  • TypeScript
Build System
  • Overview
  • Configuration
  • Configuration Schema
  • External Stdlib
  • Pinned Dependencies
  • Interop with JS Build Systems
  • Performance
  • Warning Numbers
Guides
  • Converting from JS
Extra
  • Newcomer Examples
  • Project Structure
  • FAQ
Docs / Language Manual / Interop Cheatsheet
Edit

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

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

Global Value

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

Global Module's Value

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

let someNumber = random()

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

Nullable

ReScriptJS 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 Nullable.t:

ReScriptJS 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))

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

ReScriptJS 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

Variadic Arguments

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

Tagged template functions

ReScriptJS 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}`

Polymorphic Function

ReScriptJS Output
@module("Drawing") external drawCat: unit => unit = "draw"
@module("Drawing") external drawDog: (~giveName: string) => unit = "draw"
ReScriptJS Output
@val
external padLeft: (
  string,
  @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.

ReScriptJS Output
external convertToFloat: int => float = "%identity"
let age = 10
let gpa = 2.1 +. convertToFloat(age)
Scoped Polymorphic TypesEmbed Raw JavaScript

© 2024 The ReScript Project

Software and assets distribution powered by KeyCDN.

About
  • Community
  • ReScript Association
Find us on