ReScript in Korean

자바스크립트 객체에 바인딩하기

원문

자바스크립트 객체를 몇가지 조합으로 사용하고 있습니다.

  • 다른 언어의 "레코드" 또는 "구조체" (예: 리스크립트 또는 C)
  • 해쉬 맵
  • 클래스
  • 모듈 가져오기/내보내기

리스크립트는 위 4가지 사용 사례를 기반으로 자바스크립트 객체를 바인딩하는 방법을 명확하게 구분합니다. 여기서는 처음 3가지를 설명합니다. 자바스크립트 모듈 객체 바인딩은 자바스크립트로부터 내보내기/가져오기를 참고하십시오.

레코드처럼 사용하는 자바스크립트 객체를 바인딩 하기

리스크립트 레코드를 사용해 바인딩하기

자바스크립트 객체가 고정된 필드들을 가지고 있다면, 리스크립트의 레코드에 해당합니다. 리스크립트 레코드는 자바스크립트 객체로 깔끔하게 컴파일되므로, 명확하게 자바스크립트 객체를 리스크립트 레코드로 타입정의를 할 수 있습니다.

type person = {
name: string,
friends: array<string>,
age: int,
}
@bs.module("MySchool") external john: person = "john"
let johnName = john.name
var MySchool = require('MySchool');
var johnName = MySchool.john.name;

External여기, @bs.module여기를 참고하십시오.

리스크립트 객체를 사용하여 바인딩하기

위와 같이 하는 대신, 다음과 같이 리스크립트 객체를 사용해 자바스크립트 객체로 모델링할 수 있습니다.

type person = {
"name": string,
"friends": array<string>,
"age": int,
}
@bs.module("MySchool") external john: person = "john"
let johnName = john["name"]
var MySchool = require('MySchool');
var johnName = MySchool.john.name;

@bs 게터/세터를 이용한 바인딩

위의 방법 말고도, 자바스크립트 객체의 개별 필드들을 bs.getbs.set을 이용해 바인딩할 수 있습니다.

type textarea
@bs.set external setName: (textarea, string) => unit = "name"
@bs.get external getName: textarea => string = "name"

bs.get_indexbs.set_index를 사용해 인덱스 또는 동적 속성에 접근할 수 있습니다.

type t
@bs.new external create: int => t = "Int32Array"
@bs.get_index external get: (t, int) => int = ""
@bs.set_index external set: (t, int, int) => unit = ""
let i32arr = create(3)
i32arr->set(0, 42)
Js.log(i32arr->get(0))
var i32arr = new Int32Array(3);
i32arr[0] = 42;
console.log(i32arr[0]);

해시 맵처럼 사용하는 자바스크립트 객체를 바인딩하기

자바스크립트 객체가 다음과 같이 쓰이는 경우가 있습니다.

  • 키들이 추가되거나 삭제 됩니다.
  • 모든 값이 같은 타입을 가집니다.

그렇다면 이것은 객체보다는 해쉬 맵에 가깝습니다. getset 연산이 포함된 Js.Dict를 사용하면 자바스크립트 객체로 깔끔하게 컴파일됩니다.

클래스인 자바스크립트 객체를 바인딩하기

new Date()를 에뮬레이션하려면 bs.new를 사용합니다.

type t
@bs.new external createDate: unit => t = "Date"
let date = createDate()
var date = new Date();

자바스크립트 클래스 자체를 모듈로 가져와서 객체를 생성하고 싶으면 bs.newbs.module을 함께 쓰면 됩니다.

type t
@bs.new @bs.module external book: unit => t = "Book"
let myBook = book()
var Book = require('Book');
var myBook = new Book();