Interop Cheatsheet

Raw JS

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

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

Global Value

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

// Empty output

Global Module's Value

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

let someNumber = random()

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

var someNumber = Math.random();

Nullable

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

var a = 5;
var b;

option 유형이 아닌 Js.Nullable.t를 사용하므로써, undefined과 null이 될수 있는 값들을 처리합니다

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

var Caml_option = require('./stdlib/caml_option.js');
var Js_null_undefined = require('./stdlib/js_null_undefined.js');

var jsNull = null;
var jsUndefined;
var result1 = 'hello';
var result2 = Js_null_undefined.fromOption(10);
var result3 = Caml_option.nullable_to_opt(10);

자바스크립트 객체

• 리스크립트 레코드를 사용해 바인딩하기
• 해시 맵처럼 사용하는 자바스크립트 객체를 바인딩하기
• 클래스인 자바스크립트 객체를 바인딩하기

함수

Object Method & Chaining

@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 => mod(a, 2) == 0)
  ->Js.log

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

가변 인수

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

// Empty output

다형성 함수

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

// Empty 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: "))

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

자바스크립트 모듈의 상호 운용성

해당 링크에서 확인하세요

Dangerous Type Cast

이 변환 방식은 최후의 보루입니다! 남용하지 마세요

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

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

List of @bs Decorators

• @bs.as
• @bs.get
• @bs.get_index
• @bs.inline
• @bs.int
• @bs.meth
• @bs.module
• @bs.new
• @bs.return
• @bs.scope
• @bs.send
• @bs.set
• @bs.set_index
• @bs.string
• @bs.this
• @bs.uncurry
• @bs.unwrap
• @bs.val
• @bs.variadic