【问题标题】：converting a javascript object returned from a javascript API to a dart class将从 javascript API 返回的 javascript 对象转换为 dart 类
【发布时间】：2016-08-18 05:08:00
【问题描述】：

我正在尝试使用来自https://pub.dartlang.org/packages/js 的 js 包创建 auth0 javascript API 的 dart 实现。

所以我在 index.html 中加载 https://cdn.auth0.com/js/lock/10.0.0/lock.min.js 并创建了以下 auth0lock dart 类：

@JS()
library auth0lock;

import 'package:js/js.dart';

@JS('Auth0Lock') 
class Auth0LockJS {
  external factory Auth0LockJS(String token, String domain, Object options);
  external on(String event, Function func);
  external show();
}

class Auth0Lock {
  Auth0LockJS auth0;
  Auth0Lock(String token, String domain, Object options) {
    this.auth0 = new Auth0LockJS(token,domain,options);
  }
  on(String event, Function func) {
    this.auth0.on(event,allowInterop(func));
  }
  show() {
    this.auth0.show();
  }
}

@anonymous
@JS()
class AuthResult {
 external factory AuthResult({
  String accessToken,
  String idToken,
  String idTokenPayload,
  String state
});
  external String get accessToken;
  external set accessToken(String v);
  external String get idToken;
  external set idToken(String v);
  external Object get idTokenPayload;
  external set idTokenPayload(Object v);
  external String get state;
  external set state(String v);
}

我正在编写一个 angular2-dart 应用程序，因此我创建了一个身份验证服务，该服务使用我之前使用以下代码展示的 auth0lock.dart 文件：

@Injectable()
class Auth {
    Auth0Lock lock;

    authenticatedEvent(AuthResult authResult) {
      print(authResult);
    }

    Auth() {
        this.lock = new Auth0Lock(configObj.auth0.apiKey, configObj.auth0.domain,{});
        this.lock.on("authenticated", authenticatedEvent);
    }
    updateProfileName(data) {
      var profile = data['profile'] != null ? data['profile'] : data;
      print(profile['name']);
    }

    authenticated() {
      return false;
    }

    login() {
       this.lock.show();
    }
}

现在...一切都正常了！我在auth_service.dart 文件中创建了一个类型为AuthLock 的变量，名为lock。我的实例是带参数的，运行show()函数，连接authenticated事件，认证完成后触发函数。

我创建了一个 AuthResult 类，但它忽略了它，我从函数处理程序返回了一个 javascript 对象。

我使用 Intellij 编写代码并使用 dartium 执行。因此，当我在auth_service.dart 文件的print(authResult);line 上放置断点时，调试器显示authResult 对象包含2 个属性，JavaScript View 类型为Object 和class 类型为JSObjectimpl。 Javascript View 包含此函数处理程序返回的所有属性。

如何将其转换为 dart 中的常规类？显然我创建了 AuthResult 类错误，因为函数处理程序不返回这种类型。那我错过了什么？

谢谢！

更新

在authenticatedEvent 函数中，我尝试打印authResult.values，产生了一个JSObjectImpl 类型的类没有该函数的错误。所以返回对象是类型JSObjectImpl。奇怪的是我不知道JSObjectImpl 是在哪里定义的，所以我删除了authResult 的变量类型，并尝试通过以下代码使用目录内的变量：

authenticatedEvent(authResult) {
  var a = authResult.accessToken;
  print(a);
}

这行得通。为什么我在飞镖中找不到JSObjectImpl 类型？有什么快速的方法可以将它转换为飞镖类？

谢谢

【问题讨论】：

标签： dart dart-js-interop

【解决方案1】：

也许您只需要从AuthResult 中删除@anonymous

一个简化但完整且类似的示例

index.html

<!doctype html>
<html>
  <head>
    <script>
      var Apple = function(type) {
        this.type = type;
        this.color = "red";
        this.getInfo2 = function() {
          return this.color + ' ' + this.type + ' apple';
        };
      };

      Apple.prototype.getInfo = function() {
        return this.color + ' ' + this.type + ' apple';
      };

      function callback(f) {
        console.log(f);
        f(new Apple('Golden Delicious'));
      }
    </script>
  </head>
  <body>
    <script type="application/dart" src="index.dart"></script>
    <script src="packages/browser/dart.js"></script>
  </body>
</html>

index.dart

@JS()
library typed_callback.web;

import 'package:js/js.dart';

@JS()
class Apple {
  external String get type;
  external set type(String type);
  external String get color;
  external set color(String color);
  external String getInfo();
  external String getInfo2();
  external Apple(String type);
}

typedef void Callback(Apple a);

@JS('callback')
external void callback(Callback /* or just Function */ f);

f(Apple apple) {
  print(apple.getInfo());
  print(apple); // prints the stringified JS object [object Object]
}

main() async {
  callback(allowInterop(f));
}

【讨论】：

嗨。谢谢你的帮助。不幸的是，删除 @anonymous 标记并不能解决问题。我得到的 AuthResult 是一个 json 对象而不是一个类。我想知道如何将其转换为飞镖类。
在我的示例中，传递给 Apple 的内容在打印时也看起来像一个 JS 对象，但可以像 Dart 类一样使用。我认为没有办法创建真正的 Dart 类。你得到的只是一个代理，它允许你像访问 Dart 类一样访问属性和方法。