如何在ReasonML中扩展JS类

Question

例如，我有一个类似于es6的类： class Foo {...} 我想扩展它： class Bar extends Foo {...} 在reason-react文档中，我找到了一些示例，但我不确定它是否适合我：

let component = ReasonReact.reducerComponent "TodoAppRe";
let make _children => {
  ...component,
  initialState: fun () => {count: 0},
  <...>

但是当我试图以这种方式编写代码时，出现了错误:

let myclass unit => {
  ...mysuperclass,
    hello: fun () => {
      Js.log "FooBar";
    }
};

错误：无限制记录字段更新

（在此示例中，mysuperclass是来自第三方js库的外部类。）

也许我做错了什么？

- S. Zobov

Answer 1

let foo bar => { ...baz, quux: ... }不是继承的语法，而是组合的语法。具体来说，它是获取 baz 记录值（而不是对象）并更新其 quux 成员（而不是方法）。

如果要在Reason/BuckleScript中扩展JS类，请首先记住BuckleScript生成与ES5向后兼容的代码，因此您不需要使用Babel。事实上，BuckleScript不直接支持扩展类。

但是，您可以使用BuckleScript的[%%bs.raw]属性在您的Reason源代码中包含原始JavaScript（https://bucklescript.github.io/bucklescript/Manual.html#_embedding_raw_js_code_as_statements）：

/* MyProject_Animal.re */

[%%bs.raw {|

// Dummy class for example:
class Animal {
  speak() {}
}

// or:
// import Animal from "somewhere";

class Dog extends Animal {
  _name;

  constructor(name) {
    super();
    this._name = name;
  }

  speak() {
    console.log(`${this._name} says woof!!`);
    super.speak();
  }
}
|}];

然后你可以按照下面的代码编写一个绑定到 Dog 类的代码:

module Animal_Dog = {
  type t;

  [@bs.new] external make: string => t = "Dog";
  /* Need this to ensure correct usage in other modules */
  let make = make;

  [@bs.send] external speak: t => unit = "";
};

let spot = Animal_Dog.make("Spot");
Animal_Dog.speak(spot);

但是，请记住，自从ES2015推出后，如果您想让它与ES2015之前的浏览器向后兼容，则需要通过Babel运行它。

- Yawar