使用 Dart JS 与 ES6 互操作 类

Using Dart JS interop with ES6 classes

JavaSscript:

class MyClass {

    constructor() {
        console.log("MyClass instance created");
        this.answer = 42;
    }
}

let example = new MyClass();
console.log(example.answer);

飞镖:

@JS()
library interop_test;

import 'package:js/js.dart';

@JS()
class MyClass {
  external int get answer;
  external set answer(int value);
}

正在创建互操作实例 class MyClass 作为

MyClass myClass = MyClass();

结果:

EXCEPTION: TypeError: dart.global.MyClass is not a constructor

我也尝试在 @JS() 注释 class 中添加 external MyClass();external factory MyClass();,但得到了相同的消息。如果我将 @anonymous 注释添加到互操作 class,异常就会消失,但我无法访问实例成员。 (但我不明白为什么这需要匿名注释)

我正在使用 dart 2.0.0angular 5.0.0js 0.6.1+1dartdevcwebdev

通常 JS 互操作将依赖函数提升来确保旧式 JS class 在范围内。然而,ES6 classes 没有被提升,并且在 Dart 期望它们的地方不可用。有几种不同的方法可以使 class 可用于 Dart:

将 class 对象放在 window

这将 class 置于函数定义将被提升到的同一范围内。在 JavaScript:

class MyClass { ... }

window.MyClass = MyClass;

创建模块对象

您还可以将 class 放在某种伪模块或命名空间中。在 JavaScript:

class MyClass { ... }
var myModule = { MyClass: MyClass };

然后可以在 Dart 中的 myModule.myClass 访问:

@JS('myModule.myClass')
class MyClass { ... }